本文へスキップ

HTML・CSS・JavaScriptをそれぞれの欄に書くと、結果の画面とコンソールがその場で変わるオンラインのコードエディタです。登録は不要、コードはサーバーに送らず、共有リンク一本にまるごと載せて渡せます。

コード遊び場
HTML bodyの中に入ります
CSS 再読み込みなしで反映されます
JS 文書の最後で実行されます
結果 端末の中だけで動きます
コンソール

    console.logで出した値やエラーがここに表示されます。

    • 端末内で処理
    • アップロードなし
    • 登録不要

    よくある質問

    書いたコードはサーバーに送られますか?
    送られません。3つの欄の内容はこのブラウザの中だけで使われ、プレビューもブラウザ自身が描いています。共有リンクを作るときもコードはアドレスの#より後ろに載りますが、ブラウザは#より後ろをサーバーに送りません。書いた内容はこのブラウザだけに保存されるので、ほかの端末では見えません。
    作業した内容が消えたりしませんか?
    直すたびにこのブラウザへ自動で保存するので、閉じて開き直しても残っています。ただし保存先がブラウザなので、シークレットウィンドウを閉じたり閲覧データを消すと一緒に消えます。長く使うものは「ダウンロード」でHTML1枚として保存するか、「共有リンク」をどこかに控えてください。リンク自体にコードが入っているので、それさえあればどこでも同じように開けます。
    jQueryやReactのようなライブラリは使えますか?
    HTMLの欄に<script src="https://…">と書けば使えます。CDNのアドレスをそのまま書けますし、CSSのライブラリも<link rel="stylesheet" href="…">で同じように入れられます。ただしそのファイルはインターネットから受け取るので、オフラインではその部分だけ動きません。JSXやTypeScriptのように先に変換が必要な構文はそのままでは動きません — コード変換ツールでJSに直してから貼り付けてください。
    プレビューの中でlocalStorageが使えないようです。
    プレビューは出自(origin)を持たないサンドボックスで動きます。そうすることで、ここで動かしたコードがこのサイトの保存領域や画面に触れられなくなります — 人から送られた共有リンクを開く場面を考えれば、必要な囲いです。代わりに、コードが1行目で死なないようlocalStorage・sessionStorageを真似た一時的な保存場所を用意しています。値はその回だけ生き、実行し直すと空になります。クッキーも同じ理由で保存されません。
    画面が止まりました。終わらない繰り返しを書いてしまいました。
    プレビューは0.7秒ごとに「生きている」と知らせます。その合図が4秒以上途切れると帯が出て、自動実行が切れます — 切らないと文字を打つたびにまた固まるからです。「止める」を押すとプレビューを外します。ブラウザによってはプレビューがこのページと同じ処理の流れで動き、タブ全体が一瞬止まることもあります。そのときはタブを再読み込みしてください。書いていたコードは自動保存されているのでそのまま戻ります。
    エラーに出る行番号は自分のコード基準ですか?
    そのとおりです。プレビュー文書にはコンソールをつなぐコードとHTMLが前に入りますが、その分を引いてJS欄の1行目を1として知らせます。console.logで出した値もオブジェクト・配列・Map・DOM要素まで広げて表示し、循環参照があっても切って見せます。1回の実行でコンソールは500行までにしています — 繰り返しの中のconsole.logがこのページまで止めてしまうのを防ぐためです。
    完成したHTML文書をまるごと貼り付けてもいいですか?
    できます。HTMLの欄が<!doctype html>や<html>で始まっていれば、その文書をそのまま土台にします。html・head・bodyを別に作り直すことはなく、書かれた<title>やlangもそのままです。CSSの欄はheadの終わりに、JSの欄はbodyの終わりに足されます。断片だけを貼り付けた場合はbodyの中に入ります。
    CodePenのようなサービスと何が違いますか?
    登録がなく、コードがサーバーに保存されず、一度開いておけばインターネットが切れても使えます(アプリとして入れるとより確実です)。その代わりサーバーに保存しないので「自分の作品一覧」のようなものはなく、共有はコードを載せたリンクで行います。コードがとても長いとリンクに載りきらないことがあり、そのときはHTMLファイルとしてダウンロードして送れば大丈夫です。

    関連ツール