markRaw() オブジェクトを二度とプロキシ化しないようマークする

最終更新：2026-10-22

markRaw() はオブジェクトにマークを付け、リアクティブな構造に入れてもプロキシ化されないようにします。サードパーティのインスタンスや大きな静的データに向いています。

📝 構文

const chart = markRaw(new Chart(el, opts))
const state = reactive({ chart })   // chart はプロキシ化されない

value	オブジェクト（内部フラグが付与されます）

戻り値：渡されたオブジェクトそのもの

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

出力：

Shows 'proxied? false' — the mark works.

💡 ヒント グラフ、エディタ、マップなどサードパーティのクラスインスタンスは、リアクティブな状態に入れる前に markRaw しておくと、プロキシによる不審な動作を避けられます。

⚠️ 注意 マークは取り消せず、そのオブジェクトはリアクティブになりません。変化に追従してほしいオブジェクトには使えません。

ℹ️ 補足 都市リストのような大きくて静的なデータにも適しています。無意味なプロキシのオーバーヘッドを避けられます。

Q shallowRef との違いは？

A shallowRef は「丸ごと置き換えたときだけ反応する」もの、markRaw は「このオブジェクトは二度とプロキシ化しない」ものです。前者は外側、後者は特定のオブジェクトを扱います。

Q このオブジェクトのデータは更新されますか？

A いいえ。オブジェクトはリアクティブシステムの外にあるため、変更してもレンダリングはトリガーされません。

Q マークをあとから解除できますか？

A 解除はできません。リアクティブにしたい場合は、代理のコピーをリアクティブ化して使ってください。

Web-Tutorial 技術チーム

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