入口と画面の形
Webの土台を確認し、JSXで最初の部品を描く。
SEE THE BIG PICTURE
Reactの学習ロードマップ
最初に全体を眺めて、ひとつずつ。基礎から応用へ進めます。
Reactの考え方は、Next.jsでも使う。
ReactはUIを部品と状態で表すライブラリ。Next.jsはReactを使い、URLやサーバー処理などアプリ全体の仕組みを組み合わせるフレームワークです。
全12レッスンの道しるべ
所要時間は本文と小さな演習の目安です。環境構築のトラブル対応、復習、最終制作の仕上げは別に時間を見込みます。
部品を使い、操作する
propsで違いを渡し、イベントとstateで変化を表す。
状態の流れを組み立てる
一覧、フォーム、共通の親を通して、一貫した画面を作る。
外の仕組みとつなぐ
必要性を判断してEffectとrefを使う。
整理して確かめる
状態の構成と、利用者が操作できる品質を整える。
一つ完成させる
学習リストを仕上げ、Next.jsへ進む準備をする。
コードを試す前に
01でViteのreactテンプレートを作り、JavaScript/JSXのブラウザー向けアプリとして02以降を試します。TypeScript、Router、DB、認証は前提にしません。12の統合例も保存はstateの範囲のみです。
短い学習用の例です。各App.jsxは独立した例で、順に追記して一つの完成品にする形式ではありません。ファイル名、依存関係、未定義部分の前提は注記に記載します。問題内の抜粋や空欄は、そのまま実行するための完成コードではありません。
開発環境の準備を確認する →始める前に
- HTML：見出し、リンク、ボタン、ラベル付き入力を読み書きする。
- CSS：class、余白、サイズ、Flexboxや狭い画面への対応を少しずつ確認する。
- JavaScript：変数、関数、配列、オブジェクト、map/filter、分割代入、import/exportを読めるようにする。
- 開発の道具：ファイル編集とターミナルのコマンド実行。01で小さく試す。
- 非同期処理は必要になってから：この基礎コースに通信の実装は必須ではない。テストのawaitや、今後のデータ取得で学ぶ。
- TypeScriptは前提にしない：コードはJavaScript/JSX。型の学習は基礎がつかめた後に追加できる。
役割の違いを比べる
| 観点 | React | Next.js |
|---|---|---|
| 中心の役割 | UIと操作をコンポーネントで組み立てる | Reactにアプリ全体の構成と規約を加える |
| URLごとの画面 | 必要なルーティングの仕組みを組み合わせる | App Routerなどの規約を用意する |
| 学習する部品 | props、state、イベント、Hooks | Reactの部品に加え、ページ・レイアウト・実行境界 |
| 今回の実行環境 | ViteのJavaScriptテンプレートで小さく実験する | 別コースでApp Routerから段階的に学ぶ |
Reactが得意なこと
部品を再利用できる
見た目と操作を役割ごとに分け、入力で違いを渡せる。
状態から表示を考えられる
DOMの変更手順より、データと表示の対応へ意識を向けられる。
学んだ基礎がつながる
Reactの部品の考え方を、Next.jsなどの構成でも使える。
道具を増やす前に考えること
次の選び方は公式の役割や制約をもとにした学習上の目安です。
最初の操作を小さく試す
入力とチェックボックスを持つ1画面。
Viteの独立した学習環境が分かりやすい。
この構成だけでRouterやデータ保存が揃うわけではない。
公式資料の役割・制約をもとにした選択の目安URLやサーバー処理が増える
一覧・詳細・ログイン後の編集画面。
フレームワークが用意する構成を比較する。
Next.jsを使う場合もReactの基礎とServer/Client境界の理解が必要。
公式資料の役割・制約をもとにした選択の目安選ぶときに、考えてみよう
- 小さな画面でReactの基礎を試す？ このコースのVite構成から始めよう。
- 複数URL、サーバーのデータ、更新や公開が必要？ Reactを理解したらNext.jsの地図へ進もう。
- ただ情報を読むページ？ 必要な操作の量から、Reactを導入する範囲を考えよう。
Webの基礎も必要：HTMLの意味、CSS、JavaScriptを飛ばすと原因を追いにくい。
道具の選択が残る：Router、保存、認証、運用などをReactだけで完結すると考えない。
状態の設計を丁寧に：重複state、直接変更、不要なEffectを増やさず、値の持ち主を決める。
YOUR FIRST SMALL PROJECT
今日の学習リストを完成させよう。
追加、完了、絞り込みを一つの画面へつなぐ小さな制作です。まずはstateだけで完成させ、永続保存は次の段階に分けます。
制作の目安：2〜4時間（目安）
- 表示の骨組み：見出し・フォーム・一覧を意味のあるHTMLと部品で作る。
- 操作と不変更新：空欄を防いで追加し、安定したIDで完了と削除を扱う。
- 状態の一貫性：共通の親へ項目を置き、残件数と表示一覧を計算する。
- 仕上げ：0件・全完了・再読み込みを確かめ、主要操作をテストする。
完成の目安
- テーマを追加でき、空白だけの入力はエラーになる
- 完了状態を変更しても項目のIDが変わらない
- 未完了の絞り込みと残件数が一致する
- 0件を文章で伝え、色だけに頼らない
- Tab・Enter・Spaceで主要操作ができる
- 主要操作のテストと本番ビルドを確認する
- 再読み込みで初期化される保存範囲を説明できる
この先の応用テーマ
Next.jsと実行境界
複数URLやサーバー側のデータ取得を組み合わせたいとき
App Router、Server/Client、取得と保存を段階的に学ぶ。
関連レッスン →独自Hook
同じ外部同期や状態のロジックを繰り返しているとき
まず動く部品を作り、再利用する理由が明確な処理を切り出す。
関連レッスン →大きな状態の整理
更新ルールと受け渡しが増え、追いにくくなったとき
局所stateを残しつつ、reducerとContextの役割を分けて必要な部分に使う。
関連レッスン →利用者の経路を広く検証
一人の練習から、他の人が使うアプリへ進むとき
入力の失敗、読み込み、通信の失敗、実ブラウザーでの操作を追加確認する。
関連レッスン →