方法論

1. エディター構成

ワークスペースは HTML、CSS、JavaScript 用の 3 つのテキストエディターを使用し、行番号ガター、タブインデント処理、フォントサイズ制御、任意のワードラップに対応します。

2. HTML 処理

HTML ペインの HTML は生成されたドキュメントの body に配置されます。このツールは HTML を親ページの UI として実行しません。

3. CSS 注入

CSS は生成されたドキュメントの head 内の style 要素に挿入され、ルールはプレビュードキュメントにのみ適用されます。

4. JavaScript 実行

JavaScript はプレビュードキュメント内の script 要素に配置されます。Run 後、iframe のブラウジングコンテキストで実行されます。

5. iframe レンダリング

結合されたドキュメントは iframe.srcdoc に割り当てられ、親ページをナビゲートせずに新しいプレビュードキュメントが作成されます。

6. sandbox 分離

iframe は sandbox 属性を使用します（プレビュー用にスクリプトを許可）。親の DOM API はユーザーコード実行のために公開されません。

7. コンソール処理

プレビュー内の小さなブリッジが console.log/info/warn/error とランタイムエラーを postMessage 経由で親に転送し、表示します。

8. ブラウザ API

スクリプトができることはブラウザポリシーと sandbox 権限に依存します。一部の API は iframe 内でトップレベルページとは異なる動作をします。

9. ローカルストレージ

エディターの状態はこのオリジンに限定された localStorage キーに書き込まれ、更新しても作業中の内容が消えないようにできます。

10. 制限事項

標準 HTML/CSS/JS のサーバー側コンパイルはありません。複雑なビルドパイプライン、非公開パッケージ、特権デバイス API は対象外です。

11. プライバシー上の配慮

プレビューの組み立てはクライアント側で行われます。エクスポートまたは他の場所へコピーしない限り、ローカル永続化はブラウザ内に留まります。