フロントエンド開発の変遷第2回です。今回はjQueryについてまとめました。
第1回はこちら
jQueryの全盛期
何があった？？
2014年ごろの第2時ブラウザ戦争により、各ブラウザの挙動に対応した上で、開発をする必要があった。
そんな時に、各ブラウザの違いを吸収してくれるjQueryが登場し、フロントエンドエンジニアがjQueyを無条件に組み込むほど普及した。
Ajaxによる非同期でHTTP通信が実現されてから、Webアプリケーションの進化が続きます。従来よりも多機能なアプリケーションとしてRIA（リッチインターネットアプリケーション）と称され、クライアントサイドの実装としてAjaxや高度なDOM操作が求められました。
DOM（Document Object Model）はブラウザがHTMLを解釈した際に生成されるツリー構造のオブジェクトモデルです。ブラウザには、DOMの各ノードを操作するためのAPIが提供されており、JavaScriptを用いて操作し、動的なUIの変更が可能になる。
JavaScriptによる大規模開発のニーズは日に日に増していき、開発の現場ではフロントエンジニアとして、JavaScriptでアプリケーション開発する担当者を専任で設ける企業も増えてきました。
２014年ごろにMozilla、Microsoft、Apple、Googleなどの大手ブラウザベンダーによる最新のWeb標準実装及び動作速度の高速化の競争が活発になります。第2次ブラウザ戦争と呼ばれ、各ブラウザベンダーが独自の実装を続け、JavaScriptエンジンやレンダリングエンジンの挙動に多くの差異が生まれてしまいました。
各ベンダーが提供するブラウザの性能や機能が進化することは良いことですが、一般ユーザーが利用する端末側のブラウザの多様化に伴い、フロントエンドエンジニアの開発で対応しなければならない工数が多くなりました。Webアプリケーション開発時に、各ブラウザの挙動を理解して、テストと修正をする工数にかなりの時間を割くようになりました。
そこで当時ブラウザ間の挙動の違いをある程度吸収してコードを書くことができるJavaScriptのライブラリ、jQueryが流行します。
例えば、JavaScriptでAjaxやDOMのイベント操作などの長いコードを書く際に、クロスブラウザ互換を考慮し条件分岐を多用するおまじないのような長いコードを書く必要がありました。そのようなケースもjQueryを利用することで、簡潔に記述可能になりました。
jQueryの画期的だったポイント
- クロスブラウザ互換を実現
- DOM操作を簡単にできる
- アニメーションを簡単に実装できる
- jQuery UIなど周辺ライブラリが充実している
jQuery人気の低下
jQuery全盛期以降もますますフロントエンドに求められる要件は複雑化していきます。その流れの中で、次第にjQueryは影を潜めていきました。
なぜ大きく普及したjQueryが使われなくなったのか、以下のような背景がありました。
* グローバルスコープを汚染する
* DOM操作の実装が複雑化になりやすい
* ルーティングなど、複数ページのWebアプリケーションを実装する仕組みがない
* ブラウザ間の挙動の違いが以前よりも顕著ではなくなり、ブラウザ互換コードが不要になってきた（ブラウザの標準化）
jQueryを用いると大規模アプリケーション開発においてJavaScriptのグローバルスコープが汚染されるという点が問題視されました。これは、モダンなフロントエンド開発の軸となる、SPAやコンポーネント指向といった考え方と相性が良くないです。
SPAの登場に続く、、、
今回も以下の書籍を参考にしました。
書籍「TypeScriptとReact/Next.jsで作る実践Webアプリケーション開発」