Vue Academy · レッスン

算出プロパティ

Q: 「算出プロパティ」で何を学びますか？

computedプロパティでキャッシュされるリアクティブな値を導出します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

computedプロパティでキャッシュされるリアクティブな値を導出します

「算出プロパティ」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。

算出プロパティとは

算出プロパティは、ほかのリアクティブなデータから値を導出します。

依存関係が変更された場合にのみ再計算されます
テンプレートでは通常のプロパティのように読み取れます
ロジックをJSに移すことで、テンプレートを簡潔に保てます

computedの定義

Composition APIでは、computed関数を使用します。

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

テンプレート内でcomputedを使用する

computedにはデータプロパティと同じように、括弧を付けずにアクセスします。

<template>
  <p>{{ fullName }}</p>
</template>

<!-- fullName updates automatically when
     firstName or lastName change -->

computedとメソッドの比較

メソッドも値を返すのに、なぜcomputedを使うのでしょうか。

Computedは依存関係に基づいてキャッシュされます
メソッドはレンダリング中に呼び出されるたびに実行されます

繰り返し使用する派生値には、computedのほうが効率的です。

キャッシュの動作

computedは依存関係が変更された場合にのみ再実行されます。複数回読み取る場合は、キャッシュされた結果が再利用されます。

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

メソッドは毎回実行される

一方、メソッドは入力が変更されていなくても、呼び出すたびに再計算されます。

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

Options APIでのcomputed

Options APIでは、computedブロックで算出プロパティを宣言します。

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

Computedのgetter

デフォルトでは、computedは読み取り専用で、getterのみを持ちます。

getterは、依存関係が変更されるたびに実行され、値を生成します。

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

Computedのsetter

get関数とset関数の両方を指定すると、computedを書き込み可能にできます。

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

setterの使用

書き込み可能なcomputedに値を代入すると、setterが実行されます。

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

computedを使う場面

リアクティブな状態から導出した値が必要な場合は、computedを使用してください。

リストのフィルタリングやソート
表示用のデータのフォーマット
複数の値を1つにまとめる処理

代わりに副作用を伴う処理に反応させたい場合は、watcher（次のレッスン）を使用します。

理解度チェック

算出プロパティについての理解度を確認しましょう。

まとめ: 算出プロパティ

派生状態について学びました。

computedはリアクティブなデータから値を導出します
値はキャッシュされ、依存関係が変更された場合にのみ再計算されます
メソッドは呼び出すたびに実行されますが、computedは異なります
Computedにはgetterと、必要に応じてsetterを設定できます

次は、watcherと深いリアクティビティについて学びます。

よくある質問

「算出プロパティ」レッスンは無料ですか？

はい。「算出プロパティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。

「算出プロパティ」で何を学びますか？

computedプロパティでキャッシュされるリアクティブな値を導出しますブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/3です。

「算出プロパティ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る