こんにちは、sugarです。

この記事は 初めてのアドベントカレンダーAdvent Calendar 2021 11日目の記事です。

はじめに

この記事は Web フロントエンドの開発とフレームワーク/ライブラリの歴史について超ざっくり解説します。

• 以下のような方が対象読者 🔰 です。
  • Web フロントエンドの開発を勉強してみたい人/歴史をざっくり知りたい人

用語についての詳細なバックボーンは解説せず、ざっくりと流れを掴むことにフォーカスするので、気になった用語についてはぜひ調べてみてください 🙏

Web フロントエンドとは？

一般的に(?),Web フロントエンドの言葉が表す範囲は
「ユーザーがブラウザ上の UI を操作し、Web アプリケーションにアクセスするあたり」のことを指します。

つまりWeb フロントエンド開発は、
ユーザーとアプリケーションの間のブラウザをごにょごにょしていい感じにするのが主なおしごとになります。

どうやってブラウザ上に表現される？

ブラウザ(safari や chrome)上のコンテンツはDOM によって表されます。
DOMは HTML の各要素が展開され、ツリー状になっています。

この DOM に対してJavaScript のようなスクリプト言語を通してアクセスすることで動的な操作を可能にします。
(DOM は特定のプログラミング言語に依存しないように設計されているので、必ずしも JS である必要はありません)

動的？

例えば、
「Qiitaにアクセスしたら毎回トップページに違う記事が表示されている」
「入力フォームに文字を入力したら勝手に検索結果が表示される(インクリメンタルサーチ)」
みたいなやつです。
JS君がいい感じにDOMを組み立ててくれます。

JSのフレームワークやライブラリ

ピュアなJSでも動的な操作はもちろん実装できますが、
今はなきIEやMozilla系のブラウザではブラウザ間でJavaScriptの挙動に差異があり、実装が大変でした。

2006年、そんなブラウザ間のJS実装の差異を吸収してくれるライブラリが人気になりました。
それがjQueryです。

ここから何世代にもわたってWebフロントエンドの戦争は続いていきます。

↓に簡単な年表を載せます。

• 2005年~2006年
  • Google Mapなどのリアルタイム表示を切り替える必要がある動的なサービスの登場により、サーバーサイドのみのページ遷移による静的HTML返却だけでは対応できなくなった
  • 非同期通信をしながら動的にページを書き換えられるAjaxが使われるようになる
• 2007年~2009年
  • HTML5の登場でFlushなどのプラグインが死亡する
  • node.jsリリース
  • ECMAScript 5th Edition発表
• 2010年~2012年
  • フロントエンド向けにMVCのデザインパターンを適応したフレームワークが登場
    • Backbon,Knockout,AngularJS(SPA先駆者)
• 2013年~
  • React, Vue, Angular登場
  • 従来のパフォーマンス的な問題を仮想DOMや単方向データフローで解決

↑には書いていませんが、モジュールバンドラのWebpackやトランスパイラのbabelなどのWebフロントエンド周りのエコシステムの成長も今のフレームワークの進歩につながっています。

なんとなーく、ブラウザ上で表現できる幅が広がるにつれて、既存の技術だとどうしても動作的に重いなどの色々なつらみが出て、それを解消するためにフレームワークも進化していったんだなあくらい押さえてくれれば嬉しいです。

モダン？なフレームワークについて

年表の通りWebフロントエンドの開発環境の移り変わりはすごく早いです。
↑ではフレームワークの移り変わりをメインに示していますが、同じフレームワーク(例えばReact)の中でも日々進化を遂げています。

そのため、使用するフレームワークのバージョンによっては同じフレームワークでも開発環境がかなり違うことは一応頭の中に入れておいたほうが良いです。

ReactやVue,Angularなど何が違うのかみたいな記事はたくさんあるので調べてみてください🙏
参考: Angular vs React vs Vue – どのフレームワークを使うべきか？

各フレームワークの比較

ここでは4つ(jQuery, Angular, Vue, React)を比較します。

• npmパッケージのダウンロード数の推移の比較は以下の通りです。

• Stack Overflow Developer Survey 2021の最も使われたフレームワークは去年一位のjQueryを抜いて今年はReactが一位らしいです。

上だけ見ると世界的にはReactが圧倒的ですが、国内だとRailsのmodelやviewの考えを適用できるVueは非常に人気が高いです。
また、jQueryはまだまだ現役で、上記フレームワークに比べて環境構築の手間もそんなに掛からず、パフォーマンスをそこまで気にする必要がない場合においてはとても有用なフレームワークだと思います。

これから

今回説明はしていませんが、Reactの製のフレームワークであるNextやVueのNuxt、最近だとRemixなどパフォーマンス最適化において有用なフレームワークなどが次々に開発されています。

これを機にWebフロントエンドに興味を持った方がいらっしゃればぜひ勉強して使ってみてください🙇‍♂️

参考

Frontend Developer
DOM の紹介
ブラウザによるイベントの取り扱いの違いを吸収する
フロントエンジニアの価値はどこから生まれるのか
Webアプリケーションフロントエンド年代記 - 2018年夏編
マイクロフロントエンド入門
2021 Developer Survey