computedプロパティってなに？
どんなことができるの？
このような疑問にお答えします。
- computedプロパティは動的なプロパティを表すもの！
- dataプロパティとの違いは？
- computedプロパティを使ってみよう！
- methodでも同じことができる！
超初心者向けVue.js入門講座です。
一緒にVue.jsを勉強して、Vue.jsを楽しみましょう！
今回はcomputedプロパティについて解説していきます。
- Vue.jsが初めての人
- Vue.jsを復習したい人
- Vue.jsを動かしてみたい人
computedプロパティは動的なプロパティを表すもの！
computedプロパティは動的なプロパティ（データ）を表すものです。
では動的なデータとはどのようなものなのでしょうか？
動的なデータとはこういうもの！
これはテキストボックスに数値を入力して、その数値が奇数か偶数か表示するプログラムです。
結果は数値が入力されるまでわかりません。
奇数であるか偶数であるかは判定を行わないと表示できないですよね。
このようなデータを動的なデータと呼びます。
このような動的なデータを扱うことができるのがcomputedプロパティです。
dataプロパティとの違いは？
dataプロパティとcomputedプロパティの違いは、保持するプロパティが静的であるか、動的であるかの違いです。
dataプロパティは静的、computedプロパティは動的なプロパティを保持します。
静的なプロパティを保持する
動的なプロパティを保持する
ではこのdataプロパティとcomputedプロパティ、どのように使い分けたら良いのでしょうか？
dataプロパティは初期値を設定するもの！
dataプロパティは初期値を設定するものだと思ってもらえれば良いです。
このdataプロパティを使った動的なプロパティを作りたいときには、computedプロパティを使うことになります。
今までもdataプロパティは初期値を設定するために使ってきましたよね。
このイメージで覚えておけば良いと思います。
dataプロパティに動的なプロパティを設定しようとするとエラーになるので注意！
computedプロパティを使ってみよう！
では実際にcomputedプロパティを使ってみましょう。
先ほど紹介したサンプルコードをcomputedプロパティを使って書き換えてみます。
JavaScript側に設定できるので可読性が上がりますね。
methodsでも同じことができる！
methodsでも同じことができそう！
このように思った方もいるのではないでしょうか？
そうなんです。methodsを使っても同じことができます。
では、computedを使った処理とmethodsを使った処理では何が違うのでしょうか？
次のサンプルを動かしてみてください。
numberJudgmentとnumberJudgmentMethod()の実行回数を表示して、これらのプロパティには全く関係のないテキストボックスも用意しました。
numberJudgmentMethod()は初期表示だけで何回も実行されているのがわかりますよね。
一方、numberJudgmentは初期表示時点で1回しか実行されていません。
つまり、numberJudgmentとnumberJudgmentMethod()には次のような違いがあります。
使用しているプロパティ（今回の場合はnumberプロパティ）に変化があったときに実行される
表示に変化があったときに実行される
numberプロパティには全く関係のないテキストボックスの数値を変えてもnumberJudgmentMethod()が実行されていますよね。
このように、methodsを使うと無駄に処理が実行されてしまいます。
そのため、動的な値を扱いたい場合はcomputedプロパティを使用しましょう。
まとめ
computedプロパティは動的なプロパティを表すものです。
methodsプロパティを使うよりも遥かに効率的なので活用していきたいですね。
dataプロパティとmethodsプロパティをあわせたようなプロパティなので、慣れるまで少し難しいかもしれません。
積極的に使って慣れていきましょう。
