ご無沙汰しております

約２か月ぶりの投稿・・・なんか忙しかったり、書くモチベが無かったりで
こんなインターバルが空いてしまいました。継続って大事だけど難しい。。。
さて、とりあえずどんな内容でも継続して書いてみようということで、
今回は、最近勉強を始めたVue.jsの算出プロパティについて記事を書こうと思います。

今後もVue.jsに関する記事を書いていきます！

算出プロパティとは

算出プロパティとは、値を処理してテンプレート側に処理した結果を渡すことができるプロパティのことです。
ちょっとよくわからないので、具体例をもとに見てみましょう。

具体例として、台形の面積を求める((上底+下底)×高さ÷2)画面を作ってみました。
入力項目として上底・下底・高さを入力し、その結果を出力するものとします。

さまざまな方法が思いつきますが、ここではMustache構文で計算してみましょう

この程度のソースコードならまだましですが、テンプレートに多くのロジックを記載すると、
可読性が非常に低くなります。これはよくない。
ここで、算出プロパティを使ってみましょう。

算出プロパティを使ってみましょう。

このように、“computed”を定義し、算出プロパティを使うことで
繰り返し処理結果を呼び出すことができるなど、可読性のあるソースコードを作成することができます。
(ついでに、項目が全て入力されるまで面積を表示しないみたいなことも実装できたり)

メソッド(methods)でも同様の事が行えますが、メソッドには無い算出プロパティの特徴があります。
ここで、代表的な算出プロパティの特徴を２つ見ていきましょう。

メソッドはgetter(処理の結果を取得する)のみですが、
算出プロパティはgetterに加え、setterを持っていることが特徴です。

算出プロパティは処理結果がキャッシュされます。キャッシュされず毎回処理を行うメソッドは異なり処理を早くすることができます。

いかがだったでしょうか。Vue.js勉強始めたばかりですが様々な機能を持っていますね。
それぞれよく理解したうえで、適材適所で利用していきたいです。
あと、１か月に4本はブログ書くぞ！！！！ｗ