本記事では、Vue.jsで作成するアプリケーションの算出プロパティを定義するcomputedプロパティオプションについて紹介します。
目次
computedプロパティオプション
Vue.jsではHTMLテンプレート内に式を記述することができます。
例えば、文字列が格納されている変数の値の前後の空白を除去する場合なら以下のようになります。
|
1 2 3 4 |
<!-- 文字列のtrim関数で前後の空白を除去して表示 --> <p> {{variable.trim()}} </p> |
HTML内に式が記述できるのは、とても便利です。
しかし、上記のような簡単な処理ではなく、もっと複雑な処理が必要な場合は、HTMLに埋め込むコードが非常に長くなり可読性が低くなります。
|
1 2 3 |
<p> {{variable1.trim().length + variable2.trim().length + variable3.trim().length > 100 ? '入力可能な文字数を超過しています。' : ''}} </p> |
上記の例では、変数の「variable1」、「variable2」、「variable3」のそれぞれを値の前後の空白をtrimメソッドで除去した後の文字数を加算した結果が100を超えている場合は「入力可能な文字数を超過しています。」というメッセージを表示しようとしています。
また、同じ処理が複数の箇所で利用される場合、同じコードを複数の箇所に記述しなければなりません。（変更があれば、全ての箇所を修正する必要が出てきます。）
これは非常に非効率で、メンテナンス性に優れていないコードになります。
このような時には、Vue.jsが用意してくれている算出プロパティという機能が利用できます。
算出プロパティは、関数（一連の処理）で算出した結果のデータ（値）を返すことができるプロパティです。
プロパティにsetterとgetterがあるプログラムをしたことがある方であれば、getterに相当するものだと思ってもらうとわかりやすいかもしれません。
この算出プロパティをVueインスタンスに定義する際に利用するのが、computedプロパティオプションになります。
computedプロパティでは、methodsオプションと同様に、関数（function）を定義することができます。
computedプロパティの書式
computedプロパティには定義するプロパティの名前と処理を記述するための関数を記述します。
computedプロパティは、次の書式で定義されます。
|
1 2 3 |
computed: { プロパティ名: 関数定義 } |
「プロパティ名」がキー、「関数定義」が値になります。
「関数定義」の部分には関数（function）を記述しますので、次のようになります。
|
1 2 3 4 5 |
computed: { メソッド名: function() { // 処理をここに記述 } } |
computedには複数の算出プロパティを定義できます。
算出プロパティを複数定義する場合は、カンマ「,」で区切ります。
|
1 2 3 4 5 6 7 8 9 10 11 |
computed: { プロパティ名1: function() { // 処理をここに記述 }, プロパティ名2: function() { // 処理をここに記述 }, プロパティ名3: function() { // 処理をここに記述 } } |
computedプロパティに算出プロパティを定義する
ここでは、computedプロパティにメソッドを定義する例を紹介します。
算出プロパティの定義例
以下の例では、HTMLテンプレート（画面）に配置したボタン（button)要素がクリックできるかどうかを返す算出プロパティを定義しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Vue.createApp({ data: function() { return { variable1: '', variable2: '' } }, computed: { canClick: function() { var variable = this.variable1.trim() + this.variable2.trim(); if (variable === '') { return false; } return true; } } }).mount('#app') // variable1とvariable2の前にあるthisは、Vueインスタンスを表します。 |
dataオプションに定義したvariable1とvariable2の2つのデータ（変数）が無効な値（trimeメソッドで前後の空白文字を除去した結果が空文字列）の場合には「false」を、そうでない場合（有効な値の場合）は「true」を返しています。
この算出プロパティは、ボタン（button要素）のdisabled属性に指定する想定です。
|
1 |
<button v-bind:disabled="!canClick">データを更新</button> |
サンプルコード
上記の「算出プロパティの定義例」に記載したコードを実行させるサンプルコードを以下に示します。
HTMLファイル（拡張子が.htmlのファイル）を作成して貼り付けると、動作を確認することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<script src="https://unpkg.com/vue@next"></script> <div id="app"> <div> <input type="text" v-model="variable1" />{{variable1}} <input type="text" v-model="variable2" />{{variable2}} </div> <button v-bind:disabled="!canClick">更新</button> </div> <script> Vue.createApp({ data: function() { return { variable1: '', variable2: '' } }, computed: { canClick: function() { var variable = this.variable1.trim() + this.variable2.trim(); if (variable === '') { return false; } return true; } } }).mount('#app') </script> |
上記のサンプルコードを実行すると、テキストボックスの値を変更する度に計算結果が更新されることが 確認できます。
算出プロパティとメソッドの違い
算出プロパティでは、メソッドと同様に関数（funciton）を定義します。ですので、算出プロパティで行う処理はメソッドで代用できる場合があります。
算出プロパティとメソッドの比較
簡単な例になりますが、以下のような処理では、算出プロパティとメソッドのどちらを使用しても同じ結果を得ることができます。
算出プロパティ（computed）で処理結果を表示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script src="https://unpkg.com/vue@next"></script> <div id="app"> <div> {{proc}} </div> </div> <script> Vue.createApp({ data: function() { return { num1: 1, num2: 2 } }, computed: { proc: function() { return this.num1 + this.num2; } } }).mount('#app') </script> |
メソッド（methods）で処理結果を表示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script src="https://unpkg.com/vue@next"></script> <div id="app"> <div> {{proc()}} </div> </div> <script> Vue.createApp({ data: function() { return { num1: 1, num2: 2 } }, methods: { proc: function() { return this.num1 + this.num2; } } }).mount('#app') </script> |
算出プロパティとメソッドで同じ結果が得られるのであれば、どちらを使用しても差はないように思えますが、算出プロパティとメソッドでは明確な違いがあります。
それは、関数の処理結果がキャッシュ（保存）されるかどうかです。
算出プロパティのキャッシュについて
computedプロパティに定義した関数では、関数内部で参照しているデータ（dataオプションに定義されている値や他のcomputedプロパティに定義されている関数の結果）が変化した場合にのみ再度実行されます。関数内部で参照しているデータが変化しない場合は、処理は実行されずに前回に実行した結果（前回の実行時に保存されていたデータ）が即座に返されます。
computedプロパティに定義した関数では、関数に何度アクセスしても、結果の算出元となるデータに変更がない限り処理を行わないので、不必要な処理が実行されずに済みます。
それに対してmethodsオプションに定義した関数では、計算結果がキャッシュされませんので、計算の算出もとになるデータの変更有無に関係なく、関数が呼び出されると毎回処理が実行されます。
上記の「算出プロパティとメソッドの比較のためのサンプルコード」で示したような簡単な処理であればさほど差はありませんが、処理が大きくなればなるほどその差は顕著に表れてきます。
算出プロパティとメソッドの使い分け
算出プロパティが関数の処理結果をキャッシュ（前回の実行結果を保存）してくれているので、メソッドを使用するよりも算出プロパティを使用した方が、高速に処理を行うことが可能になります。
関数で行う処理のコストが非常に高い場合は、メソッドではなく算出プロパティを使用する方がアプリケーションのパフォーマンスを向上させることができます。
算出プロパティでは、関数が参照しているデータが変更されると処理が実行されますので、参照しているデータが変更されても即座に処理を実行したくない場合は、算出プロパティではなくメソッドを使用することになります。
また、参照元のデータの変更の有無にかかわらず処理を行いたい場合も、算出プロパティではなくメソッドを使用します。
