【Vue基礎】算出プロパティcomputedを理解する

computedとは

Vueのcomputedは算出プロパティ（computed property）とも呼ばれ、リアクティブな仕組みの中で「依存しているデータが変わったときだけ自動的に再計算されるプロパティ」を定義するために使います。算出プロパティの代わりに、同じような関数をメソッドとして定義しても同じ結果となります。しかしcomputedは、関数(methods)と違い依存している値が変更されない限り、キャッシュされた結果を返します。ちょっと言葉では難しい感じがしますかね。簡単なコードで確認してみましょう。

computedとmethodsのちがい

例えば、下記コードで確認してみます。

<template>
  <p>computed: {{ sumComputed }}</p>
  <p>method: {{ sumMethod() }}</p>
</template>
<script setup>
import { ref, computed } from 'vue'
const a = ref(2)
const b = ref(3)
const sumComputed = computed(() => {
  console.log('computed 再計算')
  return a.value + b.value
})
function sumMethod() {
  console.log('method 実行')
  return a.value + b.value
}
</script>

コンソール環境で確認すると

computed 再計算
method 実行

もちろん上記のコンソールになりますね。では、テンプレートに何かタグを足すなり、テキストをいれて再描画をしてみましょう。そうすると

method 実行

sumComputedは再計算されません！依存している値sumComputedが変わらなければ再実行しない。しかしメソッドsumMethodは呼ばれるたびに毎回実行されます。どうでしょうかわかりやすかったでしょうか？上記は基礎的なコードですが、これがもし重い処理が書かれたコードだとcomputedはキャッシュされるので、非常におすすめですね。

Computedの活用

computedの使いどころは、その値に変更があった場合「動的に何かしらの処理を実行する」時が主な使いどころかと思います。例えば

• 入力フォームのリアルタイムバリデーション

• 日付や数値のフォーマット変換

• 一覧のフィルタリング（リアルタイムで検索 / 業務アプリなどに使える）

• 合計金額・集計系の表示

他にもUIの表示切り替えなどテンプレート内で何度も呼ばれるような処理はcomputedを使うと再計算が減ります。

■日付や数値のフォーマット変換

表示用の変換は何度もおきるが、元データが変わらなければ再計算されない

<template>
  <div>{{ formatteDate }}</div>
</template>
<script setup>
import dayjs from 'dayjs'
import { ref, computed } from 'vue'
const rawDate = ref(dayjs().format('YYYY-MM-DDTHH:mm:ss'))
const formatteDate = computed(() => {
  const date = new Date(rawDate.value)
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
})
console.log('formatteDate実行')
</script>

もちろん実行時はコンソールが表示されますが、取得した日付が再描画されない限りformatteDateは実行されません。

■合計金額・集計系の表示

データが変われば 合計も自動更新されるが、データが変わらなければ合計の再描画はおきない

const items = ref([
  { price: 100, quantity: 2 },
  { price: 200, quantity: 1 }
])
const total = computed(() =>
  items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
)
console.log(total)

comuptedは、値を表示に再利用したいときや複雑な計算・重い処理がある場合、他にもgetとsetを使って、オブジェクト形式でv-modelのような双方向バインディングも可能です。comuptedは上級クラスになると難易度は高めかと思いますが、最適化しやすい関数で効率よく処理を実行できるので使いこなしていきたいですね。

まとめ

いかがでしたでしょうか。今回はcomuptedについてご紹介させていただきました。値を使って何か表示する、キャッシュも効いて値の変更にも対応できる computed 。応用的な使い方や使いどころの解説より実践的な使用のきっかけになれば幸いです。

以上となります。できる限りわかりやすく伝えようとしても書くのは難しいです。
コードや記事の書き方について気になるところがあれば、アドバイスいただけると嬉しいです。