最新のフロントエンドは変わりすぎ。2010年頃から見るとタイムスリップしたみたい。

/ ソウタロウ

僕はプログラマだ。

だが仕事はフロントエンドとOSの間のあたりを主にやっているため、HTMLやJavaScriptのとこらへんは長らく触ってこなかった。
それに、仕事では古くてカビの生えたものをずっと使い続けているから、2000年代初期のテーブルレイアウトとfunctionだらけのJavaScriptを触ってきていた。

プライベートのプログラミングタイムも、レイヤーが低い部分、例えば通信とか形態素分析とかやったり、なにか必要なものがあればコマンドでの形で済ませたりする。
たとえWEB画面が必要でも、軽くjQueryで済ませるような簡単なものしか作ってこなかった。

最近、故あってプライベートでvue.jsというフレームワークをさわることになり、一気に現代に引き戻されることになった。

感想：全然知らない言語で新しいもの作ってる感じ

最近のフロントエンドを見た古代人の感想

古代人のフロントエンドの感覚

この業界はドッグイヤー、つまり犬が駆け抜けていくように変化が早い社会だ。
10年一昔とはいうが、数年で4年で一昔位の感覚だ。
というわけですでにふた昔経過してしまった。
体感として20年おいていかれた気分だ。
もう僕は古代人。コールドスリープをしていて現代のことがわからない昔の人間だ。

古代人のフロントエンドの感覚

  • HTMLとCSSとJSを別々のファイルに書く。
  • JSはjQueryを使う。
  • HTMLはHTML5を使うがたまにIE対応とかしなきゃいけないのでjQuery最高
  • サーバーサイドと分けづらい

古代人が見た現代

  • HTML CSS JSをまとめて、コンポーネント単位でまとめる。
  • jQueryの姿が見えない。
  • JavaScriptじゃなくてECMAScriptってみんな言ってる。
  • コンパイル？トランスパイル？ビルド？などの処理をして、最終的な配布物が生成される。
  • ルーティングがフロントで出来る。
  • サーバーサイドと結合が緩い。

古代人の素人が一ヶ月Vue触っただけなので、別のフレームワークじゃ違うという意見もあるかと思うが個人の意見として聞いてほしいのだが、
感じたこととしてはまさにこんな感じで2010年ごろと全く違う。

戸惑いポイント1 コンポーネント

まず、コンポーネントで分けるという作り方が戸惑いポイント。
投稿フォームやカレンダー、○○リストなど画面のパーツごとに独立した物として作る。

オブジェクトみたいな物と考えて良いと思う。
コンポーネントにわけられているので再利用や、別の場所に移動というのが簡単にできる。
パーツごとに細かく作ってそれを並べるような感じで組み立てていく。

これは良いアプローチなのだが、フレームワークごとにやり方が色々あって、そこに慣れるまで結構時間がかかった。そういう概念に触れていなかったということも学習コストがかかった一因かもしれない。

戸惑いポイント2 ECMAScripttte

みんなJavaScriptじゃなくてECMAScriptって言っている。

JavaScriptの標準としてECMAScriptという仕様がある。
JavaScriptはECMAScriptの一つの実装なのだという。

そして多くのJavaScriptはECMAScript5.1を元にしているそうだが、
ECMAScriptは5.1から2個先に進んで2016というものが最新になっている。ECMAScriptは今はclassやらimportやexportがサポートされている。
JavaScriptでクソめんどくさかった、あのスコープについてだいぶ分かりやすくなったっぽい

ただし、ECMAScriptが最新になっても新しいECMAScriptを動かせるブラウザが無いそうだ。

そこで重要になってくるのがトランスパイラ。
ある言語をある言語に変換してくれるものをトランスパイラという。

babelというものが有名らしい。かつて言語は一つだったという神話のバベルが元なんだろうな。
このトランスパイラを使ってECMAScriptをブラウザが分かるJavaScriptに書き換えてくれる。

プログラマはより安全で書きやすくて読みやすいECMAScriptを使いつつ、古いJavaScriptは機械に任せるってわけだ。

その他にも、文法チェックしてくれたり、一つのファイルにまとめてくれたり、いろんなソフトウェアが協力しあって、ソースをコンパイルするようにして配布物を生成している。

戸惑いポイント3 ルーティングがフロントでも出来る

ルーティングってのはどのURLでどのページを見せるかということ。
サーバーサイドがURLを拾って振り分けてっていうことをやってきているが、
フロント側でも出来るようになったっぽい。
スクリプトで色々やってDOMを生成しているのだと思う。

だから、サーバー側にリクエストがあまり飛ばないでキレイなサイトが作れる。
実質一つのページだから、SPA (シングルページアプリケーション)というらしい。

もちろんサーバー側にリクエストを飛ばすこともできる。
どう使い分けするかは設計次第。

フロントだけで出来る範囲は凄い広がったので、従来の考えで設計してしまうと逆に足枷になってしまうことがあると思う。

嬉しいポイント サーバーと結合が緩い

SPAなどフロントでやることが増えるので、必然的にサーバーとのやり取りはajaxでやり取りすることになる。

サーバーサイドがどんなアプリであっても、想定しているJSONを返してさえくれればフロントは構わないレベルまで繋がりがゆるくなった。

以前はサーバーサイドのテンプレートやJSPやらなんやらで繋がりは強かったが、
リクエストに対して満たしてほしいものさえ帰ってくればいいので、保守や維持は相当楽になるだろう。

まとめポイント

JSの言語仕様も新しいものでかけるようになったし、コンポーネントなどの仕組みで粗結合が進んでいるので相当開発がしやすくなっている。

特に保守は楽だと思うし、機能追加も影響少なくできるはず。

フレームワークが想定している使い方であれば簡単だけれども、ちょっと複雑なことをやろうとすると結構難しい。
特に作られるHTMLはコンパイラ任せになっていて、複雑なところは隠蔽されていてフレームワークとしてはいいのだけれども、逆にそこで今まで簡単にやれていたことが制約になって難しくなっているという部分もあると思う。

今までずっと保守していたサイトを最近のフレームワークに置き換えるのは難しいとは思うが、
一から新しく作る場合は新しいものを使うと素早く開発できると思う。

中にはjQueryでも新しいと感じる2000年代始めで知識の更新が止まっている人もいるけれども、
そういう人から見たら全く別のようにみえるだろうな。
逆に過去のことはさっぱり忘れて別技術だと思って始めると案外いいかもしれない

スポンサードリンク

関連コンテンツ