コッコ隊長の勉強部屋

状態管理ライブラリ概説（Redux Toolkit / Zustand など） なぜ専用ライブラリが必要になるのか？ useState / useReducer / Context だけでも、ある程度までは頑張れますが、規模が大きくなると次のような問題が出てきます： どのコンポーネントが「どの C...

Jest ＋ React Testing Library の使い方 何を組み合わせて使うのか？ フロントエンドのテストでよく出てくるのはこの3つです： Jest⇒ テストランナー（test(...)・expect(...) を提供するやつ） React Testing Library（@testing-library/react）⇒ React...

パフォーマンス最適化とメモ化 そもそも「再レンダリング」はいつ起きる？ Reactコンポーネントは、ざっくり言うと次のときに再レンダリングされます： 自分のstateが変わったとき 親が再レンダリングされて、自分へのpropsが変わったとき （コンテキスト...

Reactのスタイリング手法 Reactでのスタイリングの選択肢 まずは「種類が多すぎてよく分からない状態」を整理しておきます。 Reactでよく使われるスタイル手法はざっくりこのあたりです： 素のCSS（グローバルCSS） index.css みたいな普通のCSSファイルに...

カスタムフックとロジックの再利用 カスタムフックとは 一言でいうと、「自分で作る useState / useEffect 的な関数」です。 条件はこれだけ： 関数名が use から始まる 中で useState や useEffect など 他のフックを使う 例： function useToggle(initia...

useReducerとロジックの整理 useReducer とは（useStateとの関係） useState 「単純な状態」をサクッと管理するのに向いている 小さいコンポーネントではこれだけで十分 useReducer 状態の構造が少し複雑になってきたときに、「状態更新のロジックを1か所...

コンテキストとグローバル状態 なぜContextが必要になるのか？（Prop Drilling問題） まず前提の「つらい状態」から。 よくある構造： App ├─ Layout │ └─ Sidebar │ └─ UserPanel │ └─ UserAvatar ここで、「ログイン中ユーザー情報 currentUser を UserA...

ルーティング（React Router） なぜルーティングが必要か？ ここまでで、「1画面の中にコンポーネントを並べて、状態とイベントで「動くUI」を作る」ところまでは来ました。 でも実際のアプリは： / … トップページ /todos … Todo一覧 /todos/123 … Todo詳...

API通信とデータ取得 最小構成：useEffect + fetch のパターン まずは「マウント時に1回だけAPIを叩いて一覧を表示する」最小パターンから。 import { useState, useEffect } from 'react' export default function PostList() { const [posts, se...

副作用とライフサイクル（useEffect） 「副作用」とは 純粋な部分（レンダリング） return <div>...</div> でUIを組み立てる部分 引数（props/state）が同じなら常に同じUIが返るのが理想 副作用（Side Effect） レンダリング以外の外部に影響...