日本語English

HTML/CSS/JavaScript コードプレイグラウンド

3 つのエディタに HTML・CSS・JavaScript を書いて「実行」を押すと、右のプレビューに結果が出ます。console.log や未処理のエラー（JS の行番号つき）も確認でき、HTML ファイル 1 つとして書き出せます。ページを開いただけでは何も実行しません。

端末内で処理・アップロードなしスマホ対応オフライン対応

ファイルや入力内容はお使いの端末（ブラウザ）の中だけで処理され、サーバーへは送信されません。

他人から渡されたコードは貼らないでください
コードは隔離されたフレームで動き、このページ・Cookie・保存データには触れません。ただしフレーム内からの外部通信までは防げません（あなたが書いたコードと同じ権限で動きます）。出どころの分からないコードは実行しないでください。

できないこと: npm パッケージの import・サーバー側の実行・他人との共有（URL にコードは入れません）はできません。alert・prompt は表示されず、コンソールに記録されます。

HTML1 行
CSS1 行
JavaScript1 行
入力が止まって 0.8 秒後に実行します。無限ループを書いたときは「停止」を押してください。 Ctrl + Enter でも実行できます。
実行結果

まだ実行していません。「実行」を押すと、ここに結果が表示されます（ページを開いただけでは実行しません）。

コンソール

console.log などの出力と、キャッチされなかったエラーがここに表示されます。

コードだけを、このブラウザの localStorage に保存します（サーバーには送りません）。

使い方

  1. index.html
    style.css・app.js

    コードを書く

  2. プレビューサーバーには送らない
    console の出力

    隔離された枠の中で実行

HTML・CSS・JavaScript を書いて、その場で動きを確かめる流れ

  1. 上のテンプレート（空・Flexbox・Grid・Canvas）かサンプルを選ぶか、HTML・CSS・JavaScript の各エディタに自分のコードを書きます。

  2. 「実行」（Ctrl + Enter）を押します。右のプレビューに結果、下のコンソールに console.log・警告・エラーが表示されます。

  3. 「編集後に自動実行」を入れると、入力が止まって 0.8 秒後に自動で実行します。

  4. 無限ループなどで固まったら「停止」を押します。フレームを破棄するので、コードを直して「実行」で再開できます。

  5. 「HTML ファイルとして書き出す」で、3 つのコードを 1 つの .html にまとめて保存します。「このブラウザに保存」を入れると、コードだけを localStorage に残せます。

できること

コードは隔離されたフレームで実行

実行するコードは sandbox="allow-scripts" だけを付けた iframe に入れます。same-origin 権限は付けないため、このページの DOM・Cookie・localStorage には触れません。このページ全体の遷移・ポップアップ・フォーム送信・ファイルの自動ダウンロード・alert や prompt の表示もできません（フレーム内だけを別のページへ移す遷移は可能です）。

console と例外を表示

console.log・info・warn・error・debug の出力と、キャッチされなかった例外・Promise の拒否をコンソールに表示します。JavaScript のエディタ内で起きたエラーには行番号を付けます。

「停止」でフレームごと作り直し

停止するとフレームを破棄し、自動実行も止めます。起動時や保存したコードの読み込み時には自動で実行しないので、無限ループを保存していてもページが開けなくなることを避けられます。

3 つのエディタに行番号つき

HTML・CSS・JavaScript それぞれに行番号つきのエディタがあります。1 エディタ 20 万文字、3 つの合計 40 万文字までです。

保存は端末の中だけ

任意で、コードだけを localStorage に保存できます。URL にコードを入れる共有リンクは作りません。保存はボタンでいつでも削除できます。

こんなときに

  • レイアウトや CSS（Flexbox・Grid）の挙動を、環境構築なしで手早く確かめたい
  • JavaScript の短い断片を実行して、console の出力やエラー行を見たい
  • Canvas の描画や DOM 操作の簡単な実験をしたい
  • 学習中のコードを手元のブラウザだけで試し、1 つの HTML として持ち帰りたい

対応状況

機能対応補足
HTML・CSS・JavaScript の実行とプレビュー対応隔離された iframe で動作
console の出力・未処理エラー（JS の行番号つき）の表示対応—
自動実行・手動実行・停止対応自動実行は初期設定でオフ
HTML ファイルとして書き出し対応3 つのコードを 1 つの .html にまとめます
localStorage への保存（コードのみ）対応任意・いつでも削除可
外部への通信の制限非対応フレーム内のコードは fetch などで通信できます。出どころの分からないコードは実行しないでください
npm パッケージの import・TypeScript・SCSS などのビルド非対応ブラウザがそのまま解釈する HTML・CSS・JavaScript のみ
サーバー側のコード実行非対応ブラウザの中だけで動きます
他人との共有（URL・ライブラリンク）非対応コードを URL に入れません。HTML ファイルを書き出して渡してください
alert・confirm・prompt のダイアログ一部対応表示せず、コンソールに記録します

