フレームワークを整える
初級Preact を整える。
＝ React と同じ API を、JSX コンパイラなしの htm テンプレートで動かす練習場
サンプルコード（クリックでエディタに挿入）
「▶ 実行」を押すと、ここに結果が表示されます。
CONSOLE
console.log の出力とエラーがここに出ます。
「④ useEffect（タイマー）」は1秒ごとに再描画します。「■ 停止」を押すとタイマーごと片付きます（プレビューの iframe を作り直すため）。 無限ループなど重い処理を書くと、プレビューが固まることがあります。
Preact が向いている場面／向かない場面
自分に合うのはどれ？ 選び方を見る →React互換のAPIを、はるかに小さい配布サイズで動かす軽量版。
◎ 向いている場面
- ・配布サイズを最小にしたいが、Reactと同じAPI（useState等）の書き味も欲しいとき
- ・ReactのコードをPreact/compat経由でそのまま流用したいとき
- ・Deno製のFreshでSSRしたいとき
△ 向かない場面
- ・Reactそのものの求人量・ライブラリの豊富さを必要とするとき
- ・JSXの変換ステップなしで一切のビルドを避けたいとき
Preact は「JSX 変換なし」でも同じ書き味になる
htm のタグ付きテンプレートリテラル（html`...`）は、ブラウザがそのまま実行できる標準の JavaScript 構文です。ビルド環境（バンドラ・トランスパイラ）を用意しなくても、コンポーネント・props・hooks はそのまま使えます。
- ①
props — 親から子へ値を渡す
コンポーネントは関数の引数のように
{ name, age }を受け取ります。htm では別のコンポーネントをタグとして使うとき<${Component} .../>の形で書きます。 - ②
useState — 状態を持つ
useState(0)は React と同じ API です。「現在値」と「更新用の関数」の組を返し、更新関数を呼ぶと再描画されます。 - ③
key — 一覧の中の「どれ」を教える
配列を
mapで描画するとき、keyを手がかりに「どの要素が変わったか」を判断するのは React と同じです。 - ④
useEffect — 片付け（クリーンアップ）を必ず書く
setIntervalのように「動き続けるもの」を始めたら、useEffect が返す関数で必ず止めます。依存配列が空（[]）なので、最初の描画時に1回だけ実行されます。
React との違い（事実だけ）
/react/ の「Preact + htm」タブと同じ考え方を、こちらは4本のレッスンとして独立させたページです。
| 観点 | Preact + htm | React（JSX） |
|---|---|---|
| ライブラリ本体の大きさ | Preact（数KB。React 互換 API） | React + ReactDOM（比較的大きい） |
| API の互換性 | useState・useEffect 等、名前も使い方も React と同じ | （基準側） |
| マークアップの書き方 | html`<div>${count}</div>`（タグ付きテンプレート） | <div>{count}</div>（JSX） |
| 実行前の変換 | 不要（そのままブラウザの JS として動く） | 必要（JSX → JS のコンパイル） |
| 読み込み方（このページ／/react/） | ESM の import（module script） | UMD の <script>（classic script） |
このページについて
ここで動くのは本物の Preactです。htm 3.1.1 の「standalone」バインディング（Preact 本体を同梱した1ファイル）を、サンドボックス化した（allow-scripts のみの）iframe の中で ESM として import して実行します。
🌐 ライブラリは cdn.jsdelivr.net から読み込みます（https://cdn.jsdelivr.net/npm/[email protected]/preact/standalone.module.js）。
書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。
プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
このツールについて
Preact は React 互換の API を、はるかに小さい配布サイズで動かす軽量版です。ここでは JSX 変換を使わず、htm のタグ付きテンプレートリテラル（html`...`）だけでコンポーネントを書きます。
JSX コンパイラなしで、React と同じ API を htm のタグ付きテンプレートで書く練習場。コンポーネント・props・一覧の key・useEffect を4課題で。
主な機能
- 4課題（コンポーネントと props／useState／リストと key／useEffect のタイマー）
- htm の standalone（Preact 同梱）を配信元から ESM import
- JSX コンパイラ不要
- 選び方の枠で React との向き不向きを比較・送信ゼロ
よくある質問
Q. Preact と React は何が違いますか？
A. Preact は React と同じ API（useState・useEffect など）を、小さい配布サイズで提供するライブラリです。このページでは JSX コンパイラを使わず、htm のタグ付きテンプレートで同じことを書きます。
Q. なぜ JSX を使わないのですか？
A. JSX はブラウザがそのまま実行できないため、事前に JavaScript へ変換する処理が必要です。htm のタグ付きテンプレート（html`…`）は標準の JavaScript 構文なので、変換なしでブラウザが実行できます。
Q. preact 本体と preact/hooks を別々に読み込まないのはなぜですか？
A. htm の standalone は Preact 本体を同梱しています。別途 preact を読み込むと Preact が2つになり、hooks の内部状態が食い違って壊れる恐れがあるため、1ファイルだけを読み込んでいます。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
