【vue.js入門 #5】vue.jsのウォッチャを初心者向けに解説してみた

今回のvue.js入門記事は、初心者向けのウォッチャについてとなります。

ウォッチャとは、外部ライブラリと連携させたり、コストが高めの処理をする時に利用されます。

たとえば、googleやyahooの検索では、予測検索ワードの機能がありますよね？

オートコンプリートというのですが、この機能をvue.jsで作成する場合はウォッチャが利用されるでしょう。

inputタグに検索ワードを入力した段階でサーバーからデータを取得するのですが、毎回ページをレンダリングさせていたら、無駄な処理が多いですよね。

そこで、オートコンプリートを実行させるのに必要な情報だけをサーバーに渡し、必要な情報だけを返して、必要な箇所だけの表示を変更させる。

このように、外部との連携が必要で少々重い処理を作る時は、ウォッチャが有効なのです。

簡単なコードでウォッチャの動きを確認してみる

簡単にinputタグに入力された値をテキストで表示させるサンプルコードを書いてみます。

inputタグの値をウォッチャで監視をして、値が変更されたらテキストにも自動で反映させることができます。

html

   <div id="app">
       <label><input type="text" v-model="name"></label>
       <p>{{upperName}}</p>
   </div>

js

var app = new Vue({
   el: '#app',
   data: {
       name: '',
       upperName: ''
   },
   watch: {
       name: function (newValue, oldValue) {
           this.upperName = newValue
       }
   },
})

第一引数が変更後のデータで、第二引数が変更前のデータとなります。

inputタグで使用しているv-modelはinputタグやtextareaで使用するディレクティブで双方向からのバインディングができるようになります。

ここではinputタグで入力したvalue値をvue.jsの側に渡しています。

inputタグに入力した値が自動でテキストに表示されるのを確認できましたでしょうか？

次は少し深雑にして、ライブラリと連携したウォッチのサンプルコードを書いていきます。

lodashと連携してウォッチャを利用してみる

jsのライブラリであるlodashを利用してウォッチャのサンプルコードを書いていきます。

lodashとは便利な関数がまとめられたライブラリです。

今回、利用するのは処理を遅延させて実行させる関数で、inputタグに入力された値を2秒後に大文字にしてテキスト表示させます。

では、書いていきましょう。

html

<div id="app">
   <label>
       <input type="text" v-model="name">
   </label>
   <p>{{upperName}}</p>
</div>

js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
<script>
var app = new Vue({
   el: '#app',
   data: {
       name: '',
       upperName: ''
   },

   created: function () {
       //2秒遅延させてgetUpperを実行させるdelayFuncメソッドを作成
       this.delayFunc = _.debounce(this.getUpper, 2000)
   },

   //v-modelのnameを監視して実行させる
   watch: {
       name: function (newValue, oldValue) {
           this.delayFunc()
       }
   },

   methods: {
       //nameプロパティを大文字に変更させ、upperNameにさせる
       getUpper: function () {
           this.upperName = this.name.toUpperCase()
       }
   }
})
</script>

lodashの読み込みはCDNで行います。

まず、createdで作成したdelayFuncは、lodashのdebounceを設定しています。

debounceは、第一引数に関数、第二引数にミリ秒を設定することで、遅延した処理を実行させることができます。

debounceで遅延させて実行させる関数はgetUpperで、nameプロパティを大文字に変更させています。

delayFuncはライブラリと連携しているので、若干ではありますが重い処理と言えるでしょう。

ウォッチャでnameプロパティの変更を監視してdelayFuncを実行させます。

いかがでしたでしょうか？

vue.js入門も少しずつ難しくなってきましたね。

それでも、処理を分割してみてみると一つ一つは難しいことはしていませんので、落ち着いて確認してみてください。