Vue.js初心者による初心者のための完全入門講座「第三回」

こんにちは、金子拓矢(@taku_twitt0622)です。

第三回の今回は、Vue.jsのリアクティブ機能について、実際にコードを書きつつ解説していきます。

リアクティブシステムって何？

そもそもリアクティブとは？って感じだと思うのですが、僕なりの解釈で簡単に言うと、

「何かの変更が一瞬で反映される」ことです。

厳密に言うと違って〜これはこうこうで〜みたいな難しい説明は置いといて、感覚的に言うとこんな感じです。笑

さて、実際にVueを使ってリアクティブを体感してみましょう。

まずは以下のコードを書いていきます。

<!-- index.html -->
   <div id="app">
       <p>{{ number }}</p>
   </div>

// index.js
new Vue({
   el: '#app',
   data: {
       number: 0
   }
});

ここまでは前回の復習といった感じですが、前回と違うのはdataプロパティに入っているデータが数字ということです。

数字の場合は、「シングルコーテーションを付けない」ことに注意してください。

ブラウザで開くと、「0」という数字が表示されていると思います。

続いて、新しい文法が出てきます。まずはコードを書きましょう。

先ほどのpタグの下に、

<button v-on:click="plusOne">+1</button>

を記述します。

１つずつ解説していきますね。

まずは「+1」というボタンを用意します。

v-onというのは、Vueの用意してる「ディレクティブ」という、なんか色々できる機能のことです。

v-on以外にも、v-bindやv-ifなど、いくつかありますが、まずはv-onだけ覚えましょう！

v-on:clickとすることで、クリックした際に「ある機能」が動作する、という記述になります。

その「ある機能」というのが今回の場合「plusOne」なのですが、この名前は自由なので、好きに設定できます。

ちなみにまだ「plusOne」にはなんの機能もついていないのですが、これからVueで機能を持たせていきましょう。

その際に使うのが、Vueが元々用意しているプロパティである「methods」です！

メソッドを格納しておく「methods」

メソッドを格納しておくmethodsてなんかややこしいですね。笑

いやでもしょうがないので、とりあえず！とりあえず読み進めてみてください！

// index.js
new Vue({
   el: '#app',
   data: {
       number: 0
   },
   methods: {
       plusOne: function() {
           this.number += 1
       }
   }
});

まずはこの様に書いてみてください。

そして、ブラウザを開いて、「+1」ボタンをクリックしてみましょう。

正しく書けていれば、ボタンをクリックするたびにv-onディレクティブが呼ばれて0→1→2...の様に数字が増えていくはずです！

これ何が起きているかというと、

methodsプロパティの中で、plusOneメソッドを定義しています。

methodsプロパティでは様々なメソッドを定義して保管しておくことができます。

では、plusOneメソッドではどんな処理をしているのでしょうか？

まず、this.numberですが、Vueインスタンスの中ではdetaで定義したオブジェクトにアクセスする為に、「this」をつける必要があります。

そして、this.number += 1とすることで、numberという数字（初期値は0）に、「1」という数字を足して、numberを更新しています。

画面上でクリックするたびに、このplusOneメソッドが呼ばれるので、複数回クリックするとどんどん数字が大きくなっていくんですね。

ちょっと言うのが遅くなりましたが、この時まさにVueのリアクティブシステムが機能しています！笑

ボタンを押して、ブラウザがリロードすることなく画面の表示が変わっていますよね、

これが記事の最初で書いた、「何かの変更が一瞬で反映される」ってことです。

ご理解いただけたでしょうか？

質問などあればTwitterで受け付けていますので、お気軽にどうぞ！

さてVue.jsのリアクティブシステムが分かったところで、次は「双方向データバインディング」について解説します。

なんか難しそうな名前ついてますが、要はhtmlからdataプロパティの情報を自由に書き換えれますよ！って機能です。

詳しくは次回解説していきます。

最後まで読んでいただきありがとうございました。