0Pricing
Vue Academy · レッスン

リアクティビティの基礎

Vueがリアクティブな依存関係を追跡する仕組みを学びます

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

リアクティビティとは

リアクティビティとは、データが変更されたときにVueがDOMを自動的に更新する仕組みです。

  • JavaScriptで値を変更します
  • Vueが変更を検知します
  • 変更に合わせてビューが再レンダリングされます

DOMを手動で操作する必要はありません。

Vueが依存関係を追跡する仕組み

Vueは依存関係の追跡システムを使用します。

  • レンダリングでリアクティブな値が読み取られると、Vueはその依存関係を記録します
  • その値が後で変更されると、再実行すべきレンダリングをVueが判断します
  • これにより、更新を正確かつ効率的に行えます

プリミティブ値に対するref

Composition APIでは、refを使って単一の値をリアクティブにします。

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

テンプレート内のref

テンプレート内では、refが自動的にアンラップされるため、.valueを省略できます。

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">Add</button>
</template>

オブジェクトに対するreactive

reactiveを使うと、オブジェクト全体がリアクティブになります。.valueは使わず、プロパティに直接アクセスします。

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

refとreactiveの比較

使い分けのポイント:

  • refはあらゆる値（プリミティブ値とオブジェクト）に使用でき、.valueでアクセスします
  • reactiveはオブジェクトにのみ使用でき、直接アクセスします

一貫性を保つため、どの場合でもrefを使うチームも多くあります。

dataオプション（Vue 2 / Options API）

Options APIではdata関数を使用します。返されたすべてのプロパティがリアクティブになります。

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

配列におけるリアクティビティの注意点

配列のインデックスへの直接代入は、特にVue 2では扱いに注意が必要です。

  • Vue 2では、arr[5] = xとしても更新が発生しませんでした
  • Vue 3のProxyはほとんどのケースに対応しますが、それでも注意は必要です

明確で安全なコードにするため、配列メソッドを優先してください。

リアクティブな配列メソッド

push、splice、popのような変更メソッドは、リアクティブに追跡されます。

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

置き換えと変更

配列を更新する方法は2つあります。

  • push、splice、sortで変更します
  • filterやmapなどで新しい配列を作成して置き換えます

Vue 3では、どちらもリアクティビティを引き起こします。派生リストには、置き換えのほうがすっきり書けることが多いです。

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

リアクティビティの喪失を防ぐ

リアクティブなオブジェクトを分割代入すると、その変数のリアクティビティが失われます。

  • プロパティを取り出すと、その時点の値がコピーされます
  • 分割代入してもリアクティビティを維持するには、toRefsを使用します
import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

理解度チェック

Vueのリアクティビティについての理解度を確認しましょう。

まとめ: リアクティビティの基礎

Vueのリアクティビティの仕組みについて学びました。

  • Vueは各レンダリングが使用するデータを追跡します
  • refで値をリアクティブにします（JSでは.valueを使用します）
  • reactiveでオブジェクトをリアクティブにします（直接アクセスします）
  • Options APIではdata関数を使用します
  • リアクティビティの喪失を防ぐには、配列メソッドとtoRefsを使用します

次は、算出プロパティについて学びます。

よくある質問

「リアクティビティの基礎」レッスンは無料ですか？

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

「リアクティビティの基礎」で何を学びますか？

Vueがリアクティブな依存関係を追跡する仕組みを学びます ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「リアクティビティの基礎」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. リアクティビティの基礎
  2. 算出プロパティ
  3. Watcherと深いリアクティビティ
← Vue Academyに戻る