フレームワークを整える
中級HTML/CSS/JS を整える。
＝ フレームワークなしで、Web の土台がどう動くかを手を動かして確かめる
HTML・CSS・JavaScript が初めての方は、先に そもそも HTML・CSS・JavaScript とは・どんな場面で使うか をどうぞ。
サンプルコード（クリックでエディタに挿入）
「▶ 実行」を押すと、ここに結果が表示されます。
コンソール
console.log の出力とエラーがここに出ます。
無限ループなど重い処理を書くと、プレビューが固まることがあります。「■ 停止」でプレビューを作り直せます。
そもそも HTML・CSS・JavaScript とは
Web ページを作る、3つの基本の言葉。
Web ページは、おもに3つの言葉でできています。HTMLは文章や画像、ボタンなどの中身と構造を、CSSは色や大きさ、並びなどの見た目を、JavaScriptはクリックに反応するなどの動きを担当します。
家に例えると、HTML が骨組み、CSS が内装、JavaScript が電気や設備です。どれもブラウザがそのまま理解できるので、特別な道具を入れなくても、1つのファイルで試せます。React や Vue など多くの道具は、この3つの上に作られています。
どこで・どんな場面で使うか
-
会社のホームページや LP
お知らせや問い合わせページなど、ほとんどのサイトの土台はこの3つです。
-
ブログ・WordPress のカスタマイズ
見た目の微調整や、表示の崩れの修正に HTML と CSS の知識が役立ちます。
-
メールの HTML や社内ページ
配信メールや、社内ポータルの小さな改善にも使います。
-
Web アプリ・フレームワークの前提
React や Vue も、最終的には HTML・CSS・JavaScript として動くため、基礎が分かると理解が早くなります。
-
学習・仕事の入り口
Web 制作やフロントエンド開発の最初の一歩で、基本情報などの学習でも名前が出てきます。
なぜ覚えておくと得か
- すべての Web の共通言語。どの道具や会社の現場に行っても、基礎として通用します。
- 自分で直せる範囲が広がる。文字の修正、色の変更、ボタンの追加などを制作会社に頼まずに済むことがあります。
- 次の学習が楽になる。フレームワークでつまずいたとき、基礎に戻って原因を切り分けられます。
上のエディタに HTML・CSS・JavaScript を書いて、右のプレビューで変化を試してみてください。
このページについて
ここで動くのは本物のブラウザのエンジンです。書いた 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の「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
続けて整える
この内容は、研修でも扱っています
totonoe.tech を運営する株式会社Koinobori は、法人向けの研修サービス「NOBORIBA®」も運営しています。 ここで手を動かした内容を、講師から教わる形の研修です。このページの道具は無料のまま、登録もいりません。
