フレームワークを整える
初級Preact を整える。
＝ React と同じ API を、JSX コンパイラなしの htm テンプレートで動かす練習場
Preact が初めての方は、先に そもそも Preact とは・どんな場面で使うか をどうぞ。
サンプルコード（クリックでエディタに挿入）
「▶ 実行」を押すと、ここに結果が表示されます。
コンソール
console.log の出力とエラーがここに出ます。
「④ useEffect（タイマー）」は1秒ごとに再描画します。「■ 停止」を押すとタイマーごと片付きます（プレビューの iframe を作り直すため）。 無限ループなど重い処理を書くと、プレビューが固まることがあります。
そもそも Preact とは
React とほぼ同じ書き方で、ずっと小さく動く UI の道具。
Preact は、画面を「コンポーネント」という部品の組み合わせで作る JavaScript のUI ライブラリです。ボタンや一覧などを関数として書き、状態が変わると画面が更新されます。React と互換性のある API を持ちながら、配布サイズがとても小さいのが最大の特長です。
React 向けに書かれたコードの多くを、少しの調整で動かせます（互換レイヤーを使う方法もあります）。画面の表示を軽くしたい場面や、ページの一部にだけ動く部品を足したい場面でよく選ばれます。
どこで・どんな場面で使うか
-
読み込みの軽さが大事なページ
サイズが小さいぶん読み込みが速く、回線が細い環境でも画面が早く出ます。
-
既存ページの一部だけを動かす
ビルド環境を大きく作らず、サイトの一部に動く部品を足したいときに使われます。
-
埋め込みウィジェット
他のサイトに貼り付けて使う小さな部品など、配布サイズを抑えたいものに向きます。
-
React の学習・移行の足がかり
コンポーネント、props、hooks といった考え方は React と共通で、学んだことが活きます。
-
ビルドなしの試作
htm と組み合わせると、JSX の変換なしでブラウザだけで動かせます。この練習場もその方式です。
向いている場面・向いていない場面
- 向いている：サイズと速さを重視する画面。React の書き方に慣れていれば、そのまま使えます。
- 向いている：小さな部品をページに足す、ビルドなしで試すなど、身軽に始めたいとき。
- 注意：React 向けの周辺ライブラリをそのまま使うには、互換レイヤーなどの調整が必要な場合があります。
上のプレイグラウンドで、コンポーネントを書き換えて、右側のプレビューにどう反映されるかを試してみてください。
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の「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
続けて整える
データの時点：各ページに記載の版（各プロジェクトの公式リリース）
