react_index
挫折しないReact v19入門：TS完全対応【160章】ロードマップ
🌍 Module 1: 準備とTypeScriptの「考え方」 (1〜10章)
- 第1章：Reactってなに？ (「こんな感じにして！」と指示するだけでOKな考え方)
- 第2章：なんでReactなの？ (今までのやり方との違い)
- 第3章：「部品（コンポーネント）」っていう最強の考え方
- 第4章：準備運動：Node.js と VS Code を入れる (VS CodeがTSの最強の味方！)
- 第5章：Viteでプロジェクトを爆速で始める (
npm create vite@latest) - 第6章：テンプレートはもちろん
react-tsを選ぶ！ - 第7章：Viteが作ったフォルダの中身をのぞく (
.tsxファイルとtsconfig.jsonを発見) - 第8章：
npm run devでテスト用の画面を出す - 第9章：「Hello World!」最初の
.tsxファイルをいじってみる - 第10章：React開発に便利な道具（ブラウザ拡張）を入れる
🧱 Module 2: JSXと「型」のキホン (11〜20章)
- 第11章：JSXってなに？ (JSの中にHTMLっぽいのを書くルール)
- 第12章：JSXのルール (1) (部品の名前は[大文字]で、全体を一つのタグで囲む)
- 第13章：JSXのルール (2) (HTMLとちょっと違うとこ。
classじゃなくてclassNameとか) - 第14章：JSXの中にJavaScriptの変数を表示する (
{ }を使う) - 第15章：JSXでのインラインスタイル (
style={{}}← オブジェクトだからね) - 第16章：部品（コンポーネント）の作り方 (関数で作るのがイマドキ)
- 第17章：部品を別のファイルに分ける (
export / import) - 第18章：TSの
interfaceとtype、どっち使う？ (まずはtypeでOK) - 第19章：最初の「型定義」！ (部品が受け取るデータの「カタチ」を決める)
- 第20章：練習：自己紹介カード部品。まずは
Propsの型をtypeで定義してみる。
🎁 Module 3: Props（型付きデータの受け渡し） (21〜30章)
- 第21章：「Props」ってなに？ (親部品から子部品へのデータ)
- 第22章：Propsを渡す・受け取る (型定義があるから、VS Codeが「次なに？」って教えてくれる！)
- 第23章：
React.FCはもう古い？ (Propsの型を直接当てる、イマドキな書き方) - 第24章：
childrenの型はどう書く？ (React.ReactNodeっていうのを覚えよう) - 第25章：練習：
childrenと型定義を使ったカード部品を作る。 - 第26章：Propsの「分割代入」 (
(props)じゃなくて({ name, age })って書くやつ) - 第27章：Propsの型定義（
children編） (子要素を受け取る部品の型) - 第28章：Propsの型定義（関数 編） (親に「押されたよ！」って伝える関数の型)
- 第29章：練習：ボタン部品 (
Button.tsx) を作る (onClick関数をPropsで受け取る) - 第30章：Propsに「？」をつける (
name?: stringみたいなオプショナルな型)
🔄 Module 4: useStateとイベントの「型」 (31〜40章)
- 第31章：「状態 (State)」ってなに？ (部品が持ってる「変化する値」)
- 第32章：【フック】
useStateの基本。 - 第33章：
useStateと「型推論」 (カンタンなやつはTSが自動で型を付けてくれる。天才！) - 第34章：
useStateで明示的に型を付ける (useState<string | null>(null)みたいなやつ) - 第35章：イベント処理 (
onClick) - 第36章：イベントの「型」 (1) (
React.MouseEvent)。引数のeってナニモノ？ - 第37章：イベントの「型」 (2) (フォームの
React.ChangeEvent<HTMLInputElement>) - 第38章：練習：カウンターアプリ (型も意識して！)
- 第39章：「元のデータを直接変えちゃダメ」っていう大事なルール
- 第40章：練習：型を付けたフォーム入力。
e.target.valueを安全に使う。
📋 Module 5: UIの動的構築（型と一緒に） (41〜50章)
- 第41章：もしこうなら、これを見せる (1) (三項演算子
? :) - 第42章：もしこうなら, これを見せる (2) (
&&演算子) - 第43章：配列のデータを全部並べて表示する (
.map()) - 第44章：リストと
keyプロパティ (それぞれに目印をつける) - 第45章：練習：TODOリスト(表示のみ)。TODOアイテムの
type（型）も定義しよう。 - 第46章：
useStateでオブジェクト（複数のデータ）を扱うときの注意 - 第47章：練習：オブジェクトのStateを「イミュータブル（元のを変えず）」に更新する
- 第48章：
useStateで配列（並んだデータ）を扱うときの注意 - 第49章：練習：配列のStateにアイテムを追加する (
...スプレッド構文) - 第50章：練習：配列のStateからアイテムを削除/更新する (
.filter()/.map())
🎨 Module 6: スタイリング (51〜55章)
- 第51章：ReactでのCSSの当て方いろいろ
- 第52章：ぜんぶに効くCSS (
index.css) - 第53章：CSS Modules (「部品ごと」に効くCSS。これがオススメ！)
- 第54章：CSS Modules の使い方とイイところ
- 第55章：練習：CSS Modules でTODOリストをイイ感じにする
⏳ Module 7: useEffect（「表示」以外のウラ仕事） (56〜65章)
- 第56章：「副作用」ってなに？ (表示以外の仕事。通信とか、タイマーとか)
- 第57章：【フック】
useEffectの基本 - 第58章：
useEffectの「これを見張ってて」リスト (依存配列っていう) - 第59章：見張りリスト
[](最初に表示されたときに1回だけやる) - 第60章：見張りリスト
[state](特定の状況が変わったらやる) - 第61章：見張りリストなし (画面が変わるたびにやる。あんま使わん)
- 第62章：
useEffectの「お片付け」 (クリーンアップ関数) - 第63章：練習：
useEffectでページのタイトルを変える - 第64章：練習：タイマー（
setInterval）と、その止め方（お片付け） - 第65章：
useEffectでネットからデータを取ってくる (v19より古いやり方として知っとく)
🧩 Module 8: useReducer（型でガチガチに管理） (66〜70章)
- 第66章：
useStateだけじゃ大変になるとき - 第67章：【フック】
useReducerの基本 (「指示書」で状況を変える仕組み) - 第68章：
useReducerのキモ！Stateの型とActionの型をガッチリ定義する。 - 第69章：
useReducerとuseState、どっち使う？ - 第70章：練習：カウンターアプリを
useReducerで作り直す (Actionの型もちゃんと定義して！)
🌍 Module 9: useContext（型付きの「みんなのデータ」） (71〜80章)
- 第71章：Propsのバケツリレー問題 (データを上から下まで手渡しする面倒くささ)
- 第72章：
createContextで「データ置き場」を作る - 第73章：
createContextの型定義！nullを許容するテクニックが大事。 - 第74章：
Providerでデータを配る - 第75章：【フック】
useContext(v19より古いやり方) - 第76章：
useContextの型チェック (nullじゃないか確認するカスタムフック) - 第77章：
Providerを分ける (全部App.tsxに書かなくてもいい) - 第78章：練習：
useContextで「ユーザー名」をいろんな場所に表示する - 第79章：
useContextとuseStateを組み合わせる (全員で「状況」を共有する) - 第80章：練習：ダークモード切り替え (Contextの型定義もバッチリ！)
⚡ Module 10: 動きをサクサクにする (81〜90章)
- 第81章：Reactが画面を書き換える仕組み（再レンダリング）を知ろう
- 第82章：
React.memo(TSと相性抜群。Propsの型が同じなら再描画しない) - 第83章：
React.memoが効かない時 (Propsで「関数」を渡してる時) - 第84章：【フック】
useCallback(関数自体を覚えておく) - 第85章：練習：
React.memoとuseCallbackで子部品がムダに動かないようにする - 第86章：【フック】
useMemo(大変な計算の結果を覚えておく) - 第87章：練習：
useMemoで重たい計算をスキップする - 第88章：
useMemoとuseCallback、いつ使うの？ (使いすぎは逆にダメ) - 第89章：React Compiler の未来 (こいつが全部自動でやってくれるかも)
- 第90章：コラム：メモ化は「最適化」。まずは動くものを作ろう。
🤖 Module 11: useRef 集中講座 (91〜100章)
- 第91章：【フック】
useRefってなに？ - 第92章：
useStateとuseRefのガチな使い分け (画面が変わる？変わらない？) - 第93章：
useRefの使い方 (1) (画面は変わらないけど、覚えておきたい値) - 第94章：練習：タイマーIDを
useRefに保存する - 第95章：
useRefの使い方 (2) (HTMLタグを直接さわる) - 第96章：
useRefの型！ (useRef<HTMLInputElement>(null)がテンプレ) - 第97章：
refプロパティ (JSXでref={myRef}って書く) - 第98章：練習：型を付けた
useRefで、ページを開いたら入力欄にカーソルを合わせる - 第99章：
useRefで前の値（prevProps）を覚えておくテクニック - 第100章：練習：
useRefで<video>タグを再生・停止させる
🛠️ Module 12: 知ってると便利なフックたち (101〜110章)
- 第101章：【フック】
useLayoutEffect(useEffectとのちょっとした違い) - 第102章：
useEffectvsuseLayoutEffect(実行されるタイミングが違う) - 第103章：
useLayoutEffectが必要な時 (画面がチカッとする時) - 第104章：練習：
useLayoutEffectでDOMのサイズを測る - 第105章：【v19】
refをPropsみたいに渡す (昔はforwardRefってのが必要だった) - 第106章：
refをPropsで渡す時の型定義 - 第107章：練習：
refを受け取れるカスタムMyInput部品を作る - 第108章：【フック】
useImperativeHandle(refで「これだけ使っていいよ」と決める) - 第109章：練習：
useImperativeHandleでMyInputのfocusだけ公開する - 第110章：【フック】
useId(htmlForとidをつなぐのを手伝ってくれる)
🚀 Module 13: v19データ取得 use & Suspense (111〜120章)
- 第111章：復習：
useEffectでのデータ取得 (どこが大変だった？) - 第112章：【v19フック】
use(Promise)(ネットからデータを取ってくる最新のやり方) - 第113章：「サスペンド（中断）」っていう考え方
- 第114章：
Suspense(「読み込み中...」の表示が超カンタンに) - 第115章：
Suspenseのfallbackプロパティ - 第116章：練習：
useとSuspenseでAPIデータをカッコよく表示する - 第117章：
Suspenseを複数置く (滝のようにデータを読み込む) - 第118章：エラーの処理 (1) (
try-catchは使えない？) - 第119章：「エラーバウンダリ」の考え方 (エラーをキャッチする部品)
- 第120章：練習：
Suspenseとエラーバウンダリを組み合わせる
📄 Module 14: v19フォーム革命 Actions (121〜130章)
- 第121章：復習：
useStateとonSubmitのフォーム (従来のやり方) - 第122章：【v19】Form Actions の考え方 (
<form action={...}>) - 第123章：
actionに渡す非同期関数 - 第124章：練習：
actionでシンプルなフォーム送信 - 第125章：【v19フック】
useActionState(「送信中」「エラー」の状況を管理) - 第126章：練習：
useActionStateでエラーメッセージを表示する - 第127章：【v19フック】
useFormStatus(「送信中」かどうかを 子部品が 知る) - 第128章：練習：
useFormStatusで送信ボタンを「送信中...」に変える - 第129章：【v19フック】
useOptimistic(「たぶん成功するっしょ！」と先に見かけを変える) - 第130章：練習：
useOptimisticでTODOリストに即時反映させる
🔬 Module 15: カスタムフック（オリジナルのフック） (131〜140章)
- 第131章：カスタムフックってなに？ (ロジックを「再利用」する)
- 第132章：なぜただの関数じゃダメなの？ (フックを使ってるから！)
- 第133章：ルール：名前は
useで始める - 第134章：練習：
useToggle(ON/OFFを切り替えるフックを作る) - 第135章：カスタムフックの「戻り値」に型を付ける！ (これがTSの腕の見せ所)
- 第136章：練習：
useWindowSize(ブラウザのサイズを監視するフック) - 第137章：練習：
useLocalStorage(データをブラウザに保存するフック) - 第138章：【フック】
useDebugValue(オリジナルフックのバグ探し用) - 第139章：
useImmerの紹介 (データを変えるのをめっちゃ楽にする魔法) - 第140章：練習：
useStateをuseImmerに置き換えてみる
🗺️ Module 16: ルーティングとプロジェクト構成 (141〜150章)
- 第141章：SPA（シングルページアプリ）ってなに？
- 第142章：
react-router-domをインストール - 第143章：
BrowserRouterでアプリを囲む - 第144章：
RoutesとRouteでページの行き先を決める - 第145章：
<Link>でページを移動する - 第146章：
useParamsでURLのパラメータを取る (/user/123の123を取る) - 第147章：
useNavigateでコードからページ移動する - 第148章：フォルダの分け方 (みんどうしてる？)
- 第149章：絶対パスインポート (
../../地獄からの脱出) - 第150章：
index.ts(バレルファイル) でスッキリさせる
🏁 Module 17: テストと公開（ゴール！） (151〜160章)
- 第151章：なんでテストするの？ (未来の自分を助けるため！)
- 第152章：
VitestとReact Testing Library(Viteの標準装備) - 第153章：
renderとscreen(部品をテストの世界に呼び出す) - 第154章：
getBy...findBy...queryBy...の違い - 第155章：練習：カウンターアプリのテストを書いてみる
- 第156章：
@testing-library/user-event(ユーザーの操作をマネする) - 第157章：練習：クリック操作と、画面が変わったかどうかのテスト
- 第158章：
npm run build(公開用のファイルを作る) - 第159章：
distフォルダの中身を見てみる - 第160章：Vercel / Cloudflare Pages でネットに公開！ (ゴール！おつかれ！)
📡 Module 18: 非同期データの最強管理術 (TanStack Query) (161〜170章)
- 第161章：「データ取得」の悩みどころ (ロード中管理・キャッシュ・二重送信...手動はツライ！)
- 第162章：TanStack Query の導入と
useQuery(たった1行でデータ取得が変わる) - 第163章：DevTools で「データの裏側」を覗く (今データが新鮮か腐ってるかが見える)
- 第164章：
queryKeyの設計 (キャッシュを区別する「住所」の決め方) - 第165章：ウィンドウフォーカスで自動更新 (タブを切り替えて戻ったら最新データ！)
- 第166章：練習：記事詳細ページのデータ取得とキャッシュ体験
- 第167章：
useMutationでデータを更新する (送信もしっかり管理) - 第168章：更新後の「キャッシュ無効化」 (古いデータを自動で捨てて再取得させる)
- 第169章：ロード画面とエラー画面のデラックス化 (
isPendingとisError) - 第170章：練習：TODOアプリを TanStack Query でリファクタリング
🐻 Module 19: グローバルステート管理の決定版 (Zustand) (171〜180章)
- 第171章：Context API の限界と Zustand の登場 (Reduxより簡単、Contextより速い)
- 第172章：最初の「ストア」を作る (
create関数ひとつでOK) - 第173章：コンポーネントでストアの値を使う (フックとして呼び出すだけ)
- 第174章：アクション（関数）でストアを更新する
- 第175章：Zustand の「セレクター」 (必要なデータが変わった時だけ再レンダリングさせる技術)
- 第176章：練習：カウンターアプリを Zustand で爆速作成
- 第177章：非同期アクション (API通信の結果をストアに入れるのもカンタン)
- 第178章：
persistミドルウェア (リロードしても消えないStateを作る) - 第179章：
immerミドルウェアとの合体 (ネストした深いオブジェクトも楽々更新) - 第180章：練習：Zustand で作る「ショッピングカート」機能
✍️ Module 20: フォームバリデーションの鉄板 (RHF & Zod) (181〜190章)
- 第181章：React のフォーム管理、ここがしんどい (State管理地獄からの脱出)
- 第182章：React Hook Form (RHF) の基本 (
register関数で紐付ける魔法) - 第183章：
handleSubmitで送信処理 (バリデーションOKな時だけ実行される) - 第184章：Zod ってなに？ (TypeScriptのための「スキーマ記述」ライブラリ)
- 第185章：RHF と Zod を合体させる (
zodResolverで最強タッグ) - 第186章：練習：メアドとパスワード（文字種チェック付き）のログインフォーム
- 第187章：エラーメッセージの出し分けとスタイリング
- 第188章：
useFieldArray(「項目を追加」ボタンで入力欄が増えるフォーム) - 第189章：RHF のパフォーマンス (入力しても他の場所再レンダリングしない！)
- 第190章：練習：Zod で厳密な型定義 + RHF でプロ級のお問い合わせフォーム
🔐 Module 21: ユーザー認証と「自分だけのアプリ」 (191〜200章)
- 第191章：そもそも「ログイン」って裏で何してるの？ (トークン？クッキー？)
- 第192章：BaaS (Supabase/Firebase) という選択肢 (サーバーを書かずに認証を作る)
- 第193章：保護されたルート (Private Route) (ログインしてない人を追い返す)
- 第194章：ログイン状態の維持 (リロードしてもログアウトしない)
- 第195章：ユーザープロフィールの取得と表示
- 第196章：練習：ログイン/新規登録フォームを作る
- 第197章：ログアウト機能
- 第198章：認証エラーのハンドリング (「パスワードが違います」)
- 第199章：セキュリティの基本 (XSSだけは気をつけて！)
- 第200章：練習：認証付きのメモアプリを完成させる
✨ Module 22: アニメーションで「プロ感」を出す (201〜210章)
- 第201章：動き (Motion) はUXの一部
- 第202章：Framer Motion の基本 (
<div />を<motion.div />に変えるだけ) - 第203章：マウントアニメーション (フワッと表示させる)
- 第204章：AnimatePresence (消える時にもアニメーションさせる)
- 第205章：リストの並び替えアニメーション (
layoutプロパティの魔法) - 第206章：ページ遷移アニメーション
- 第207章：ホバーとタップのフィードバック
- 第208章：ドラッグ操作の実装
- 第209章：スクロール連動アニメーション
- 第210章：練習：TODOリストに気持ちいい動きをつける
🧩 Module 23: UIライブラリで「車輪の再発明」を防ぐ (211〜220章)
- 第211章：全部自作してると日が暮れる (アクセシビリティ対応は難しい)
- 第212章：Headless UI ってなに？ (Radix UI / Headless UI)
- 第213章：Shadcn UI の概念 (今一番流行ってる「コピーして使う」スタイル)
- 第214章：アクセシブルなモーダルを導入する
- 第215章：ドロップダウンメニューの実装
- 第216章：トースト通知の実装 (「保存しました」って出るやつ)
- 第217章：カレンダー・日付選択
- 第218章：アイコンライブラリの選定 (Lucide React / React Icons)
- 第219章：スタイリングのカスタマイズ (Tailwind との組み合わせ)
- 第220章：練習：UIライブラリを使ってダッシュボード画面を組む