初心者必携のVue本↓
jQueryは使えるけど、フロントエンドフレームワークは使えないという方は多いのではないでしょうか。
僕もその一人でした。jQueryでとくに不便することないな、と思っていました。そんな僕が、Vueを学んで感動した話をしようと思います。
VueはjQueryと同じようにcdnから落としてきてすぐに使うことができます。つまり、
|
1 |
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> |
をbodyタグの一番下に置いておけばOKです。
この手軽さもVueの魅力です。
jQueryとVueの違い
messageという変数の中身を表示させることを通して、jQueryとVueの違いをみていこうと思います。
jQueryの場合
HTML
|
1 2 3 |
<div id="app"> <span id="message"></span> </div> |
JavaScript
|
1 2 3 4 5 |
message = 'おはよう' $(function(){ $('#message').text(message) }) |
さらに、messageの値を変更して、DOMを更新したい時は次のようにします。
ブラウザのJavaScriptコンソールで次を実行すれば、DOMが更新されます。
|
1 2 |
message = 'おやすみ' $('#message').text(message) |
データの更新とDOMの更新の両方のコードを書く必要があります。
Vueの場合
HTML
|
1 2 3 4 |
<div id="app"> {{ message }} </div> |
JavaScript
|
1 2 3 4 5 6 |
var app = new Vue({ el: '#app', data: { message: 'おはよう' } }) |
これを実行すると、{{ message }}がおはように置き換わり、ブラウザには「おはよう」と表示されます。
見慣れない記法に面をくらいそうですが、落ち着いて見ると
|
1 2 |
el: #app |
で
|
1 2 |
<div id='#app'> |
を指定していることが分かります。さらに
|
1 2 3 |
data:{ message: 'おはよう' } |
のようにdataで登録した変数は{{ (変数名) }}として使うことができます。
JSコンソールからmessageの値を変更してみましょう。
|
1 |
app.message = 'おやすみ' |
なんと、これだけで書き換わるんです。
DOMの更新はVueが自動で行ってくれます。
Arrayの中身を表示する
今度は、Arrayの中身を全て表示してみましょう。
jQueryの場合
HTML
|
1 |
<div id='app'><ul id='fruits'></ul></div> |
JavaScript
|
1 2 3 4 5 |
fruits = ['りんご','みかん','バナナ','スイカ'] $(function(){ $('#fruits').html('') fruits.forEach((fruit)=> { $( <span class="string">`<li>${fruit}</li>`</span> ).appendTo($('#fruits'))) }}) ) |
自分でArrayに対する繰り返し処理を書いて、DOMを操作しなければいけません。
Vueの場合
HTML
|
1 2 3 4 5 |
<div id='app'> <ul v-for:"fruit in fruits"> <li>{{ fruit }}</li> </ul> </div> |
JavaScript
|
1 2 3 4 5 6 |
var app = new Vue({ el: '#app', data: { fruits: ['りんご', 'みかん', 'バナナ', 'スイカ'] } }) |
Vueではこのように、ulタグにに特殊な属性(v-for)を指定します。この後の{{ fruit in fruits}}は、fruitsの要素をfruitに取り出して、Arrayに対して繰り返し処理を行うことを意味しています。
このv-forの処理もVueがやってくれます。
終わりに
今回のサンプルコードのように、データの状態が見た目と同期する仕組みのことを「データバインディング」と呼びます。
僕が今まで手動でやってきたDOM操作が自動化されていることに感動しました。
jQueryからVueへのステップアップをするにはこの本がおすすめです。自分もこの本で勉強しました。一冊持っておいて損はないでしょう。
