JavaScriptプレイグラウンド: JS・HTML・CSSを実行
サンドボックス化された iframe で JavaScript、HTML、CSS を書き、ライブコンソール出力パネルとプレビューで実行します。ネットワークアクセスはデフォルトで CSP メタタグによりブロックされます。表示される警告付きでオンに切り替えられます。自動実行モードで作業しながらコードを実行したり、停止/リセットで iframe を再作成して無限ループを抜けたりできます。スターター例も用意されています。
JavaScript プレイグラウンドは、JavaScript、HTML、CSS を書いて実行するためのブラウザベースのコーディングワークスペースです。エディターには JS、HTML、CSS のタブが分かれており、プレビューペインとライブコンソール出力パネルでページとその出力を一緒に確認できます。短いスニペットの実験や、ローカル開発環境をインストールせずにコードを試すために使います。
コードは、allow-scripts 付きで allow-same-origin なしに設定されたサンドボックス化された iframe 内で実行されます。CSP メタタグがデフォルトでネットワークアクセスをブロックします。オンに切り替えられ、インターフェースは表示される警告を出します。自動実行モードでは作業中にコードが実行されます。スクリプトが無限ループに陥った場合、停止/リセットで iframe を破棄・再作成します。スターター例も含まれています。
JavaScript、HTML、CSS は Web ページで異なる役割を持ちます。HTML がコンテンツを構造化し、CSS が見た目を制御し、JavaScript が動作を追加します。タブを分けておくことで、これらの部分が連携する仕組みをテストしたり、プレビューで変更を確認したり、コンソールで出力をチェックしたりしやすくなります。
JavaScript プレイグラウンドは完全にブラウザ上で動作します。入力はデバイス上で処理され、サーバーへのアップロードなし、保存や送信もされません。ページの読み込み後はオフラインでも動作し、無料で使えます。開発者や DevOps エンジニアは、コードの探索、ページ動作のチェック、異なるマシンからのちょっとしたプログラミング作業に使えます。
手順1: JS、HTML、CSS のタブを開き、試したいコードを入力します。ページの各部分に対応するタブを使います。
手順2: 自動実行モードを使うかどうかを選びます。有効にすると、作業中にコードが自動的に実行されます。
手順3: デフォルトのネットワーク保護に注意してください。CSP メタタグがネットワークアクセスをブロックします。ネットワークアクセスをオンに切り替えられ、プレイグラウンドは表示される警告を出します。
手順4: コードを実行し、プレビューとライブコンソール出力パネルで結果を確認します。
手順5: コードが無限ループに陥った場合は、停止/リセットでサンドボックス化された iframe を破棄して再作成します。
用途: ローカル開発環境をインストールせずに JavaScript のスニペットを試す。このプレイグラウンドはコードをブラウザ上で実行し、ライブコンソール出力を表示します。
用途: HTML、CSS、JavaScript が連携する仕組みを、それぞれのタブで編集してプレビューを確認しながらチェックする。
用途: ページプレビューと並んだライブコンソール出力パネルでコードの動作を調べる。
用途: 停止/リセットで iframe を破棄・再作成して無限ループから回復する。
用途: ローカル環境が使えないマシンでプログラミング作業を行う。
用途: 社内のコードやデータをサードパーティのサービスに送信するのを避ける。このプレイグラウンドは入力をブラウザ上で処理します。
用途: JavaScript、HTML、CSS を試す出発点が欲しい場合にスターター例を探索する。