Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

この記事の到着点

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

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

こんなやつです ↓

out.gif

(特に芸はないですね..:wink:

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

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

両者のコードの相違点

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

ボタンのクリック時

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

jQuery

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

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

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操作を自動的に行う仕組みによるものです。(これを、リアクティブシステムといいます!:ok_woman:

ボタン内のテキスト

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

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の値が変わったら、文字も変わる」という点です:thumbsup:

で、何が違うのか?:nerd:

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

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

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

  • 商品カテゴリを選択して商品一覧をフィルタしていく
    → selectボタンの選択組み合わせで、それぞれの商品の表示非表示を毎度処理する必要がある

  • jsonを取得してそのデータをリスト表示する
    → jsonを非同期処理で読み込み、読み込み後に各要素を作成し、appendしていく必要がある

  • ページデータの読み込みタイミングで特定の処理をする
    → そもそもjQueryの特性であるDOM操作は、DOMが構築された後でないと生かせない

等でしょうか:monkey:

一方、Vue.jsでは、自身の持つdataオブジェクトの状態によって、DOMを構築していきます。

  • 商品カテゴリを選択して商品一覧をフィルタしていく
    → selectボタンの選択組み合わせでdata内の消費一覧のリストを書き換えればDOMは自動的に更新される

  • jsonを取得してそのデータをリスト表示する
    → dataオブジェクト内にjsonを格納すれば、template構文でそのままDOMを作成、更新できる

  • ページデータの読み込みタイミングで特定の処理をする
    → 仮想DOMを構築する前、後、DOM更新後など、細かなタイミングで処理が可能

等でしょうか!:monkey:

まとめ

もっとコードの実例を使って深く説明したいです。まだまだサンプルコードをしこしこ書いてます。
続編を準備しておりますので、ご興味を持たれた方、ぜひお楽しみに!:santa:

最後になりますが、今回の記事を書くにあたり書籍「Vue.js入門 基礎から実践アプリケーション開発まで」をかなり参考にしました。この本、数年は読み続けられる内容のものです。

しかし、上記の本を読んでインスパイアされたからと言って「日本語を日本語に翻訳する」かの如くの愚かな行為をするわけには行かない。。:frowning2:
ので、自分なりにコードを書いて、他の記事を参照しつつ書きました。まさに、書く過程そのものが勉強になりました。

もし記載内容に誤りがあればご指摘ください。マサカリ以外のものでしたら、何でも受け付けます!:pick:
(手斧ならいいのかって?ほほほ・・ご冗談を・・・デュクシ!!)

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

(おまけ。次回書く予定の記事のサンプルコードです:relaxed:

hosono
フリーランスのフロントエンドエンジニアです。 鉄火丼が好きです(´ε` )
https://hosonokotaro.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away