ref() と reactive()
ref() でリアクティブなプリミティブを作成し、reactive() でオブジェクトをラップし、それぞれの使い分けと .value による ref 値へのアクセス方法を理解します。
「ref() と reactive()」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
Vue 3のリアクティビティ
Vue 3のComposition APIは、リアクティブなプリミティブを使用して状態を追跡します。主な関数は2つあります。プリミティブ値にはref()を、オブジェクトにはreactive()を使用します。これらへの変更によって、UIが自動的に更新されます。
プリミティブ値にref()を使用する
ref(value)は、値をリアクティブなコンテナでラップします。scriptでは.valueを介して値にアクセスおよび変更します。テンプレートでは、Vueがrefを自動的にアンラップするため、.valueは必要ありません。
<script setup>
import { ref } from 'vue';
const count = ref(0);
const name = ref('Alice');
function increment() {
count.value++; // .value in script
}
</script>
<template>
<p>{{ count }}</p> <!-- no .value in template -->
<button @click="increment">+</button>
</template>オブジェクトにreactive()を使用する
reactive(object)は、オブジェクトの深いリアクティブプロキシを返します。プロパティには直接アクセスでき、どこでも.valueは必要ありません。
<script setup>
import { reactive } from 'vue';
const form = reactive({
email: '',
password: '',
rememberMe: false
});
// Mutate directly:
form.email = 'user@example.com';
</script>
<template>
<input v-model="form.email">
</template>refとreactive — 使い分け
ref()を使用する対象: プリミティブ値（string、number、boolean）、null許容値、composablesから返す値（分割代入しやすい）。reactive()を使用する対象: 1つのオブジェクトにまとめて扱う関連データ。
reactive()の分割代入で起きる問題
リアクティブオブジェクトを分割代入すると、取り出されたプロパティがリアクティブなrefではなく通常の値になるため、リアクティビティが失われます。
const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking
// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;toRefとtoRefs
toRef(obj, 'key')は、1つのプロパティにリンクされたrefを作成します。toRefs(obj)は、リアクティブオブジェクトのすべてのプロパティを個別のリンクされたrefに変換するため、安全に分割代入できます。
import { toRefs } from 'vue';
const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'DOM要素にref()を使用する
ref(null)をテンプレート内の対応するref属性と組み合わせると、DOM要素または子コンポーネントインスタンスへのリアクティブな参照を取得できます。
<script setup>
import { ref, onMounted } from 'vue';
const inputEl = ref<HTMLInputElement | null>(null);
onMounted(() => {
inputEl.value?.focus(); // now the DOM element is available
});
</script>
<template>
<input ref="inputEl" type="text">
</template>isRefとunref
isRef(val)は、値がrefかどうかを確認します。unref(val)はrefをアンラップし、refでない場合は値をそのまま返します。refと通常の値の両方を受け取るcomposablesで便利です。
import { isRef, unref } from 'vue';
function double(val: Ref<number> | number) {
return unref(val) * 2; // works with both ref and plain number
}shallowRefとshallowReactive
shallowRef()は最上位でのみリアクティブで、深い階層まではリアクティブになりません。shallowReactive()もオブジェクトに対して同様に動作します。深いリアクティビティが必要ない場合（大規模なイミュータブルデータ構造など）に、パフォーマンス最適化のために使用します。
reactive()の変更と置き換え
reactive()では、プロパティを直接変更します。オブジェクト全体を置き換えることはできません。reactive()は同じ参照を必要とするためです。置き換える場合は、ref.value = newObjectを使用できるref()を使います。
const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem]; // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassign深いリアクティビティ
reactive()はデフォルトで深いリアクティビティを持ちます。Vueはネストされたオブジェクトや配列の変更も追跡します。便利な一方で、非常に大きなオブジェクトではコストが高くなる可能性があります。パフォーマンスが重要な場合は、shallowReactiveの使用を検討してください。
クイックチェック
reactive()オブジェクトを分割代入すると、なぜリアクティビティが失われるのですか？
復習: ref()とreactive()
ref()はプリミティブ値をラップします。scriptでは.valueを介してアクセスし、テンプレートでは自動的にアンラップされます。reactive()はオブジェクトを深くリアクティブにし、プロパティを直接変更します。分割代入するとリアクティビティが失われるため、toRefs()を使用します。テンプレート要素のrefにはref(null)を使用します。パフォーマンス最適化にはshallowRefとshallowReactiveを使用します。isRefとunrefはcomposableのユーティリティに使用します。
よくある質問
「ref() と reactive()」レッスンは無料ですか？
はい。「ref() と reactive()」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「ref() と reactive()」で何を学びますか？
ref() でリアクティブなプリミティブを作成し、reactive() でオブジェクトをラップし、それぞれの使い分けと .value による ref 値へのアクセス方法を理解します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「ref() と reactive()」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。