Vue.jsとjQueryの違い

Vue.jsとjQueryの違いについて見ていきます。

手続的か宣言的か

jQueryは手続的であるのに対して、Vue.jsは宣言的です。

シンプルな例

例えば、入力した文字がすぐ下に追加されるというシンプルな例を見ていきましょう。

以下のデモでは、aと入力して追加ボタンを押すと、すぐ下にaと表示されるのが確認できます。

See the Pen jQuery by Shibata Hiroki (@khiro-enginner) on CodePen.

jQueryの場合

jQueryの場合を見ていきましょう。

HTML

HTMLでは、以下の3点を書いています。

• 入力欄
• 追加ボタン
• テキストが追加される場所

See the Pen jQueryでテキスト追加を行う場合 by Shibata Hiroki (@khiro-enginner) on CodePen.

JS

JSでは、以下の処理を手続的に行なっています。

1. 追加ボタンをクリックしたときに入力欄のテキストを取得する
2. テキストが追加される場所に、取得したテキストが入ったHTMLを追加する
3. 入力欄を空にする

See the Pen jQueryでテキスト追加を行う場合 by Shibata Hiroki (@khiro-enginner) on CodePen.

Vue.jsの場合

Vue.jsの場合を見ていきましょう。

HTML

HTMLでは、以下の記述をしています。

• 全体を囲む text-wrap
• newTextで、データバインディングをした入力欄
• addTextが発生するクリックイベントを持つ追加ボタン
• text_array から text.name を v-for で繰り返し表示させるli要素と、それを囲っているul要素

See the Pen jQuery by Shibata Hiroki (@khiro-enginner) on CodePen.

JS

JSでは、以下を宣言しています。

• text-wrapをエレメントとして
• newText と text_array をデータとして
• addTextをメソッドとして

See the Pen jQuery by Shibata Hiroki (@khiro-enginner) on CodePen.

Vue.jsのメリット

今回記事を書いてみて、以下のメリットが考えられると思いました。

• HTML構造とデータが分かれているため、 HTML構造に変更をかけやすい
• HTMLを見ただけで、何がどうなるのか予想できる