refとreactive：使い分け
ref.valueへのアクセス、テンプレート内でのreactiveのアンラップ、分割代入に使うtoRefs()とtoRef()について学習します。
「refとreactive：使い分け」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
2つのリアクティビティツール
Vueには、リアクティブな状態を作成する主な方法が2つあります。ref()とreactive()です。両者には重なる部分もありますが、それぞれ適した状況があります。どちらを使うべきかを理解しておくと、コードを整理された状態に保てます。
refはあらゆる値に使える
ref()は、数値、文字列、真偽値、配列、オブジェクトなど、任意の値をラップできます。JavaScriptでは値は.valueに格納されます。
import { ref } from 'vue'
const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)
count.value++
name.value = 'Bob'refはテンプレートで自動アンラップされる
JavaScriptでは.valueと記述する必要がありますが、テンプレートではトップレベルのrefが自動的にアンラップされます。そのため、{{ count }}と記述するだけで動作します。
<!-- template -->
<p>{{ count }} - {{ name }}</p>reactiveはオブジェクトに使う
reactive()が受け取れるのは、オブジェクト（配列やMapsを含む）だけです。深くリアクティブなプロキシを返し、プロパティには直接アクセスできます。.valueは必要ありません。
import { reactive } from 'vue'
const state = reactive({
name: 'Alice',
age: 30,
hobbies: ['reading']
})
state.age = 31
state.hobbies.push('coding')reactiveは深くリアクティブ
reactiveオブジェクト内のネストされたオブジェクトや配列もリアクティブになります。ネストされたプロパティを変更すると、追加の作業なしで更新が発生します。
const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!reactiveの制限：分割代入で壊れる
reactiveオブジェクトを分割代入すると、取り出した変数は通常の値になり、リアクティビティを失います。これは最も注意すべき落とし穴です。
const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!解決策：安全な分割代入にはtoRefsを使う
toRefs()は、リアクティブなオブジェクトの各プロパティをrefに変換します。各要素が元の値にリンクされたrefになるため、リアクティビティを保ったまま分割代入できます。
import { reactive, toRefs } from 'vue'
const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'単一のプロパティにはtoRefを使う
1つのプロパティだけをrefとして使いたい場合は、toRef(state, 'key')を使います。元のオブジェクトと双方向に同期された状態が保たれます。
import { reactive, toRef } from 'vue'
const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31実践的な目安
- プリミティブ（数値、文字列、真偽値）や単独の値には
ref()を使います。 - 1つのオブジェクトを構成する関連プロパティのまとまりには
reactive()を使います。 - composableからリアクティブなオブジェクトを返す場合は、
toRefs()でラップします。
refはオブジェクトも保持できる
オブジェクトには必ずreactiveを選ばなければならないわけではありません。オブジェクトを保持するrefも深くリアクティブになります。.valueを介してアクセスする点だけが異なります。一貫性を保つため、どの場合にもrefを使うチームも多くあります。
const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole objectまとめ表
- ref：あらゆる値に使え、JSでは
.valueが必要です。テンプレートでは自動アンラップされ、値全体を再代入できます。 - reactive：オブジェクトにのみ使え、
.valueは不要です。深くリアクティブですが、分割代入で機能しなくなり、再代入もできません。 - toRefs：リアクティブなプロパティを分割代入可能にする橋渡し役です。
理解度チェック
適切なツールを選びましょう。
まとめ
重要なポイントは次のとおりです。
ref()はあらゆる値をラップし、JavaScriptでは.valueが必要です。reactive()はオブジェクト用で、深くリアクティブになりますが、分割代入すると機能しなくなります。toRefs()を使うと、リアクティブなオブジェクトを安全に分割代入できます。- プリミティブにはrefを、まとまりのあるオブジェクトの状態にはreactiveを使います。
よくある質問
「refとreactive：使い分け」レッスンは無料ですか？
はい。「refとreactive：使い分け」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「refとreactive：使い分け」で何を学びますか？
ref.valueへのアクセス、テンプレート内でのreactiveのアンラップ、分割代入に使うtoRefs()とtoRef()について学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「refとreactive：使い分け」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。