サンプルコードから基礎を学ぶ！Vue.js入門講座！【computed編】

今回はこのような質問をいただきました。

computedプロパティってなに？
どんなことができるの？

computedプロパティは動的なプロパティを表すものです。

超初心者向けVue.js入門講座です。

一緒にVue.jsを勉強して、Vue.jsを楽しみましょう！

computedプロパティは動的なプロパティを表すもの！

computedプロパティは動的なプロパティ（データ）を表すものです。

では動的なデータとはどのようなものなのでしょうか？

動的なデータとはこういうもの！

これはテキストボックスに数値を入力して、その数値が奇数か偶数か表示するプログラムです。

結果は数値が入力されるまでわかりません。

奇数であるか偶数であるかは判定を行わないと表示できないですよね。

このようなデータを動的なデータと呼びます。

このような動的なデータを扱うことができるのがcomputedプロパティです。

dataプロパティとの違いは？

dataプロパティとcomputedプロパティの違いは、保持するプロパティが静的であるか、動的であるかです。

dataプロパティは静的、computedプロパティは動的なプロパティを保持します。

ではこのdataプロパティとcomputedプロパティ、どのように使い分けたら良いのでしょうか？

dataプロパティは初期値を設定するもの！

dataプロパティは初期値を設定するものだと思ってもらえれば良いです。

このdataプロパティを使った動的なプロパティを作りたいときには、computedプロパティを使うことになります。

今までもdataプロパティは初期値を設定するために使ってきましたよね。

このイメージで覚えておけば良いと思います。

computedプロパティを使ってみよう！

では実際にcomputedプロパティを使ってみましょう。

先ほど紹介したサンプルコードをcomputedプロパティを使って書き換えてみます。

JavaScript側に設定できるので可読性が上がりますね。

methodsでも同じことができる！

methodsでも同じことができそう！

このように思った方もいるのではないでしょうか？

そうなんです！
methodsを使っても同じことができます。

では、computedを使った処理とmethodsを使った処理では何が違うのでしょうか？

次のサンプルを動かしてみてください。

numberJudgmentとnumberJudgmentMethod()の実行回数を表示して、これらのプロパティには全く関係のないテキストボックスも用意しました。

numberJudgmentMethod()は初期表示だけで何回も実行されているのがわかりますよね。

一方、numberJudgmentは初期表示時点で1回しか実行されていません。

つまり、numberJudgmentとnumberJudgmentMethod()には次のような違いがあります。

numberプロパティには全く関係のないテキストボックスの数値を変えてもnumberJudgmentMethod()が実行されていますよね。

このように、methodsを使うと無駄に処理が実行されてしまいます。

そのため、動的な値を扱いたい場合はcomputedプロパティを使用しましょう。

まとめ

computedプロパティは動的なプロパティを表すものです。

methodsプロパティを使うよりも遥かに効率的なので活用していきたいですね。

dataプロパティとmethodsプロパティをあわせたようなプロパティなので、慣れるまで少し難しいかもしれません。

積極的に使って慣れていきましょう！