初心者のためのVue.js入門【監視プロパティの使い方（ウォッチャ）】

こんにちは、ミナトです。

今回は、Vue.jsの「監視プロパティ（ウォッチャ）」について紹介します。

「監視プロパティ（ウォッチャ）」は、特定のデータまたは算出プロパティの状態を監視して、変化があった時に特定の処理を自動的に実行できるものです。
例えば、検索フォームの値が変わったタイミングで自動的にAjax通信を行って結果を表示するなどです。

簡単なプログラムを実装しながら、「監視プロパティ（ウォッチャ）」を理解していきましょう。

Vue.js入門【算出プロパティの使い方】

2021年5月30日

監視プロパティ（ウォッチャ）の基本

まずは監視プロパティの定義方法についてみていきましょう。

以下の例では、監視プロパティを用いて、テキストフィールドの値が変わった時にコンソールに変更前の値と変更後の値を表示しています。

監視プロパティを定義するには、Vueインスタンスのプロパティwatchを定義し、その中に処理を書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>
            <input type="text" v-model="message">
        </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    message: 'hello, world'
  },
  watch: {
    message: function (newValue, oldValue) {
      console.log(`new: ${newValue}, old: ${oldValue}`)
    }
  }
})

実践的な使い方（ドル・円計算アプリ）

ここでは、もう少し実践的な例として、ドルと円を相互に変換するアプリを実装します。
為替レートは1ドル110円として計算します。

ドルを入力した際に、円が自動的に計算され表示されます。逆に円を入力した際はドルが自動的に計算され表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p>
            ドル：<input type="text" v-model="usd">
        </p>
        <p>
            円：<input type="text" v-model="jpy">
        </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    usd: 0,
    jpy: 0
  },
  watch: {
    usd: function (value) {
      this.jpy = value * 110
    },
    jpy: function (value) {
      this.usd = value / 110
    }
  }
})

算出プロパティ VS 監視プロパティ

算出プロパティと監視プロパティのどちらでも実装できる場合、基本的には算出プロパティの利用をオススメします。
理由は単純に算出プロパティの方がシンプルに実装できるからです。

ただ、監視プロパティでしか、実装できないようなケースもあるので機能として理解しておきましょう。

ネストされたオブジェクトの監視

ネストされたオブジェクトを監視するためには、deepオプションを利用します。
以下の例では、テキストフィールドでネストされたオブジェクトを変更した際に、コンソールにメッセージを表示しています。

deep=trueの時は、コンソールにメッセージが表示され、falseにするとメッセージが表示されなくなることが確認できます。

何も指定されていない場合は、deep=falseと同じ扱いとなります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" v-model="colors[0].name">
        </p>
        <p>
            <input type="text" v-model="colors[1].name">
        </p>
        <p>
            <input type="text" v-model="colors[2].name">
        </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    colors: [
      { name: 'red' },
      { name: 'green' },
      { name: 'red' },
    ]
  },
  watch: {
    colors: {
      handler: function (value) {
        console.log(`Updated: ${JSON.stringify(value)}`)
      },
      deep: true
    }
  }

初期読み込み時にも監視プロパティ呼びたい場合

初期読み込み時に監視プロパティを実行させるには、immediateオプションをtrueとします。

new Vue({
  el: '#app',
  data: {
    colors: [
      { name: 'red' },
      { name: 'green' },
      { name: 'red' },
    ]
  },
  watch: {
    colors: {
      handler: function (value) {
        console.log(`Updated: ${JSON.stringify(value)}`)
      },
      deep: true,
      immediate: true
    }
  }
})