ふりぶろぐ
Web Engineer's Blog
JavaScript

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

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

このような疑問にお答えします。

この記事の内容
  • computedプロパティは動的なプロパティを表すもの!
  • dataプロパティとの違いは?
  • computedプロパティを使ってみよう!
  • methodでも同じことができる!

超初心者向けVue.js入門講座です。
一緒にVue.jsを勉強して、Vue.jsを楽しみましょう!

今回はcomputedプロパティについて解説していきます。

読んでほしい人
  • Vue.jsが初めての人
  • Vue.jsを復習したい人
  • Vue.jsを動かしてみたい人

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

Modern life

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

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

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

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

結果は数値が入力されるまでわかりません。
奇数であるか偶数であるかは判定を行わないと表示できないですよね。
このようなデータを動的なデータと呼びます。

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

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

Data

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

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

dataプロパティ

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

computedプロパティ

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

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

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

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

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

今までもdataプロパティは初期値を設定するために使ってきましたよね。
このイメージで覚えておけば良いと思います。

りーふ

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

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

Online test

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

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

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

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

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

Processing

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

このように思った方もいるのではないでしょうか?
そうなんです。methodsを使っても同じことができます。

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

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

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

numberJudgmentMethod()は初期表示だけで何回も実行されているのがわかりますよね。
一方、numberJudgmentは初期表示時点で1回しか実行されていません。

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

numberJudgment

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

numberJudgmentMethod()

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

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

このように、methodsを使うと無駄に処理が実行されてしまいます。
そのため、動的な値を扱いたい場合はcomputedプロパティを使用しましょう。

まとめ

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

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

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

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

ABOUT ME
りーふ
たまにブログを書いてるWebエンジニア。 サーバーサイドメインでインフラとフロントエンドもたまにやります。 Javaが得意。 Play Frameworkが好き。 本業は迷惑をかけない程度に手を抜くスタイル。 意識高い系は苦手。