制限・注意事項

  • 1 つのエディタは 20 万文字、3 つの合計は 40 万文字までです。
  • コンソールには最大 500 件まで記録します。
  • 無限ループはブラウザの実装によってはタブ全体が重くなることがあります。固まったら自動実行を切り、「停止」を押してください。ページを開いただけでは実行しません。
  • 行番号は JavaScript のエディタ内で起きた未処理エラーにだけ付きます。HTML に書いた inline スクリプトのエラーには付きません。
  • 隔離しているのはこのページへのアクセスです。フレーム内のコードからの外部通信は防げません。
  • スマホでも実行できますが、3 つのエディタでのコード編集は PC を推奨します。

プライバシーと安全性

書いたコードはブラウザの中でだけ処理し、サーバーには送りません。保存を入れたときだけ、コードをこのブラウザの localStorage に置きます（いつでも削除できます）。実行したコードが通信を行う場合、その通信はあなたのコードによるものです。

よくある質問

HTML をオンラインで実行できますか？
できます。HTML・CSS・JavaScript を書いて「実行」を押すと、隔離されたフレームの中で動いた結果がプレビューに表示されます。実行はあなたのブラウザの中だけで行います。
書いたコードがこのサイトに影響することはありますか？
このページの DOM・Cookie・localStorage には触れない設定で実行します（sandbox="allow-scripts" のみ）。ただし、フレーム内のコードは外部へ通信できるため、他人から渡されたコードや出どころの分からないコードは貼らないでください。
ほかのオンラインのコードプレイグラウンドの代わりになりますか？
単一ページの HTML・CSS・JavaScript を試す用途なら使えます。npm パッケージの import、TypeScript・SCSS のビルド、他人との共有リンクはありません。
無限ループを書いてしまったらどうなりますか？
「停止」を押すとフレームを破棄します。ブラウザによってはループ中にタブ全体の反応が鈍くなることがあるため、普段は自動実行を切っておくことをおすすめします。ページを開いたときやコードを読み込んだときは自動で実行しません。
alert や prompt は使えますか？
使えません。ダイアログは出さず、呼び出した内容をコンソールに警告として記録します。confirm は常に false、prompt は常に null を返します。
コードは保存されますか？
「このブラウザに保存」を入れたときだけ、コードをこのブラウザの localStorage に保存します。サーバーには送らず、「保存を削除」でいつでも消せます。

コード整形・圧縮（Code Formatter）

コードを貼り付けるだけで、言語を自動判定して整形できます。インデント・1 行の幅・セミコロン・引用符・末尾カンマを選べ、JavaScript・CSS・HTML は圧縮前後のサイズと削減率も表示。入力は端末の外へ出ません。

アップロードなし

Markdown エディター・プレビュー（Markdown Studio）

左に書くと右にすぐ反映される Markdown エディターです。表の縦線をそろえる整形、目次の自動作成、HTML 出力に対応し、スクリプトは常に無害化、外部画像はオンにしたときだけ読み込みます。

アップロードなし

正規表現テスター（Regex Tester）

パターンを入力すると、一致した箇所がテスト文字列の上で即座に色付けされます。キャプチャグループ・置換結果・パターンの意味まで一画面で確認でき、ブラウザを固まらせる危険なパターンは 1 秒で自動停止します。

アップロードなし

テキスト・コード Diff

変更前と変更後を貼り付けるかファイルをドロップするだけで、追加・削除された行と、行の中で変わった単語まで色分けして表示します。結果は unified 形式のパッチとしてコピー・保存でき、入力はブラウザの外へ出ません。

アップロードなし

UUID / ULID / NanoID / トークン生成

ページを開いた瞬間に UUID が 1 件生成済み。種類を選ぶだけで UUID v7・ULID・NanoID・ランダムトークンに切り替わり、最大 1 万件を .txt / .csv / .json で保存できます。既存の UUID や ULID を貼り付ければ、埋め込まれた時刻やバージョンも読み取れます。

アップロードなし

JSON 整形・検証（JSON Studio）

JSON を貼り付けるだけで整形・1 行化・構文チェック。エラーは「何行目の何が悪いか」まで表示し、コメントや末尾カンマは自動修復できます。データは端末の外へ送信しません。

アップロードなし

最終更新: