React
React状態管理の深掘り #6 どのツールをいつ使うか — 決定ガイド
組み込みツールからTanStack Query、Zustand、Jotai、Redux Toolkitまでを1枚の決定フローにまとめます。状況別に何を取り出すか、よくある落とし穴は何かを整理するシリーズのまとめです。
React状態管理の深掘り #5 Redux Toolkitとレガシーの文脈
一時代を支配し、今も多くのコードベースに残るReduxを、現在の推奨形であるRedux Toolkitで整理します。スライス、ストア、useSelectorと、新しいプロジェクトでの位置づけを押さえます。
React状態管理の深掘り #4 Jotaiと原子（atom）モデル
状態を1つのストアではなく小さな原子に分けて組み立てる、Jotaiのボトムアップモデルを扱います。原子、派生原子、useAtomの挙動と、Zustandとの違いを整理します。
React状態管理の深掘り #3 Zustandで扱う軽量なクライアント状態
Providerなしで、最小限のボイラープレートでグローバルなクライアント状態を共有するZustandを扱います。ストアの生成、セレクターによる再レンダリング最適化、persistミドルウェアまで整理します。
React状態管理の深掘り #2 TanStack Queryで扱うサーバー状態
useEffectとuseStateで書いていたデータ取得をTanStack Queryに移すと、キャッシュ、再取得、ローディングとエラー処理が自動で付いてきます。useQueryとuseMutationの核心を整理します。
React状態管理の深掘り #1 クライアント状態とサーバー状態の違い
useStateだけでは足りなくなる地点を押さえ、クライアント状態とサーバー状態を区別するメンタルモデルを立てます。状態管理ツールを選ぶ出発点です。
Next.jsでショップを作る #4 チェックアウトと決済シミュレーション
Server Actionsで注文を作成し、偽の決済ゲートウェイで成功/失敗をシミュレーションします。useActionStateとuseFormStatusでフォーム状態を扱う実戦パターンまで整理します。
Next.jsでショップを作る #3 カート
Client ContextとlocalStorageでカートの状態を管理します。リロードしても維持される永続カート、数量変更、合計計算、hydration安全パターンまで整理します。
Next.jsでショップを作る #2 商品カタログ
Server Componentで商品一覧と詳細ページを作り、searchParamsでカテゴリフィルタを付けます。next/image、generateStaticParams、notFoundまで一度に整理します。
Next.jsでショップを作る #1 開始と設計
Next.js App RouterでECショップを一から作ります。最初の記事は要件、技術決定、ルート構造、商品データモデル、プロジェクトのセットアップまで整理します。
React の本を全文無料で公開しました — React: 入門から Next.js · TypeScript · フルスタックまで
React 19 + App Router + TypeScript を最初から標準に据え、入門からフルスタックまで扱う React 本を全文無料で公開しました。