【Vue.js】computedプロパティの書き方・使い方について解説

Vueを使っている際に、データを処理してから表示する場合があります。そのような場面で便利なVueのcomputedプロパティ（算出プロパティ）について解説します。

Vueのcomputedプロパティとは？

データに何かしらの処理を加えてから表示させたい。という場面があったりすると思います。例えばショッピングアプリで商品の購入価格と購入数から合計金額を計算して表示する…などの場面で使用します。

そんな時に使えるのがcomputedプロパティです。

computedプロパティを用いればプロパティ名と処理する内容を記述するだけでこれらを実現してくれます。

Vueのcomputedプロパティの使い方

それでは実際のcomputedプロパティの書き方について説明していきます。

Vueのcomputedプロパティの書き方

computedプロパティは次のように書きます。

(main.js)

computed: {
   ここにプロパティ名を記述: function () {
      ここに処理内容を記述
      return ここに処理後の表示させる値を記述
 }
}

Vueのcomputedプロパティの実装例

firstNumとsecondNumを掛け算した値をresultNumとして表示する場合を考えてみましょう。その際には次のように算出プロパティを宣言します。

(app.js)

var vm = new Vue({
  el: '#example',
  data: {
    firstNum:3,
    secondNum:4
  },
  computed: {
    // 算出 getter 関数
   resultNum: function () {
      // `this` は vm インスタンスを指します
      return this.firstNum * this.secondNum
    }
  }
})

(index.html)

<div id="example">
  <p>{{ resultNum }}</p> 
</div>

このようにresultNumプロパティを宣言することでindex.htmlのdiv要素には12が表示されます。これはfirstNumとsecondeNumがかけられたものになってますね。

computedプロパティとwatchプロパティの違い

watchプロパティでの実装例

Vueでは変数の変化を検出してそれに応じた処理をするwatchプロパティを提供しています。watchプロパティを用いても2.2項と同様の機能を実装することができます。次に示すものがwatchプロパティを用いたコードです。

（app.js）

var vm = new Vue({
 el: '#example',
 data: {
   firstNum: 3,
   secondNum: 4,
   resultNum: 12,
 },
 watch: {
   firstNum: function (val) {
     // `this` は vm インスタンスを指します
     this.resultNum = val * this.secondNum;
   },
   secondNum: function (val) {
     this.resultNum = this.firstNum * val;
   }
 }
})

このように実装できます。firstNumとsecondNumの変化を検出して、それぞれの変化に対してresultNumも再度計算する処理を行っています。

computedプロパティとwatchプロパティの比較

前項に記述されているwatchプロパティでの実装はcomputedプロパティに比べて冗長な記述になります。さらにcomputedプロパティでの記述の方がより可読性の高いコード担っています。したがって、複数の変数を用いて計算などの処理をした後に表示を行う場合は出来るだけcomputedプロパティを用いるのが良いでしょう。一方でwatchプロパティを用いたほうがいい場合もあります、それは次のような場合です。

computedプロパティでは処理できない非同期通信などの複雑な処理を行う場合
更新前と更新後の値を使う場合
処理を実行しても、データは返さない場合

状況に応じて適切なプロパティを用いましょう！watchプロパティについて詳しく学習したい方は「Vueのwatchプロパティの使い方について解説」を参照してみてください！

computedプロパティとmethodsプロパティの違い

methodsプロパティの実装例

methodsプロパティ内に記述した関数を用いても2.2項と同様の機能を実装することができます。その際にはcomputedプロパティ内に記述していた関数をmethodsプロパティに記述し、テンプレート構文でその関数を呼び出すだけです。次がそのコードです。

(app.js)

var vm = new Vue({
  el: '#example',
  data: {
    firstNum:3,
    secondNum:4
  },
  methods: {
    // 算出 getter 関数
   calcNum: function () {
      // `this` は vm インスタンスを指します
      return this.firstNum * this.secondNum
    }
  }
})

(index.html)

