reactive() オブジェクトのリアクティブなプロキシを作成する

最終更新：2026-10-22

reactive() はオブジェクトや配列を深いリアクティブなプロキシで包みます。プロパティの読み書きを直接行うだけで更新がトリガーされます。

📝 構文

const state = reactive({ count: 0 })
state.count++        // .value なしで直接読み書き

target	オブジェクト、配列、または Map/Set などのコレクション

戻り値：元のオブジェクトのリアクティブなプロキシ。両者は同じデータを共有します

以下のコードを編集して結果を確認しましょう：

出力：

Shows 'Count: 0'; each click increments it.

⚠️ 注意 オブジェクトと配列にのみ有効です。プリミティブ型（数値、文字列）を渡すとリアクティビティが失われるため、そこでは ref() を使います。

⚠️ 注意 分割代入するとリアクティビティが失われます。const { count } = state で得られるのはただの数値なので、toRefs(state) を使うか state.count のまま参照してください。

ℹ️ 補足 オブジェクトを丸ごと置き換える（state = reactive({})）とプロキシのリンクが切れます。ref なら丸ごと置き換えできますが、reactive ではできません。

Q reactive と ref、どちらを使うべき？

A チームの推奨はデフォルトで ref です。任意の型を扱え、丸ごと置き換えでき、分割代入してもリアクティビティが失われません。reactive はオブジェクトスタイル（state.xxx）が明確に読みやすい場合にだけ使いましょう。

Q なぜ state.x を変更するとページが更新されるのですか？

A reactive は Proxy でプロパティの読み書きをインターセプトしています。読み取り時に依存を収集し、書き込み時に更新を通知する仕組みです。

Q reactive のオブジェクトと元のオブジェクトはどんな関係ですか？

A 同じデータを共有しています。プロキシ経由の変更は元のオブジェクトへの変更と同じで、プロキシにリアクティブな追跡機能が加わっているだけです。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。