コードプレイグラウンド
ライブプレビュー、行番号付きエディタ、キャプチャ付きコンソールを備えたオンラインHTML・CSS・JavaScriptプレイグラウンド。スニペットを即座にテストし、結果を単一のHTMLファイルとしてダウンロード。すべてブラウザ内で動作します。
コードプレイグラウンドとは？
HTML・CSS・JavaScriptを書いてその場で描画結果を確認できるサンドボックス環境です。このツールはさらに、コンソールのキャプチャ、行番号付きエディタ、作品を単一HTMLファイルとしてダウンロードする機能を備えています。
ライブプレビューはどう動きますか？
3つのペインのコードを1つの完全なHTMLドキュメントに組み立て、サンドボックス化されたiframe内で描画します。自動実行が有効なら、入力を止めて約0.5秒後に自動更新され、手動では「実行」を押します。
コンソールパネルには何が表示されますか？
console.log・info・warn・errorの出力すべてに加え、行番号付きの実行時エラーや未処理のPromise拒否も表示します。実行のたびにクリアされます。
ページを再読み込みしてもコードは保存されますか？
はい。3つのペインの下書きはブラウザにローカル保存され、次回アクセス時に復元されます。「リセット」でデモコードに戻り、サイトデータの削除で下書きも消えます。
プレビューはサンドボックス化されていますか？
プレビューは同一オリジンアクセスのないサンドボックスiframeで動くため、テスト中のスクリプトがこのページやCookieを読むことはできません。ただし実行はあなたのブラウザ内なので、信頼できるコードだけを試してください。
実験結果をダウンロードできますか？
はい。「.htmlをダウンロード」で現在のHTML・CSS・JavaScriptを1つの自己完結ファイルに保存でき、任意のブラウザで開けます。
JavaScriptペインで実行できることは？
標準的なブラウザJavaScript：DOM操作、イベント、canvas、公開APIへのfetch（各APIのCORS規則による）、インラインで貼り付けたライブラリ。モジュール解決やnpmパッケージには対応していません。
プレイグラウンドにインターネット接続は必要ですか？
ページ自体の読み込み時のみです。以降の編集・プレビュー・コンソール取得はすべてローカルで動作し、入力したコードがどこかに送信されることはありません。
コードプレイグラウンドの使い方
このプレイグラウンドは、HTML・CSS・JavaScript をサンドボックス化したライブプレビューにまとめます。処理はすべてブラウザ内で完結し、ログやエラーを捉えるコンソールパネルも備えています。下書きはローカルに保存され、前回の続きから再開できます。
- HTML・CSS・JavaScript の各ペインを編集します。どのエディターにも行番号と構文ハイライトがあります。
- 「自動実行」が有効なら入力と同時にプレビューが更新されます。オフの場合は「実行」を押してください（自動実行を切って手動実行もできます）。
- プレビュー下の「コンソール」パネルに注目しましょう。console.log の出力、警告、エラー、捕捉されなかった例外が行番号付きで表示されます。
- 「リセット」で内蔵デモに戻るか、「.html をダウンロード」ですべてを 1 つの自己完結ファイルとして保存できます。
- 「新しいウィンドウで開く」を使うと、現在のドキュメントを専用タブでフルサイズ表示できます。
コンソールは実行のたびにクリアされます。デバッグ中は console.log を気軽に足しましょう。ブラウザ本体のコンソールを開かなくても出力が即座に表示されます。
関連ツール
- JavaScriptビューティファイア 無料オンラインJavaScriptビューティファイアおよびコードフォーマッター。圧縮されたJSをカスタマイズ可能なオプションで、クリーンで読みやすい、適切にインデントされたコードに即座に変換します。
- JS圧縮 JavaScriptコードを即座に圧縮。空白やコメントを削除し、JSを最適化して読み込みを高速化します。
- 正規表現テスター リアルタイムマッチングとグループキャプチャで正規表現をテスト・デバッグ。
- Markdownプレビュー ライブプレビュー付き無料オンラインMarkdownエディタ。GFM完全対応で、Markdownの作成、レンダリング、エクスポートが可能。
- ファイルハッシュ MD5、SHA-1、SHA-256、SHA-512ファイルハッシュをローカル計算・検証
- Chmod 計算機 無料オンラインchmod計算機でチェックボックス付きLinuxファイル権限を視覚化・計算。数値(755, 644)とシンボリック表記(rwxr-xr-x)を即座に変換。setuid、setgid、sticky bit等の特殊権限に対応。
- ASCIIコード表 10進数、16進数、8進数、2進数コード、HTMLエンティティ、文字説明を含む完全なASCII文字エンコーディングリファレンス。即座に検索・フィルタリング。
- Hexビューアー 検索、オフセットナビゲーション、仮想スクロール付きのHexダンプ形式でファイル内容を表示