#5 現場でVueJS好きのエンジニアが脱jQueryの議論する事が多いので作成
今回はVueJSとjQueryを比較した話です。
比べる対象ではないかもしれないですが、
jQuery派とVueJS派でソースコードの書き方が変わってきて
よく現場で話されているないようなので比べていきたいと思います。
jQueryのデメリットは2点
DOM操作が出来てしまうので機能が多くコードが多くなればなるほど
どこでDOM操作しているのかGREPしまくらないといけないとかになる
コールバックで書かないといけない部分が多々出てくる
次にjQueryと比べてのVueJSのデメリットは
javascriptレンダリングなので遅い
機能が少ない周辺ツールがない
並べ替えとかドラッグ＆ドロップとかのUI操作がしづらい
jQueryの場合はjQuery UIのdraggable, sortableとかがあって
歴史も古いので、ドキュメントも豊富で簡単に実装できたのですが、
jQueryなしで、はじめ実装しようとしたのですが、数時間たっても
なかなか進まなかったので、jQueryを使用することにしました。
POSTをjQueryで書くと簡潔にかけるのですが、jQueryなしで書こうとすると
FetchのAPIを使用して書くとコード量が増えます。
さらには、IEがFetchに対応していないので、それようのプラグインを使用しないと
いけないです。じゃあ初めからjQueryを使ったほうがシンプルでは！？
って所に戻ってきます。
以上のようなメリットデメリットを説明したので、実際にソースコードを書いて
検証していきましょう。
クリック2回するUIをjQueryとVueJSで書いてみました。
どちらがシンプルに見えるかは主観的ですが、思ってたより違いはなかった
かもです。
ただjQueryの方はcssの操作で表示・非表示しているので、コード量が多くなったら
どこでこの表示・非表示の操作をしているのかを探すのが大変になってきます。
次にAJAXがあるソースコードを書いて比べて見ます。
jQueryの場合はtableの部分が全て書き出しているので、これもコードが増えると
どこからこのtableタグが生成されているのかを探す手間がかかりそうです。
さらに、コールバックでないとクリック関数が効かないっていう事が起きています。
これはAJAXのレスポンスを受け取ってタグを生成しているため、タグがある前提で
jQueryのクリック関数があるので、クリック関数を正しく書いても動かないってバグに
陥ってしまいます。
レスポンスを受け取った後にクリック関数を記載すれば問題ないのですが、よく詰まって
しまうポイントかと思います。
これも機能が複雑になってくると、時系列的にどこにこういったクリック関数のようなコードを
記載しないといけないかを設計しないといけないので、工数がかかり、保守も難しくなります。
この点がjQueryの最大のデメリットだと個人的には思っています。
対象的にVuejsを見てみるとJSで意図的に生成してないので、わかりやすいかと思います。
HTMLの部分にfor文であったり、if文があるので、WEBデザイナーがこのHTMLの部分を書くことは
不可能ですが、エンジニア的にはシンプルでわかりやすいと思います。
ただ、AJAXの部分はFetchを使うとコード量が増えているのがわかります。
かつ、IEに対応していないので、それようのプラグインをいれるなり、XML requestを使うなりの
方法を考えないといけなくなります。
次にVueJSの方が遅いっというのを検証してみます。
PageSpeed Insightsで生のHTMLとVuejsでレンダリングしたHTMLで検証しました。
予想よりそこまで遅くはならなかったですが、speed indexの部分が3.5秒と2.8秒なので、0.7秒差
になっています。
SEOからしてもUXからしても0.7秒は大きいと捉えてもいいかと思います。
月間PVが1000万を超えるような大規模ならなおさらかと思います。
なので、結論はjQueryでtext()やhtml(),addClass(),css()とかは使わないようにする
かと言って脱jQueryに盲信的になり、余計な工数、手間がかかる方向に行かないように調整する
速度が求められるページはjQueryとVueJSのバランスを考えて使い分ける
jQueryの将来性はないですが、まだまだ、使いやすいツールではあるので、
次の使いやすいツールが確立されるまで使うのはありかと思います。
以上です。
