Vue.js

Vue.jsの算術プロパティとは

こんにちは!ともです(@_tomo_engineer)!

今回はVue.jsの算術プロパティについて見ていきます。

参考にしたものは以下です。

基礎から学ぶVue.js(書籍)

Vue.js:日本語ドキュメント

算術プロパティとは

算術プロパティはcomputedオプションに定義される任意のデータを返す関数です。

この算術プロパティが担う目的は次です。

  • アプリケーション層に加工したデータを渡す事(ゲッターの場合)
  • 任意の加工をしてデータを保存する事(セッターの場合)

ゲッターとセッターとは何を意味しているのでしょうか。

ゲッターとセッター

算術プロパティにはゲッターとセッターという機能があります。

上記のv-model側のhalfPriceがセッター、Mastach内のものがゲッターとして働く算術プロパティです。

computed: {
        halfPrice: {
            get: function(){return this.price / 2},
            set: function(val){this.price = val * 2},
        }
}

getterとして動作している方では、もとのデータを2倍して(加工して)返却しています。

setterとして動作している方では、もとのデータに2倍して(加工して)保存しています。

この様に、算術プロパティでは任意の複雑な処理をまとめてくれます。

get, setを明記していない場合はデフォルトでgetterとして動作します。

算術プロパティを使うメリット

算術プロパティを利用する目的とは何なのでしょうか。

  • テンプレートの可読性を高める

3割引きの特別価格を表示する場合を考えると、下2つのどちらが分かりやすいでしょうか。

{{ price * tax * 0.3 }}
{{ specialPrice }}

上のテンプレートやりたい事が何か分かりませんが、下であれば特別価格を表示したいんだと分かりやすいですね。

compute: {
     specialPrice : function() {
          return this.price * this.tax * 0.3
     }
}

computeオプションに上記の様にすれば良いですね。

この様に任意の処理をまとめて返す事で、テンプレートの可読性をあげる事が出来ます。

算術プロパティでしてはいけない事

算術プロパティ(getter)が担う役割は、アプリケーション層に加工したデータを渡す事です。

次の事を絶対にしてはいけません。

  • getter内で実際のデータを加工する
new Vue({
     el: '#app',
     data: {
        price: 100,
        tax: 1.08
     },
     computed: {
        includeTax: function() {
             this.price = this.price * tax;
             return this.price
        }
     }
})

ちょっとめちゃめちゃ過ぎかも知れませんが、このincludeTaxという算術プロパティ(getter)ではデータ自体が加工されてしまっています。this.price = this.price * this.tax

算術プロパティ(getter)ではアプリケーション層に加工されたデータを返す事が目的ですが、もとのデータを変更したりしてはいけません。

まとめ

算術プロパティについて見ていきました。

まとめると以下です。

要約
  • 算術プロパティにはgetter・setterの役割がある
  • getter・setterでは複雑な処理をまとめる機能
  • getterではもとのデータを変更してはいけない
  • 算術プロパティによりテンプレートの可読性が高くなる

勉強する前はsetterとしての機能に気がつきませんでした。算術プロパティをうまく使って上手にテンプレートを作って行きたいです。