フロントエンド開発をjQueryからVue.jsへ乗り換えたので比較してみる

この記事は、Vue #2 Advent Calendar 2019 の3日目の記事です。

Advent Calendar初参加です！

経緯

自社で開発しているサービスの機能が増えてきて、ユーザーの利便性が問われることが多くなりました。
UI改善と言っても、そのサービスのフロントエンドはjQueryで出来ており、一新しようとしてもできる範囲に限界があります。そこで、部分的にVue.jsを導入していき、段階をとってUI改善をしていく方向性となりました。

Vue.jsは他のjavascriptのフレームワークと比べても学習コストが低く、初心者、経験者問わず、すぐに開発に使用することができるという特徴があります。
私も本来はサーバーサイドエンジニアですので、まずは学習から始まったのですが比較的すぐに技術を習得することが出来ました。頑張れば一日で基本の項目(Componentあたり？)まで習得できるかなと思います。

では、jQueryとVue.jsがどう違うか比較してみましょう。

jQueryとVue.jsの違い

jQuery

DOMを直接操作します。セレクタを指定してDOM操作をするので、イベントが起こるたびにページ全体から要素を探します。そのため、要素が増えてくると状態の管理が大変になってしまいます。
コードが直感的なので、知識が全くなくても簡単なアニメーションならばすぐに実装することが出来ます。

Vue.js

仮想DOMで構成されており、データが変わればその部分を認識し、変更された部分のみを変更します。他の変更されていない部分は使い回しされるので、jQueryに比べて表示速度が早いです。
簡単にいえばjavascriptとHTMLの要素を紐付けて、データが変われば勝手に表示に反映してくれます。

比べるとjQueryは要素が変わったらDOMを丸ごと書き換えなければいけないのに対して、Vue.jsはデータの中身だけ変更することができます。

では、実際にコードを書いて比較してみましょう。

実際にコードを書いて比較してみた

Toggle

See the Pen Toggle by nagisa-ito (@nagisa-ito) on CodePen.

この程度の操作ですとコード量に違いはありません。むしろjQueryの方がパッと見で何をしているのかわかる気がします。

inputの値を表示

See the Pen show real-time input by nagisa-ito (@nagisa-ito) on CodePen.

まだそんなに差はありませんが、jsファイルの方はVue.jsのほうがシンプルになってきています。

配列の操作

See the Pen abzoQNL by nagisa-ito (@nagisa-ito) on CodePen.

このあたりから明確な差がでてきます。
jQueryは

• ボタンをクリックした時の関数
• 削除ボタンをクリックしたときの関数
• リストの長さを計算する関数
• リストを追加するときの関数

の４つの関数が記述されているのに対して、
Vue.jsは

• リストの長さを計算する関数
• リストを追加する関数

の二つしか定義されていません。非常にシンプルです。
さらにjQueryは

$('#list').append('<li>' + name + ' <button class="remove">x</button></li>')

このDOMを直接記述している部分がもやもやポイントですね。

リアルタイム検索

See the Pen real-time search by nagisa-ito (@nagisa-ito) on CodePen.

こちらもjQueryとVue.jsで大きな違いがあります。
jQueryはリストの中身を初期化してDOMを書き換えているのに対して、Vue.jsはリストの操作しかしておりません。

jQueryは、

1. inputの中身が変更されたのを感知する
2. inputの中身(検索ワード)を取得する
3. リストの中から検索ワードを含むものを配列に格納
4. 検索結果の配列を表示するDOMを作成
5. リストの表示場所を探す
6. リストの表示場所に検索結果のDOMを書き換える
7. 検索結果の件数を表示する場所を探す
8. 検索結果の件数を書き換える

それに対してVue.jsは

1. inputの中身が変更されたのを感知する
2. リストの中から検索ワードを含むものを配列に書き換える(computedの部分)
3. computedのプロパティが書き換えられたので検索結果とヒット件数の値が自動的に更新される

とかなり動作が省略されます。

まとめ

ここまでjQueyとVue.jsの違いをみてみました。ここまでは基本中の基本ですが、実際に比較してみて

• jQueryは簡単なDOM操作やアニメーションを実装する時に優位
• Vue.jsはインタラクティブなページや状態管理が活躍する時に優位

かなと思います。ですので大規模なアプリケーションになればなるほどにはVue.jsが向いていると思われます。
アプリ開発をする際にどのフレームワークを選択するか要件や規模などによって使い分けるのがいいと思います。

しかし、Vue.jsは日本語マニュアルも豊富ですし、学習コストも低いのでとりあえずやってみるのをおすすめします！

今回Vue.jsに触れてみたのはUI改善したいのにフロントエンジニアがいないことがきっかけでしたので、そういう環境に置かれている人は是非勉強して導入してみて欲しいです！