今回はVue.jsの特徴的な機能の一つである算出プロパティを紹介します。
Notice
記事中のCodePenは右上の "Edit on CodePen" からコード編集画面に遷移できます。
ぜひ手元でコードを変えて結果を確かめてみてください。理解が早まると思います。
前提
| マシーン | ブラウザ | Vue |
|---|---|---|
| macOS Sierra 10.12 | Firefox Quantum | ver. 2.5 |
算出プロパティとは
See the Pen Vue Computed by Masahiro Harada (@MasahiroHarada) on CodePen.
算出プロパティとは、プロパティなのに関数という不思議な機能です。
関数の演算結果をプロパティの値として用いるという特徴を持ちます。
上の例をご覧ください。カレンダー（<input type="date">）に入力した日付を元に年齢を表示します。
<p v-if="age >= 0">{{ age }} 歳ですね！</p>var app = new Vue({
// 中略
computed: {
age: function () {
this.setMessage()
// 誕生日の値が入っていなければマイナスの値を返却する
// マイナスの場合の表示はテンプレート側で制御する
if (!this.birthday) {
return -1
}
// 日付の計算にはmoment.jsというライブラリを使う
moment.locale('ja')
return moment().diff(this.birthday, 'years')
}
}
})Vueインスタンス生成時のコンストラクタに渡す設定オブジェクトに、computed というキーを指定しています。このcomputed の値にはオブジェクトを定義します。そしてそのオブジェクトのプロパティが、算出プロパティと呼ばれるものです。
ここでまず注目していただきたいのは、age という算出プロパティは関数として定義されているにもかかわらず、テンプレート側では {{ age }} と、変数と同様に参照されている点です。
通常であればこのような記述だと {{ age }} で参照されるのは関数そのものでしょう（JavaScriptの関数は値として扱われますよね）。しかし算出プロパティ（computed 配下に定義された関数）の場合は、関数の返却値が値として参照〜出力されるのです。
実際に上のCodePenをご覧いただくと、{{ age }} には age 関数の計算結果（具体的には年齢）が出力されているのがわかるかと思います。
算出プロパティとはどんなものかという説明をしましたが、もう少し掘り下げて、算出プロパティの関数がいつ呼ばれるかという点をみていきたいと思います。
算出プロパティはいつ呼ばれるか？
CodePenの例では、年齢を算出するだけでなく、age 関数が呼ばれたタイミングで「Computedが呼び出されました。」というメッセージを表示するようにしています。
age 関数の冒頭で methods に定義した setMessage 関数を呼んでいます。setMessage 関数ではメッセージを表示させるために isComputedCalled プロパティを true にして、setTimeout で2秒後に false になるように制御しています（メッセージが出力されっぱなしだと2回目以降いつ呼ばれたか分からなくなるからです）。isComputedCalled プロパティにより、テンプレート側で <p class="message"> の出し分けを行なっています。
さてこれで、「いつ computed に定義した関数が呼ばれるか」がわかるわけです。実際に触ってみてください。age 関数はいつ呼ばれているでしょうか？
まず、何も操作しなくても最初に一回呼ばれていますね。最初の birthday プロパティの値を元に初期値が計算されています。
そしてそれ以降は、birthday プロパティの値に変更があるたびに呼ばれています。
つまり computed に定義した関数は、関数内部で参照しているプロパティが更新された時に自動的に呼ばれる のです。
この性質を確かめるために、もう一つ例を見てください。
See the Pen Vue Computed2 by Masahiro Harada (@MasahiroHarada) on CodePen.
この足し算の例は先ほどよりも少し簡単でしょう。左右の <input type="number"> にそれぞれ left と right という v-model を設定しました。（ちなみに v-model.number という書き方は入力値を数値に自動変換してくれるものです。HTMLフォームの入力値はそのままでは文字列です。）total というのが算出プロパティなのですが、ここでもこの total 関数が呼ばれたタイミングでメッセージを出力しています。
実際に触ってみてください。total 関数はいつ呼ばれているでしょうか？left および right の値に変更があったタイミングで呼ばれているのがお分かりでしょうか。関数内部で参照しているプロパティが二つ以上であっても、自動的に変更を検知して算出プロパティの出力値に反映しているわけです。
この「あるデータの変更が自動的に検知されて別の処理のきっかけになる」というのは非常にVueらしい機能と言えるでしょう。
算出プロパティの使いどころ
ここまで見てきたように、data のプロパティを元にした計算結果をテンプレートに出力したい場合は算出プロパティの利用を検討してください。
算出プロパティを使うことによって、特定のロジックを一つにまとめることができます。計算結果がテンプレート内の複数の場所で使われる場合は特に便利さを実感できるでしょう。
今回はVue.jsの算出プロパティを紹介しました。
より詳しくはマニュアルを参照してください。
算出プロパティとウォッチャ — Vue.js