<div id="example">
  <p>{{ calcNum() }}</p> 
</div>

このように実装できます。pタグの要素には常に、calcNumの計算結果の戻り値が表示されるようになります。（methodsプロパティを用いているので必ず()をつけることに注意しましょう。）

computedプロパティとmethodsプロパティの比較

methodsプロパティはv-onのハンドラ関数としても利用できるなどの汎用性の高さがメリットとしてあげられます。一方で、computedプロパティは関数内の変数に変更があるときだけ再計算されます。変更がない場合はキャッシュが利用されるため、余計な計算を行うことがなくなるのがメリットです。次のコードでキャッシュが利用されていることを確認してみましょう。

(app.js)

var vm = new Vue({
   el: '#example',
   data: {
       firstNum: 3,
       secondNum: 4,
       thirdNum: 0,
   },
   methods: {
       // 算出 getter 関数
       resultNumFunc: function () {
           // `this` は vm インスタンスを指します
           console.log("メソッドで呼び出し");
           return this.firstNum * this.secondNum
       }
   }
})

(index.html)

<div id="example">
 <p>resultNum：{{ resultNumFunc() }}</p>
 <p>thirdNum：{{ thirdNum }}</p>
 <input type='text' v-model="firstNum" placeholder="fristNumの変更">
 <input type='text' v-model="thirdNum" placeholder="thirdNumの変更">
</div>

こちらのコードではfirstNumとsecondeNumを使ってresultNumを算出して表示しています。thirdNumはそのまま入力された値が表示されます。このコードでthirdNumの数値を3に変更するとブラウザの検証画面に次のような画面が表示されます。

（GoogleChromeの検証画面）

このように0を消す際と3を入力した際に二回methodsプロパティ内のresultNumFunc()メソッドが呼び出されています。一方でcomputedプロパティを用いて次のように記述してみます。

(app.j)

var vm = new Vue({
   el: '#example',
   data: {
       firstNum: 3,
       secondNum: 4,
       thirdNum: 0,
   },
   computed: {
       // 算出 getter 関数
       resultNum: function () {
           // `this` は vm インスタンスを指します
           console.log("computedで呼び出し");
           return this.firstNum * this.secondNum;
       }
   }
})

(index.html)

<div id="example">
  <p>resultNum：{{ resultNum }}</p>
  <p>thirdNum：{{ thirdNum }}</p>
  <input type='text' v-model="firstNum" placeholder="fristNumの変更">
  <input type='text' v-model="thirdNum" placeholder="thirdNumの変更">
</div>

methodsプロパティで実装した場合と仕組みは同じですが、thirdNumをいくら変更してもcomputedプロパティ内のresultNum関数が実行されることはありません。これはキャッシュが利用されているためです。もちろんfirstNumやsecondNumが変更された際にはresultNum関数が実行されて、resultNumの値も再計算されて表示されます。

このようにcomputedプロパティは関連する変数が変更されたときのみ実装されるという点がユニークな特徴です。

computedプロパティのライフサイクルの位置付け

以下の図はVue.jsのライフサイクルダイアグラムですが、computedプロパティはbeforeMountとmountedの中間に位置付けられます。なので、computedプロパティで変数を処理する際に、マウントするまでにその変数がなければエラーが出てしまうので注意しましょう。

この記事のまとめ

本記事ではVueのcomputedプロパティを、実際の実装例を元に説明しました！最後に記事の要点をまとめてみましょう。

データに何かしらの処理を加えてから表示させたい際はcomputedプロパティを用いる。
記述方法はcomputedプロパティ内の関数名と処理内容と戻り値を定義するだけ。
watchプロパティに比べて記述が簡潔で可読性も高い。
methodsプロパティと異なり、キャッシュの利用があるため、関連する変数が変更される場合のみ、関数が実行される。
computedプロパティはライフサイクルダイアグラムでmountedよりも前に位置付けられるので注意する必要がある。

Vueのcomputedプロパティを是非活用してみましょう！