More than 5 years have passed since last update.

Vue.jsとjQueryで同じ機能を作成し、コードを比較する

Posted at 2018-10-16

はじめに

この記事は、Vue.js、jQueryのどちらが優れているかという宗教戦争をけしかける為に書いているわけではありません。
ただし、私個人はVue.jsをのように、非常に愛しているので、どうしてもVue.js贔屓になってしまいます。（jQueryが"not "というわけではないです！）
このあたりを念頭にご覧いただければ幸甚です。

この記事の到着点

jQueryとVue.jsで、DOMの取り扱い方が異なることを説明します。出発点の違う両者を比較して、それぞれの特性をあぶり出すという試みです

例：ボタンを押すと、説明文がでるやつ

こんなやつです ↓

（特に芸はないですね..）

それぞれ、jQueryとVue.jsでかいたものになります！CodePenを記載します！

See the Pen Vue.jsとjQueryの比較01 by hosono kotaro (@hosono1985) on CodePen.

両者のコードの相違点

この段階では、jQueryはDOMを操作してクラスの追加削除を行って表示非表示を切り替えます。ここです！（以下、コードはごっそり...で省略してます）

ボタンのクリック時

ボタンをクリックすると、クラスの追加削除の操作を行います。

jQuery

...
$('#jquery .detail').toggle().toggleClass('hide');
...

簡単ですね！単純にtoggleだけです
（トグると読みます。ググるのようなものです。くだらない冗談を言っていると、警察きますよ）

Vue.js

data() {
  return {
    hide: true
  }
},
...
template: `
  <div>
    <button v-on:click="hide = !hide">{{ toggleText }}</button>
  ...

一方、Vue.jsではまずtemplateにhtmlとテンプレート構文を書きます。これによって仮想DOMを作成して、諸々の処理を行った後、描画します。
ボタンを押すと、data内のbool型の変数、hideを反転させ、hideがfalseのときはhtmlのクラス、.hideが削除され、テキストが表示されます。
これは、Vue.jsがdataの状態に応じてDOM操作を自動的に行う仕組みによるものです。（これを、リアクティブシステムといいます！）

ボタン内のテキスト

ボタン内のテキストを書き換える操作は以下のとおりです

jQuery

...
if($('#jquery .detail').hasClass('hide')) {
  $(this).text('説明をみる');
} else {
  $(this).text('説明を閉じる');
}
...

これも単純です。.hideクラスの有無でクリックしたボタン内の文字を書き換えてるだけです！

Vue.js

data() {
  return {
    hide: true
  }
},
computed: {
  toggleText() {
    if(this.hide) {
      return '説明をみる'
    } else {
      return '説明を閉じる'
    }
  ...
  template: `
    <div>
      <button v-on:click="hide = !hide">{{ toggleText }}</button>
    ...

computedは、Vue.jsが読み込まれ、実行可能になった段階で実行可能なメソッドを記載する箇所です。
「dataの値をもとに、何かをしたい場合」に使用するものです。
今回の場合は、{{ toggleText }}というテンプレート構文に文字を表示する、という使い方をしてます。
ここで大切なのは「dataの値が変わったら、文字も変わる」という点です

で、何が違うのか？

以下に比較表を記載します！

	jQuery	Vue.js
DOMの表示方法	DOMを書き換える	テンプレートを元に描画する
DOMの操作方法	DOMを取得して操作する	dataオブジェクトを操作する
DOMの更新方法	手動でDOMを書き換えていく必要がある	dataオブジェクトを操作すると自動的にDOMは更新される

もともと、jQueryはDOMを容易に操作することを目指したライブラリです。
document.getElementByID('id')を$('#id')で済ませられるのはjQueryの偉業です。
しかし、例えば以下のようなことを行うとjQueryの当初もっている機能だけでは、かなり頑張る必要があります。