フレームワークを整える
中級HTML/CSS/JS を整える。
＝ フレームワークなしで、Web の土台がどう動くかを手を動かして確かめる
サンプルコード（クリックでエディタに挿入）
「▶ 実行」を押すと、ここに結果が表示されます。
CONSOLE
console.log の出力とエラーがここに出ます。
無限ループなど重い処理を書くと、プレビューが固まることがあります。「■ 停止」でプレビューを作り直せます。
このページについて
ここで動くのは本物のブラウザのエンジンです。書いた HTML・CSS・JavaScript を、サンドボックス化した（allow-scripts のみの）iframe の中でそのまま実行します。 外部ライブラリは読み込みません。
書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。 プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
このツールについて
ReactもVueも、土台は同じ HTML・CSS・JavaScript です。ここではフレームワークを使わず、3つがどう組み合わさって画面が動くかを、実際に書いて確かめられます。
フレームワークなしの素の HTML・CSS・JavaScriptを、サンドボックス化した iframe で動かして確かめる練習場。HTML/CSS/JS の3タブエディタとプレビュー＋console。他のフレームワーク練習場の土台です。
主な機能
- 4サンプル（Hello World・状態とイベント・一覧描画・CSS 変数のテーマ切替）
- HTML/CSS/JS の3タブエディタ（CodeMirror 6）とプレビュー iframe＋console の2カラム
- 「■ 停止」でプレビュー iframe を作り直せる
- 外部ライブラリなし・フレームワーク練習場シリーズ共通の土台
- 送信ゼロ・サンドボックス iframe はこのページや端末のデータに触れない
よくある質問
Q. なぜフレームワークなしのページがあるのですか？
A. 各フレームワーク練習場の土台になる、素の HTML・CSS・JavaScript の動きを先に体験するためです。同じサンドボックスの仕組みを全ページで使っています。
Q. 無限ループを書いたらどうなりますか？
A. プレビューのタブが固まることがあります。「■ 停止」でプレビューの iframe を作り直せます。
Q. 外部への通信は発生しますか？
A. このページは外部ライブラリを読み込まないため発生しません。書いたコードも結果も端末内で完結します（送信ゼロ）。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
