初心者向け

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

vue-introductory-course-computed

こんばんは!光です。

大手企業でWebエンジニアをやっています。

Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。

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

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

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

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

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

jsFiddleというオンラインエディタを使用しています。
>> jsFiddle

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

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

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

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

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

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

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

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

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

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

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

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

dataプロパティ

静的なプロパティを保持する

computedプロパティ

動的なプロパティを保持する

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

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

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

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

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

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

dataプロパティに動的なプロパティを設定しようとするとエラーになるので注意!

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

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

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

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

computedプロパティは動的な値を取るので、関数で定義する必要があります。
dataプロパティとの大きな違いはここなので、間違えないように気をつけましょう。

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

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

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

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

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

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

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

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

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

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

numberJudgment

使用しているプロパティ(今回の場合はnumberプロパティ)に変化があったときに実行される

numberJudgmentMethod()

表示に変化があったときに実行される

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

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

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

まとめ

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

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

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

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