フレームワークを整える
中級React を整える。
＝ 「状態が変わると画面が描き直される」仕組みを、コードを書いて確かめる
React が初めての方は、先に そもそも React とは・どんな場面で使うか をどうぞ。
サンプルコード（クリックでエディタに挿入）
コンソール
コードを書いて「実行」を押すと、ここに console 出力とエラーが出ます。
無限ループを書くとタブが固まることがあります。そのときは「■ 停止」を押してください。
そもそも React とは
画面を「部品」の組み合わせで作る、UI 用の JavaScript ライブラリ。
React は、Web の画面（UI）を部品（コンポーネント）の組み合わせとして作るための JavaScript ライブラリです。「データがこう変わったら、画面はこうなる」と書いておくと、データが変わったときに画面の該当部分を React が更新してくれます。Meta（旧 Facebook）が中心になって開発し、オープンソースで公開されています。
公式には「フレームワーク」ではなくライブラリと位置づけられ、画面づくりに集中した道具です。ページの切り替え（ルーティング）などは別の部品や、Next.js のような React を土台にしたフレームワークと組み合わせて使います。Vue や Svelte は同じ「画面を作る道具」の仲間で、書き方や考え方が少しずつ違います。
どこで・どんな場面で使うか
-
Web アプリの画面づくり
管理画面、ダッシュボード、SNS のような「操作に応じて画面がよく変わる」サービスで広く使われています。
-
Next.js などの土台として
React を土台にしたフレームワークでサイト全体を作る構成も多く、実質的に React の知識が前提になります。
-
スマホアプリ（React Native）
同じ考え方でスマホアプリを作る React Native があり、画面の作り方の知識を活かせます。
-
求人・学習の場面
フロントエンド開発の求人で名前が挙がることが多く、学習教材や入門記事も豊富です。
-
社内ツールや画面部品の共有
ボタンや表を部品として使い回せるので、複数人・長期のプロジェクトで画面の統一を保ちやすくなります。
向いている場面・向いていない場面
- 向いている：操作で画面が頻繁に変わる、画面数の多いアプリ。部品に分けると、直す場所が見つけやすくなります。
- 向いている：チームで長く育てる開発。情報や人材が多く、周辺の道具も揃っています。
- 向いていない：文章が中心の静的なサイトや、少しだけ動きを付けたいページ。素の HTML や軽い道具のほうが手早く済みます。
上の練習場に短いコードを書いて「実行」を押し、データを変えると画面がどう変わるかを試してみてください。
React が向いている場面／向かない場面
自分に合うのはどれ？ 選び方を見る →仮想DOMでUIを組み立てる、最も採用例と日本語情報が多いライブラリ。
◎ 向いている場面
- ・ 求人・日本語の学習情報の多さを重視するとき（当サイト内で最も情報が多い）
- ・ 複数人・長期で保守する大きめのWebアプリ
- ・ コンポーネント単位のUIライブラリ（部品集）を多く使いたいとき
- ・ モバイルアプリ（React Native）まで技術を揃えたいとき
△ 向かない場面
- ・ 既存のHTMLページに少しだけ動きを足したいだけのとき（JSXやビルド環境が前提になり大掛かり）
- ・ とにかく最速で・学習コストをかけずに動かしたいとき
React は「JSX を JS に変換してから」動く。
ブラウザは JSX をそのまま読めません。このページでは typescript.js の変換機能（JSX 専用のオプション）を使い、React.createElement 呼び出しに変換してから classic script として実行しています。
- ①
useState — 状態を持つ
useState(0)は「現在値」と「更新用の関数」の組を返します。更新関数を呼ぶと、React がコンポーネントを再描画します。 - ②
props — 親から子へ値を渡す
コンポーネントは関数の引数のように
{ name, age }を受け取ります。子は props を書き換えられません（一方向のデータの流れ）。 - ③
key — 一覧の中の「どれ」を教える
配列を
mapで描画するとき、React はkeyを手がかりに「どの要素が変わったか」を判断します。インデックスではなく id のような一意な値を使うのが基本です。 - ④
useEffect — 画面反映のあとに動く
useEffect の中身は、レンダー本体が終わって画面に反映されたあとに実行されます。依存配列（
[count]）の値が変わるたび、前回分のクリーンアップ → 今回分の実行、の順で呼ばれます。
React（JSX）と Preact + htm の違い
上の「Preact + htm」タブでは、JSX の変換ステップなしで同じカウンタを書いています。
| 観点 | React（JSX） | Preact + htm |
|---|---|---|
| マークアップの書き方 | <div>{count}</div>（JSX） | html`…`（値はドル記号と波括弧で埋め込む）（タグ付きテンプレート） |
| 実行前の変換 | 必要（JSX → JS。ここでは typescript.js） | 不要（そのままブラウザの JS として動く） |
| 読み込み方 | UMD の <script>（classic script） | ESM の import（module script） |
| ライブラリ本体の大きさ | React + ReactDOM（比較的大きい） | Preact（数KB。React 互換 API） |
このページについて
ライブラリは cdn.jsdelivr.net から読み込みます。
書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。
プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
🌐 「React（JSX）」タブでは React 18.3.1 と ReactDOM 18.3.1（UMD）、 JSX 変換用の typescript.js（/typescript/ と同じ処理系）を、 「Preact + htm」タブでは Preact 10.29.8 と htm 3.1.1 を、 「実行」を押した最初の1回だけ取得します（プログラムを受け取るだけの通信で、書いたコードや実行結果は送られません）。
このツールについて
コンポーネント・props・状態（state）は、説明を読むだけではなかなか腹落ちしません。ここでは実際にコードを書き換えて実行し、画面と console の両方で「何が起きたか」を確認できます。
ブラウザ内 React 18 で useState・props・一覧描画・useEffect の順序を体験。JSX は typescript.js で変換してから実行。JSX 変換なしの Preact + htm 版にも切り替えられます。
主な機能
- 4サンプル（useState のカウンタ・props・一覧描画 map/key・useEffect の実行順序）
- JSX は typescript.js（/typescript/ と同じ処理系）で変換してから実行
- 「Preact + htm」タブで JSX 変換なしの同等コードに切り替え
- console 出力・エラー・停止ボタンつきのサンドボックス iframe
- React/ReactDOM/Preact/htm は cdn.jsdelivr.net から初回のみ・送信ゼロ
よくある質問
Q. 入力した React のコードはサーバーに送られますか？
A. 送られません。JSX の変換（typescript.js）も実行（React/ReactDOM）もブラウザ内で完結します。外へ出る通信は処理系のダウンロード（初回のみ）だけです。
Q. JSX はどうやって実行できるコードになるのですか？
A. /typescript/ と同じ typescript.js の transpileModule で JSX を React.createElement の呼び出しに変換してから実行しています。型検査はしていません。
Q. 「Preact + htm」タブは何が違いますか？
A. JSX の変換なしで、タグ付きテンプレートリテラル（html`...`）だけで同じ画面を書いた版です。Preact は数KB の軽量ライブラリで React と似た API を持っています。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
続けて整える
データの時点：各ページに記載の版（各プロジェクトの公式リリース）
この内容は、研修でも扱っています
totonoe.tech を運営する株式会社Koinobori は、法人向けの研修サービス「NOBORIBA®」も運営しています。 ここで手を動かした内容を、講師から教わる形の研修です。このページの道具は無料のまま、登録もいりません。
