code_blocks HTML/CSS/JS ライブエディタ star

仕組み

HTML・CSS・JSタブに入力すると、入力するそばからプレビュー領域が更新され、結合された結果がサンドボックス化されたiframe内にレンダリングされます。sandbox属性はallow-same-originを付けずにallow-scriptsだけを設定しています — これが実際の安全性を生み出している部分です。プレビュー内で実行されるスクリプトは、別個の不透明なオリジンで実行されるため、このページのクッキーやローカルストレージ、DOMを読み取ることができず、このページの側からもiframeの中に立ち入ることはできません。この分離は単なる見た目上の枠ではなく、ブラウザが強制するセキュリティ境界です — サイトが信頼できないサードパーティのコンテンツ(広告、ウィジェット、ユーザーが投稿したコード片)を、その中身を信頼することなく安全に埋め込むために使うのと同じ仕組みです。

編集画面そのものは意図的に簡素です。3つのテキストエリアがあるだけで、シンタックスハイライトも自動補完もありません。これは機能の欠落ではなく、意識的なトレードオフです — 本格的なコード編集体験(キーワードのトークン化、括弧の対応づけ、タグの自動補完)を実現するには、相応の規模のサードパーティ製エディタライブラリを読み込む必要があり、それは重量増加と、1文字を入力する前の読み込み遅延につながります。このツールはその正反対を最適化しています — ページを開いた瞬間に、依存関係ゼロ、ビルド手順ゼロで即座に入力を始められることです。

3つのタブのいずれかで1文字入力するたびに再構築がトリガーされます。現在のHTML、<style>タグで包まれた現在のCSS、<script>タグで包まれた現在のJSが1つの文書にまとめられ、iframeに書き込まれます。差分の計算も段階的なパッチ適用もありません — プレビュー文書全体を単純に置き換えるだけで、この規模であれば実装をシンプルに保ちながら即時に感じられるほど高速です。

知っておくとよいこと

編集もレンダリングもすべてブラウザ内で完結するため、サーバーとの通信は発生せず、アカウントも不要です。CSSの小技をすばやく試す、より大きなコードベースからJavaScriptのバグを報告前に切り分ける、実プロジェクトに動作確認済みの結果をコピーする前に小さなコンポーネントを試作するといった用途に向いています。入力した内容はどこにも自動保存されないため、これをメモ帳のように扱ってください — タブを閉じる前に、残しておきたいものはコピーしておきましょう。