Vue.jsに算出プロパティと言うのがありますよね。
分かるようで分からない算出プロパティ。
今回はそんな算出プロパティを掘り下げていこうと思います！
Vue.jsについては以下を参照してください！
目次
算出プロパティとは
任意に処理を含めることのできるデータです。
算出プロパティを使うメリット
Vue.jsには、MustacheやディレクティブにJavaScriptが使用できます。
ただし、やたらに式を書き込むと可読性の悪いソースコードが出来上がります。
ですので、式を算出プロパティに記述することで可読性を向上させることができます。
算出プロパティを使ってみよう！
では、早速算出プロパティを使ってみましょう！
算出プロパティは「computed」オプションに定義します。
前提として、index.htmlとmain.jsは同階層にあるものとします。
算出プロパティの簡単なサンプル
下記の算出プロパティは、widthプロパティの半分のサイズを計算してその結果を値にします。
算出プロパティを組み合わせる
算出プロパティを組み合わせてみます。
リストの絞り込み
算出プロパティには「キャッシュ機能」があります。
このキャッシュ機能を利用することで、リストの絞り込み機能を簡単に実装できます。
まとめ
算出プロパティをうまく活用することで、可読性の高いソースコードを書くことができます。
可読性が増すことで保守性・メンテナンス性が上がるので、Vue.jsを利用している方は是非活用していきましょう！
おすすめ本
僕がVue.jsの勉強をする際に購入した本になります。
この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ！
