jQueryは必要ない？

お世話になっています。
今回はjsについての質問です。

ブラウザ側でアニメーションやDOM操作を行いたいと思い調べると、
**「jQueryを使えばいい」**みたいな記事をたくさん見つけました。
jQuery、確かに便利そうで、しかも覚えやすい感じがしました。
（メソッドチェーンが個人的には直感的で分かりやすかったです。）
情報も（古いものが多いですが）かなりあって「これいいじゃん！」と使い始めました。

しかし、調べていくうちに**「jQueryは前時代的」だの「遅い」**だの
ひょっとしてこれを使ってはまずいのか？と思うような記事もありました。

そしてその記事には比較として**「仮想DOM」**なるものが出ていることが大半です。

仮想DOMを使うと相当に早くなる？（伝聞なので分かりませんが）らしいのですが、
これだけボロクソに書かれていてjQueryをメリットは今現在でも存在するのでしょうか？
リアルなDOM操作と仮想DOM操作の違いも、それらで出来ること/出来ないことも
いまいちピンときていないので、教えていただけたらと思います。

出来れば、どちらかに肩入れせずに中立な意見を聞きたいです。
（仮想DOM派の記事、好きを上げて他を貶すに見えてしまって
真っ当な意見なのか判断できないものが多かったため。）

行動規範の内容に同意します

回答5件

ベストアンサー

jQuery と React（仮想DOM）や Angularなどは、もはや用途が違います。

SPAはご存知でしょうか？
Single Page Application というものなのですが、画面遷移をしないアプリケーションのことです。

画面の項目に入力をする
ボタンを押してサブミットをする
サーバー側で入力情報の処理をし、次の画面の情報を返す

というのが従来の一般的なWebアプリケーションですが、
通信は全てAjaxでして、画面の作成はJavascriptでやっちゃおうというのがSPAです。
ボタンを押した時の画面の一瞬のちらつきがなく、
ユーザーにスムーズに画面遷移をしているように錯覚させるものですね。

SPAは、画面の情報はがらっと変わるため、あたかも画面遷移しているように見えますが、
同じ画面内で新しい表示情報を１からJavascriptで作成しているんです。
どれだけすさまじいことかイメージつきますかね？

javascript
1var table = document.createElement("table")
2var tr = document.createElement("tr")
3var td = document.createElement("td")
4
5table.appendChild(tr);
6tr.appendChild(td);
7
8document.getElementById("table-area").appendChild(table);

これでやっと中身が空っぽの１行のテーブルです。
途方もない作業です。

こんなことやってられないので、それ用のフレームワークがあります。
それがReact（仮想DOM）だったり、Angularだったりします。

jQueryでもやれないことはないですよ。
ただ上記の例と、あまり大差ないコードになってしまいます。
めちゃくちゃコードを書かないといけません。
コードは書けば書くほどバグります。遅くなります。
そして、何がなんだか分からなくってきて、作った本人にしか直せないような状態の
コードが出来上がるわけです。
作った本人すらも直せないかもしれません。

だからこういう用途では、もうjQueryを使うのはやめようという話なだけです。
ちょっとしたアニメーションやDOM操作なのであれば、全然jQueryでいいと思います。
むしろjQueryの方がいいぐらいに思っています。

確かに、最近はjQueryの地位が低くなってきているような印象は受けますが、
僕は当分なくなることはないと思います。
なぜなら、前述した通りそもそも用途が違うからです。
バージョンアップもされていってますし、jQueryの開発がストップしているわけでもありません。

なので、用途によって jQuery は使えばいいと思いますよ。

jQueryにも画面をごっそり作り直せるテンプレートエンジンのような
プラグインも多数ありますが、それをするなら Reactなどを使った方がいいとは思いますね。
それらのプラグインは、Reactなどが出てきてなかった時に作られたものだと思うので、
せっかくSPAを作りやすいフレームワークが出てきたのに、
わざわざjQueryプラグインでやる理由は少ないような気はします。

投稿2016/07/14 04:59

編集2016/07/14 10:51

root_jp

総合スコア4666

退会済みユーザー

2016/07/14 08:15

ご回答ありがとうございます。 SPAで設計しなければReact.js等を使う必要はないということですか？

root_jp

2016/07/14 10:49

そうですねぇ。サブミットをして画面を遷移はさせるけど、各ページのJavascriptでの動きに React.js等を使うのはあんまり聞かないですねぇ。オーバースペックすぎるんじゃないでしょうか。

退会済みユーザー

2016/07/15 00:09

ありがとうございます、とりあえずはjQueryを使っていきながら、 React.js等も触って今後の新規案件で活かしていきたいと思います！

行動規範の内容に同意します

まず、大前提ですが、何を使うにしてもブラウザへ最終的に描画を行うのは、DOM APIです。これを、

直接叩いて使う
jQueryのような薄いラッパーから使う
Reactのような、仮想DOMラッパーから使う

というような違いです。そして、仮想DOMが「速い」というのは、あくまでSPAと呼ばれるような「全HTMLを置き換えてしまうのと比較して」の話です。ページのごく一部だけ装飾的に書き換えるなど、DOMを直接叩けば済むような話であれば、Reactを使うまでもありません。

あと、jQueryの地位が低下している原因として、DOM API自体の進化、ということがあります。昔はIEを筆頭に癖が強く、DOM操作がまともに行えなかったので、バグ吸収用にjQueryなどのライブラリが必要だった、という側面もあったのですが、ブラウザ同士の互換性が向上してきたことで、そうした必要性が薄れています。

投稿2016/07/14 02:25

maisumakun

総合スコア145183

退会済みユーザー

2016/07/14 02:38

ご回答ありがとうございます。 SPAと言うのはたとえばサーバサイドはAPIのみでクライアントサイドからAPI叩いて画面を切り替えるみたいな感じですか？（どこかの記事でサーバとビューを切り離して上記のような構成にするべきみたいなことも書いてありました。）

行動規範の内容に同意します

React を使うと全部 React で書き換えなきゃならなくて jQuery など他のライブラリが使えなくなることがあります。
他のライブラリが使えないっていうのは結構致命的だと思うんですが。
たとえば jQuery の膨大な過去の資産が使えなくなるとか
Google Map などの API が使えなくなるとか

投稿2016/07/14 02:33

Zuishin

総合スコア28660

退会済みユーザー

2016/07/14 02:40

ご回答ありがとうございます。外部APIを使えないと少し困りますね。 Facebookのようなページだからこそ使えるのかもしれませんね。

行動規範の内容に同意します

仮想DOM、について全く触れたことがなかったので、調べてみました。仮想DOMというよりReact.jsについてでしょうか。

見てみた感想としては、React.jsは**「HTMLタグ構造をサーバサイドで構成せず、クライアントサイドで組みたい人向け」**でしょうか。私はHTMLを組むことはサーバサイドの仕事だと思っていますので、私がReact.jsを使う機会はあまりなさそうです。データだけをHTTPでやり取りし、クライアントサイドで組むようなサイトであればReact.jsのメリットは高いと思います。むしろFacebookはそのためにReact.jsを作ったのではないでしょうか。

React.jsのメリットの説明はこちらの記事に任せようと思います。
http://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19

投稿2016/07/14 02:32