Deep dive たつのおとしご

Imagination means nothing without doing.

トップ > AngularJSとReactを触ってみて、結局JQueryは必要ないのか？

AngularJSとReactを触ってみて、結局JQueryは必要ないのか？

はじめに

JQueryが他のJavaScriptフレームワークと相性が良くないと言われていたり、JQueryなんて要らないよと言われていたりする。JQueryの要不要ネタを持ってくるとものすごい勢いのコメントが付いていたりして、自分が記事を書くのにとても勇気がいるのですが、まだまだペーペーエンジニアなので、暖かく見守ってくださればと思います。触ってみた感覚なので認識齟齬があったり、専門知識があるわけでもなく浅はかな知識ですが、まとめてみたいと思います。

ちなみにAngular2は触ったことはありませんがAngularJSとAngular2があることを明示したかったために記述しています。

 

 

まず、JQueryとは・・

・JavaScriptライブラリ！

・Ajax、DOM操作、CSS操作などができる。

・プラグインが豊富でサンプルや情報も多い。

・JavaScriptライブラリといえばJQueryと言われるくらい有名。

・なんでもできるが、ライブラリ内のすべての機能を使わない場合、js読み込むのが遅い(重い)という事象が発生する。（カスタマイズしてjsファイルサイズを小さくする対応はできる）

 

よく比較対象として話題になるAngularJS、Angular2、React

AngularJS

・JavaScriptフレームワーク！バージョン1.xをAngularJSと呼ぶ。

・一つのフレームワーク内で全ての機能が完結するフルスタックフレームワークであり、Ajaxなどの機能も含まれている。

・HTMLのタグに"ng-xxxx"と書くカスタムタグを用いてデータの受け渡しを容易にする(双方向バインディングもここに含まれる)

・シングルページアプリケーション(SPA)という画面遷移を行わない単一のページで構成されるWebアプリを作成するのに向いている。初期ロードでほぼすべてのモジュールを読み込む。SPAによりユーザーが何らかの操作を行った時に画面をロードする処理時間が省略できるのでサクサク操作を行える。(非同期処理)

・SPAはデメリットとして、初期ロードに時間が必要だったり、検索エンジンに引っかからないためサーバーサイドレンダリング(SSR)などを考えておかなければいけない。(SEO対策)

Angular2

・JavaScriptフレームワーク！バージョン2.xをAngular2と呼ぶ。

・AngularJSとは考え方が違うため、移行するとなると書き直しレベル。

・AngularJSと同じくフルスタックフレームワークであり、サーバーサイドレンダリング(SSR)ができる。またコンポーネント思考が前提となっている。

・コンポーネント思考という、部品単位での実装を分離する開発を意識している。これによりコンポーネントの再利用が容易になる。

React

・JavaScriptライブラリだが、周辺ライブラリとまとめて使うことが多いためJavaScriptフレームワークのような扱いをされる。

・サーバーサイドレンダリング(SSR)ができる。またコンポーネント思考である。

・JSXと呼ばれるXMLライクな書き方で書かれることが多い。JavaScriptの中でHTMLを書いているようなイメージ(Element)

・仮想DOM(Virtual DOM)という、一度JavaScriptでHTMLのベースを作っておいて、実際のHTMLに変更があったら、仮想DOMの中で変更点だけを再描画する機能がある。一部分だけの変更を描画することになるので処理が早い。

・jsファイル内にHTMLを書くことが多くなるため、styleを指定するとき(デザイナーさんが手を加えようとしたとき)、変更が加えづらい。

 

なぜJQueryが嫌悪されるのか？

本題に入るまでに時間がかかりましたが、

要不要かについてはJavaScriptフレームワークと相性があまり良くないために問われることが挙げられると思います。

上記したフレームワークはDOM操作が苦手です。

JQueryでDOMを生成した場合に、そのイベントをフレームワーク側に教えなければいけない。生成した後のWatchをフレームワーク側で行わなければならないのだが、コンポーネント思考であるため、同じ画面に同じコンポーネントを使うとなると固有のid名やclass名が付けづらい。

それにJQueryのよく使う機能はフレームワークで代替方法が用意されていたり、

You Dont Need jQueryのようなJQueryを使わなくてもいい書き方があったりと、JQueryがなくても大丈夫と言われていたりする。

いろいろ書かれてるのでググってください。「react jquery」とかでググると出て来ます。

 

愛されているJQuery

何かと叩かれることの多いJQueryですが、個人的には開発規模によって取捨選択すればいいのではと思います。

 フロントエンドとバックエンドのチームが分かれているような大規模開発の場合は、フレームワークを使った方が書き方を統一できていいですし、あまりフロント側で処理をガリガリ書かないのであれば、デザイナーさんが見てもわかりやすいJQueryを使った方がコストが低くていいと思います。

もちろん共存できないわけではないので、JQueryとフレームワークの両方を使うのもアリだと思います。

JavaScriptフレームワークは毎年流行のフレームワークが変わるので次から次へと学んでいかなければなりません。その点、JQueryというのは10年以上使い続けられていて、未だにリリースが続いています。他のJavaScriptライブラリもJQuery用に書き方が用意されていたり、実現可能か調査するにもサンプルが多いので参考にできるものが多いのも魅力の一つです。「JQueryだったらできるのに！」とグチることも少なくありません。

 

またHTML5やCSS3などもどんどんできることが増えてきているため、JavaScriptでなんでもやろう！という考えも弱まっていくんじゃないかなと思っています。

結局JQueryは必要ないのか

結局JQueryは必要ないのかという問いについてはケースバイケースで使っていくのが正しいのではないかと思います。

JavaScriptフレームワークの強みと弱み、JQueryの強みと弱みを理解し、何がしたいか、どう開発していくかを整理して開発するのがベターだと思います。

レガシーブラウザ対応が不要になりつつある今、JQueryを使わなくても機能実装できることが増えてきています。

大事なのは JavaScript = JQuery や Ajax = JQuery といった安易な認識をせず、必要な機能実装を満たすにはどれを使えばできるのかをしっかりと考えることが必要だと思います。

さいごに

 はじめにも書きましたが、触ってみた感想なので認識齟齬があるかと思います。

 もっと勉強してより良いやり方を探していきたいと思います。