HTML・CSS・JS プレイグラウンド

機能

このプレイグラウンドは、フロントエンドの実験用の小さなオンラインコードエディターです。シンタックスハイライト付きの 3 つのタブに HTML、CSS、JavaScript を書くと、入力に合わせてプレビューが更新されます。CodePen や JSFiddle のようなものですが、アカウントは不要です。組み込みのコンソールは console.log() の出力とエラーを JavaScript の行番号付きで表示するので、開発者ツールを開かずにデバッグできます。スマートフォンや借りたパソコンでも便利です。

CSS レイアウトを試す、同僚のためにバグを再現する、Stack Overflow のスニペットをテストする、初心者に教える、ちょっとしたプロトタイプを作る、といった用途に使えます。

使い方

1. HTML、CSS、JS のタブに入力するか、サンプル を押して小さなカウンターのデモから始めます。タブに付いている点は、そのタブにコードがあることを示します。
2. 入力を止めて 0.6 秒後にプレビューが自動で実行されます。重いスクリプトの場合は 自動実行 をオフにし、準備ができたら 実行 か Ctrl+Enter を押します。
3. コンソール でログ、警告、エラーを確認します。最新の行は常に一番上に表示されます。オブジェクト、配列、Map、Set、DOM 要素はコンパクトで読みやすい形で表示されます。
4. 共有 でコードを誰かに送ります。ZIP をダウンロード は index.html、style.css、script.js を別々のファイルとして保存し、そのまま実際のプロジェクトで使えます。HTML をダウンロード はすべてをどのブラウザでも開ける 1 つの index.html ファイルとして保存します。

コードはこのブラウザに保持されるので、戻ってきたときにも残っています。Tab キーではスペース 2 つ分インデントされます。

例

HTML：

<button id="go">Click me</button>

JavaScript：

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

クリックするたびにコンソールに 1 行追加されます。名前のつづりを間違えると、コンソールに赤い ReferenceError が、JS タブ内の発生行とともに表示されます。

仕組み

3 つのペインは 1 つの HTML ドキュメントにまとめられ、sandbox 属性付きの iframe に読み込まれるため、コードはこのサイトの Cookie やストレージを読み取れません。フレームに追加される小さなスクリプトがコンソールの呼び出しと捕捉されなかったエラーをページに転送します。端末の外には何も出ません。