Vue.jsのcomputedの使い方！算出プロパティを使ってうまくデータを扱おう

算出プロパティ（computed）とは？
Vue computedの使い方
1. computed内で条件分岐を使って表示のコードを動的に変更
算出プロパティとメソッド
まとめ
1. 初心者におすすめの参考書

算出プロパティ（computed）とは？

算出プロパティはリアクティブな依存関係に基づいてキャッシュされる
という違いがあります。算出プロパティはリアクティブな依存関係の一部が変更された場合にのみ再評価されるのです。
https://v3.ja.vuejs.org/guide/computed.html#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BE%8B

https://v3.ja.vuejs.org/guide/computed.html#基本的な例

Vueの公式ドキュメントに上記の説明があります。

気になる方は公式のドキュメントを見てみてください。今回は、文面上の理解ではなく使い方について理解を深めてもらいたいので、算出プロパティの説明はこれまでにして使い方を見ていきましょう。

Vue computedの使い方

まずは全体のコードを見ていきましょう。

<template lang="html">
  <div class="page-computed">
    <h1>computed使い方</h1>
    <p>FirstName: {{ firstName }}</p>
    <p>LastName: {{ lastName }}</p>
    <p>FullName: {{ fullName }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: 'Taro',
      lastName: 'Tanaka'
    }
  },
  computed: {
    fullName() {
      return this.lastName + this.firstName
    }
  }
}
</script>

今回は名前を使って説明をしていきます。

名字と名前の2つのデータがあり、フルネームを作りたとなった場合、

<p>FullName: {{ firstName }} {{ lastName }}</p>

と書いてもいいですが、これだとぱっとみたときにフルネームの情報をという判断が難しいですよね。

今回は情報の量が少ないので、簡単かもしれませんが情報量が増えてくるとなんの情報か見極めるのに時間がかかります。

なので、computed(算出プロパティ)を利用して簡潔に情報を表示します。

computed: {
    fullName() {
      return this.lastName + this.firstName
    }
  }

簡単に言えば、関数を作って結果をreturnで返してその結果を使うイメージです。

※computed(算出プロパティ)は必ずreturnで返り値を返す必要があります。

See the Pen computed FullName by xhisashix (@xhisashix) on CodePen.

htmlのコードが見たい方は、真ん中あたりの「View Compiled」を押してください。htmlのコードが表示されます。

computed内で条件分岐を使って表示のコードを動的に変更

<template lang="pug">
  .multiplication
    p {{ a }}
    p {{ b }}
    p {{ multiplication }}
</template>
<script>
export default {
  data() {
    return {
      a: 10,
      b: 6,
    }
  },
  computed: {
    multiplication() {
      const answer = this.a * this.b
      if(answer <= 50){
        return answer
      } else {
        return "50以上です。"
      }
    }
  }
}
</script>

今回は、掛け算をしたときに、計算の結果が50以上の場合は「50以上です」と返し、50以下のときは計算の答えを返すように条件分岐を書きました。

See the Pen Untitled by xhisashix (@xhisashix) on CodePen.