なぜjQueryの人気は落ちてきているのか(jQuery VS React)
はじめに
フロントエンドの世界でjQueryが王道だった時期を超えて、現時点でなぜ「jQueryは終わった」という意見が生み出されたのかReactとjQueryを比較して振り返ってみました！
jQueryとは
jQueryは、直感的にHTMLの要素を制御できるJavaScriptのライブラリです。
jQueryが登場する前にはDOM操作のためにJavaScriptでコードを記述すると長くなり可読性が低かったです。そして各ブラウザのJSの実装方法が異なり(特にIE )、ブラウザに合わせて実装が必要でした。
この問題点を解決するために登場したものがjQueryです。
jQueryは数行のJavaScriptコードをメソッドでラッピングすることで1行のコードで実装ができてフロントエンドの世界で主役になりました。
JavaScriptの場合(DOM要素選択)：
var paragraphs = document.getElementsByTagName("p");
fo
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].
paragraphs[i].
paragraphs
style.display = "none";
}
jQueryの場合(DOM要素選択)：
$("p").hide();
jQueryを使うと、上記のように簡単に実装ができます。
jQueryの特徴
- HTML、DOM操作がしやすい
- 簡潔にeventのメソッド、cssのSelector使用可能
- クロスブラウザ対応
- Ajaxのリクエストが容易
Reactとは
ReactはJavaScriptのライブラリであり、シングルページアプリケーション(SPA)のUI構築することが特徴のライブラリです。ReactはJavaScriptにHTMLを含むJSX(JavaScript XML)という簡単な文法で仮想DOM(Virtual DOM)を使用してパフォーマンスの向上ができます。
Reactの特徴
- 直接にDOMを操作せず、仮想DOM(Virtual DOM)にてまとめてバッチ処理を行うのでパフォーマンスが向上する
- UIを再利用可能なコンポーネントに分割し、再利用性、メンテナンスが容易
- 単方向データバインディングでデバッグやテストがしやすい
- JSXでJavaScriptとHTMLを同時に使用可能し、コードの作成が楽
比較表
| jQuery | React | |
|---|---|---|
| DOM操作 | 直接に操作 | 仮想DOM使用 |
| 学習難易度 | 下 | 中〜上 |
| パフォーマンス(大規模のサイトの場合) | 低い | 高い |
| テンプレート | HTMLとJavaScriptを分けて使用 | jsx |
| データバインディング | 双方向 | 単方向 |
| コンポーネント使用 | X | O |
今までの説明ではjQueryとReactどちらでも使っても良さそうに見えるかもしれませんが、
今から詳しくjQueryの人気が落ちたのかを調べてみましょう。
jQueryの人気は落ちていきている理由
jQueryの機能はVanilla JSでも使用できる
ES6(ECMAScript 2015)のアップデート後、アロー関数、クラス、テンプレートリテラルなどJSでさまざまな機能が投入され、jQueryを使わずに簡単に実装ができるようになりました。
パフォーマンスが低い
jQueryは簡単に実装できるように設計されたライブラリであり、パフォーマンスを考慮していません。現代のフロントエンド技術は機能がますます重くなっているため、他のライブラリを使用する方がパフォーマンス的に優れています。VueやReact など、jQuery以降に登場したライブラリは仮想DOMを使用し、状態管理が組み込まれているため、複雑な実装に強いです。
WEBブラウザ環境の変化
jQueryが登場した2007年ごろは主にIE(Internet Explorer )が使用されており、IEは他のブラウザよりもアップデートが遅かったため、他のブラウザとの互換性を確保するために作られました。しかし、クロスブラウザ対応が可能なChromeの登場でIEのシェアも低下し、強力なレンダリングエンジン機能を備え、迅速なWeb標準の構築が可能になりました。その結果、jQuery を使わずに実装することが可能になりました。
最後に
jQueryの人気が低下するのは、急速に変化するフロントエンド開発環境では当然のことです。特に新しいライブラリやフレームワークの登場により、フロントエンドエンジニアはより高性能でメンテナンスしやすいコードを作成することができました。フロントエンドに初めて入門する方は、学習のために簡単に jQueryを使用してみるのも良いと思いますが、個人的には新規プロジェクトやフロントエンドの経験がある方はReactやVueなどを学習する方が良いと思います。
Discussion