GifproGifpro
Prompt LibraryAllProgrammingImage GenerationStable DiffusionVideo GenerationMusic GenerationDesign
Toolsサイト診断WebP ConverterImage ResizeFavicon Generator
Start with AIGeminiChatGPTClaudeDeepSeekCursorAntiGravity

ShadowRealm APIでJS隔離実行：Web標準モジュール分離のプロンプト作例

ShadowRealm APIでJS隔離実行：Web標準モジュール分離のプロンプト作例

JavaScriptの実行環境を物理的に分離する発想

CSS-Tricksの記事が指摘する通り、ShadowRealm APIは「ついにJavaScriptをShadowRealmに追放できる」手段を提供する。このAPIはCalVerベースのChrome/Edgeで安定化し、Baselineの定義でも広く使える状態に近づいている。

従来、JavaScriptの隔離実行といえばiframeが一般的だった。しかしiframeはDOMツリー全体を抱え、レイアウトやレンダリングのオーバーヘッドが避けられない。ShadowRealmはこの問題を根本的に解決する。

ShadowRealmの核心：完全なグローバル空間の独立

ShadowRealmは新しいグローバルオブジェクトとECMAScriptの組み込みオブジェクトを持ち、元のレルムと完全に独立している。これにより、以下のユースケースが現実的になる：

  • サードパーティスクリプトの安全な実行：広告やアナリティクスなど、信頼できないコードでもメインスレッドのグローバル状態を汚染しない
  • JavaScriptエディタやコードプレイグラウンド：ユーザーが記述したコードを隔離環境で実行し、evalのリスクを排除
  • ポリフィルのテスト：新しいAPIの実装を副作用なく検証できる

実装上の注意点として、ShadowRealmはglobalThis.eval()やFunction()コンストラクタを提供せず、代わりにShadowRealm.prototype.evaluate()が使われる。このため、古いコードが直接evalを使っている場合には移行作業が必要になる。

安全性とパフォーマンスのトレードオフ

ShadowRealmはiframeと比較して、メモリ消費が約30%削減されるというベンチマーク結果もある。DOMやCSSOMを持たないため、レンダリングエンジンへの負荷が本質的に低い。

一方でShadowRealm内からDOM操作やネットワークアクセスは直接不可能。データの受け渡しは値渡しのみで、オブジェクトは構造化複製される。この制約は意図的な設計であり、完全な分離を保証するために必要なトレードオフだ。

実際のコードで確認するShadowRealmの使い方

const realm = new ShadowRealm();
// 隔離環境で関数を定義して返す
const add = realm.evaluate(`
  function add(a, b) { return a + b; }
  add;
`);
console.log(add(2, 3)); // 5

// グローバル変数は一切漏れない
try {
  realm.evaluate('globalThis.hijack = true');
  console.log(globalThis.hijack); // undefined
} catch (e) {}

注目すべきは、evaluateが返す関数は関数オブジェクトとしてラップされる点。ShadowRealm内の関数は呼び出し側のレルムに自動的に移され、引数は構造化複製される。これにより、メインスレッドのプリミティブ値は安全に渡せるが、DOMや関数オブジェクトは渡せないという制約が生まれる。

ShadowRealmの現在地と今後の展望

2026年4月時点で、Chrome/Edge 110以降とFirefox 122でサポート済み。Safariは16.4から部分的に対応しているが、完全実装は17.0以降。Web標準としての地位は固まりつつある。

CSS-Tricksの記事は「ShadowRealmがiframeに取って代わる」と予想するが、筆者は異なる見解を持つ。ShadowRealmとiframeは共存する。DOM操作が必要な場合はiframe、純粋なスクリプト実行ならShadowRealm、という住み分けが進むだろう。

特に注目すべきは、AI時代における応用だ。ユーザーが生成AIで作成したJavaScriptコードを安全にプレビューする環境として、ShadowRealmは理想的な基盤を提供する。ブラウザ上でコードを実行しながらも、グローバル汚染やXSSのリスクを最小限に抑えられる。

開発者が今すぐ備えるべきこと

ShadowRealmの普及に伴い、以下の準備が求められる：

  • eval/Functionコンストラクタに依存したライブラリのリファクタリング
  • 隔離実行が必要な箇所の洗い出し（特にプラグイン機構やユーザースクリプト）
  • 構造化複製できないオブジェクト（DOMノード、クロージャが捕捉するスコープ）をやり取りする設計の修正

ShadowRealmは、JavaScriptに初めて「真の隔離実行」という概念をもたらした。iframeが持つDOM依存の制約から解放され、より軽量でセキュアな分離を実現するこのAPIは、Webプラットフォームの進化における重要なマイルストーンだ。

参照

理人と理子

この記事を書いた人

理人と理子

ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！

Homeヘルプ