readonly() 読み取り専用プロキシを作成する

最終更新：2026-10-22

readonly() は元のデータの読み取り専用プロキシを作成します。書き込みは警告が出て失敗するため、データの意図しない変更を防げます。

📝 構文

const config = readonly({ theme: 'dark' })
config.theme = 'light'  // ❌ 警告：Set operation on key failed

target	オブジェクトまたは ref（ref を渡すと読み取り専用の ref が返されます）

戻り値：深い（deep な）読み取り専用プロキシ

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

出力：

Theme stays dark; clicking logs a failed-write warning and nothing changes.

💡 ヒント 典型的な使い道：設定オブジェクトを子コンポーネントに渡すとき readonly で包み、子コンポーネントが親のデータを変更できないようにします。

ℹ️ 補足 読み取り専用は一方通行です。元のオブジェクトの変更は読み取り専用プロキシに反映されますが、逆方向の書き込みはブロックされます。

⚠️ 注意 開発環境では書き込み時に警告が表示され、本番環境では黙って失敗します。この警告を実行時のバリデーション代わりに使わないでください。

Q readonly はすべての変更を防げますか？

A プロキシ経由の書き込みはインターセプトしますが、プロキシを経由せず元のオブジェクトを直接操作すれば変更できてしまいます。つまりイミュータブル（不変）になるわけではありません。

Q readonly で包んでもデータは更新されますか？

A 更新されます。元データの変更は読み取り専用プロキシにも反映されます。書き込みだけがブロックされます。

Q Object.freeze との違いは何ですか？

A freeze は実際のオブジェクトを凍結し、元に戻せません。readonly はプロキシの層でインターセプトするだけで、リアクティブな追跡機能は保たれます。

Web-Tutorial 技術チーム

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