授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
Reactの概要と役割を説明できる（記憶）
宣言的UIと命令的UIの違いを説明できる（総合）
Reactの描画フローを図示できる（総合） |
Reactとは何か
宣言的UIとは何か（データ → UI）
命令的UI（DOM操作）との対比
仮想DOMと再描画の流れ
TypeScript環境構築（Vite + React + TS） |
| 【理解度確認】課題：JSXでプロフィールカード作成 |
| 2 |
JSXの基本的な書き方を説明できる(記憶)
コンポーネントを定義できる（適用）
Propsの役割を説明できる（記憶）
Props型を定義できる（適用）
型エラーの原因を特定できる（評価） |
JSXの基本文法
{} による式埋め込み
コンポーネント分割の考え方
Propsによるデータ受け渡し
TypeScript型定義（type / interface）
型エラーの読み方
再利用性の概念 |
| 【理解度確認】課題：ProfileCard コンポーネント作成、型エラー原因を文章で説明（150字） |
| 3 |
useState を用いて状態管理できる（適用）
状態と通常変数の違いを説明できる（総合）
再レンダリングの仕組みを説明できる（総合）
状態の誤用を識別できる（同定） |
Stateの概念
useState
状態更新と再描画
イベントハンドラ基礎
データ駆動UI |
| 【理解度確認】課題：カウンター作成 |
| 4 |
条件レンダリングを実装できる（適用）
三項演算子と論理演算子を使い分けられる（適用）
条件分岐設計の妥当性を評価できる（評価）
表示ロジックの誤りを識別できる（同定） |
JSX内での条件分岐
三項演算子
論理演算子
boolean型の明示
表示制御パターン |
| 【理解度確認】課題：簡易的なログインUI作成(3種類の条件レンダリングで実装) |
| 5 |
配列からリスト描画できる（適用）
key の役割を説明できる（記憶）
不適切なkey使用を識別できる（同定）
index使用による問題を評価できる（評価）
再レンダリングと状態保持の関係を説明できる（総合） |
map() による描画
keyの意味
再レンダリングの仕組み
indexをkeyにした場合の問題
パフォーマンスと状態バグ |
| 【理解度確認】課題：map()を使った画面の作成 |
| 6 |
イベントを型付きで実装できる（適用）
SyntheticEventを説明できる（記憶）
イベント型エラーを特定できる（評価）
フォーム状態管理を実装できる（適用） |
イベントハンドラとの連携
React.ChangeEvent
入力フォーム制御 |
| 【理解度確認】課題：Todo追加フォーム実装 型エラー修正演習 修正理由の説明（150字） |
| 7 |
Stateを親へ持ち上げられる（適用）
単一情報源の原則を説明できる（記憶）
不適切な状態分散を識別できる（同定）
状態設計の妥当性を評価できる（評価）
データフロー図を作成できる（総合） |
Lifting State Up
Single Source of Truth
状態設計の原則
コンポーネント分割と責務 |
| 【理解度確認】課題：簡単なアプリ作成の作成 |
| 8 |
状態遷移図を作成できる（総合）
複雑な状態変化を整理できる（評価）
useReducer を用いて状態管理を実装できる（適用）
Action型を定義できる（適用）
useState と useReducer の使い分けを説明できる（総合） |
状態遷移図（ステートマシン）の基礎
状態・イベント・遷移の整理方法
useReducer の基本構造
ActionのUnion型定義
Reducer関数の設計原則
useState との比較 |
| 【理解度確認】課題：Todoアプリの改良 Todoアプリの状態遷移図を手書きで作成提出 その図をもとに useReducer で実装 |
| 9 |
useEffect を正しく実装できる（適用）
依存配列の役割を説明できる（記憶）
クリーンアップ関数を実装できる（適用）
StrictModeにおけるEffect二重実行の理由を説明できる（総合）
メモリリークや競合状態の原因を評価できる（評価） |
副作用の定義
useEffect の基本構文
依存配列の挙動
クリーンアップ関数の役割
メモリリーク防止
競合状態防止
StrictModeでEffectが2回実行される理由
fetchによるAPI通信
AbortControllerによるキャンセル処理
レスポンス型定義（TypeScript） |
| 【理解度確認】課題：useEffectを用いたアプリの作成 |
| 10 |
状態構造を設計できる（総合）
冗長な状態を識別できる（同定）
状態の正規化を適用できる（適用）
状態設計の妥当性を評価できる（評価） |
状態設計の原則
冗長状態の問題
派生状態の扱い
正規化の概念
フォーム状態の設計改善例 |
| 【理解度確認】課題：不適切なState設計コードを改善 改善前後の比較表提出 設計判断理由を200字で記述 |
| 11 |
useRef を用いたDOM参照ができる（適用）
StateとRefの違いを説明できる（総合）
不適切なref使用を識別できる（同定）
再レンダリングを伴わない値保持を説明できる（記憶） |
useRef の基本
DOMフォーカス制御
再描画しない値の保持
refの誤用例
宣言的思想との関係整理 |
| 【理解度確認】課題：入力フォーム自動フォーカス機能実装 |
| 12 |
SPAの概念を説明できる（記憶）
ルーティングを実装できる（適用）
URL設計を作成できる（総合）
ページ構成の妥当性を評価できる（評価） |
SPAの構造
React Router基礎
パラメータ付きルート
ナビゲーション設計
ページ分割の考え方 |
| 【理解度確認】課題：3ページ構成SPA作成 |
| 13 |
SPAとSSRの違いを説明できる（総合）
Next.jsの役割を説明できる（記憶）
App Router構造を識別できる（同定）
最小構成ページを作成できる（適用） |
React単体との違い
SSRとは何か
ファイルベースルーティング
app/page.tsx
layout.tsx
自動ルーティング体験
Vercelとの親和性 |
| 【理解度確認】課題：Next.jsを用いて複数ページから成るWebアプリを作成 |
| 14 |
GitとGitHubの連携ができる（適用）
差分から変更意図を読み取れる（評価）
AIを用いて改善案を生成できる（適用）
AI生成コードの妥当性を評価できる（評価） |
diffの読み方
コミットメッセージ設計
AIによるリファクタリング依頼方法
AI出力の批評方法 |
| 【理解度確認】課題：GitHubからVercelにデプロイ |
| 15 |
React設計思想を説明できる（総合）
自作アプリのアーキテクチャを説明できる（総合） |
アプリの実装(それぞれ自分のレベルに合わせてアプリを作成) |
| 【理解度確認】最終課題の提出(GitHub) コンポーネント構成図提出 |
