119 件（5 / 5 ページ）
TanStack Query の useQueryClient で楽観的更新を実装する
useMutation の onMutate で UI を即時更新し、失敗時に onError でロールバックする楽観的更新の実装例。
Zod で外部 API レスポンスを型安全に検証する
fetch した外部 API レスポンスを Zod スキーマで検証し、型安全なデータとエラーを分離して扱う実装例。
Zod スキーマをフォームバリデーションと API レスポンス検証で共有する
同一の Zod スキーマを React Hook Form のバリデーションと fetch レスポンス検証の両方で再利用し、型定義の重複をなくす実装例。
Zustand の persist middleware でローカルストレージに状態を保存する
persist middleware を使い、Zustand の状態をローカルストレージに永続化してページリロード後も状態を維持する実装例。
Zustand の selector で不要な再レンダリングを防ぐ
useStore にセレクタ関数を渡し、参照する state を絞ることで不要な再レンダリングを防ぐ実装例。
MUI + React Hook Form で入力フォームを組む
MUI の TextField / Button を react-hook-form の Controller でラップし、Zod でバリデーションする実装例。MUI の非標準 input と react-hook-form を正しく接続する方法を扱う。
Next.js App Router の error.tsx でエラーハンドリングを実装する
App Router の error.tsx を使い、セグメント単位で非同期エラーをキャッチしてフォールバック UI を表示する実装例。
Next.js Middleware で未認証ユーザーをリダイレクトする
middleware.ts でリクエスト時に Cookie をチェックし、未認証ユーザーをログインページへリダイレクトするルート保護の実装例。
Redux Toolkit の createSlice でリデューサーとアクションをまとめる
createSlice でリデューサーとアクションを一括定義し、useSelector / useDispatch でコンポーネントから状態を読み書きする実装例。
Supabase でメール・パスワード認証を実装する
Next.js App Router + Supabase Auth を使ったメール/パスワード認証の実装例。サインアップ・ログイン・ログアウト・セッション管理（Server Components からの参照）を扱う。
TanStack Query でデータフェッチとローディング状態を管理する
TanStack Query を使ったデータフェッチ・ローディング・エラー状態管理の実装例。useQuery でシンプルに非同期状態を扱う。
TanStack Query の useMutation で POST / DELETE を管理する
useMutation を使い、フォーム送信・削除などの副作用操作を型安全に管理する実装例。成功・エラー・ローディング状態を宣言的に扱う。
Zustand + Immer で immutable な状態更新をシンプルに書く
Zustand の immer middleware を使い、ネストした状態をミュータブルな書き方で安全に更新する実装例。
Next.js App Router で Route Handler（API）を作る
App Router の Route Handler（route.ts）を使って GET / POST エンドポイントを実装する基本パターン。NextResponse と型安全なリクエスト処理を解説する。
Next.js の Image コンポーネントで画像を最適化する
next/image の Image コンポーネントを使った画像最適化の基本。サイズ指定・lazy loading・外部ドメイン許可の設定を解説する。
Radix UI の Dialog でアクセシブルなモーダルを作る
Radix UI の Dialog コンポーネントを使ってアクセシビリティに配慮したモーダルダイアログを実装する。Tailwind CSS でスタイリングする例も示す。
React Context で軽量なグローバル状態を管理する
useState + createContext + useContext を組み合わせてグローバルな状態を管理する最小パターン。Zustand などの外部ライブラリが不要なケースに適している。
useCallback と useMemo の使い分け
useCallback は関数の参照を、useMemo は計算結果をメモ化する。どちらをいつ使うべきかを最小サンプルで比較する。
Next.js 15 + React Hook Form + Zod でログインフォームを作る
Next.js App Router 環境で react-hook-form と zod を使ったログインフォームの実装例。クライアントバリデーションとエラー表示を型安全に扱う。
Next.js 15 Server Actions でフォーム送信を実装する
Next.js App Router の Server Actions を使ってフォーム送信を実装する例。useActionState と Zod によるサーバー側バリデーションを示す。
Next.js 15 + Zustand でモーダル状態管理を作る
Zustand を使ってモーダルの開閉状態をグローバルに管理する実装例。複数モーダルへの対応と型安全な設計を示す。
Playwright でログインフローの E2E テストを書く
Playwright を使ってログインフォームの E2E テストを実装する例。Page Object Model パターンと認証状態の再利用を示す。
Tailwind CSS でバリアント対応バッジコンポーネントを作る
Tailwind CSS の clsx / cva を使ってバリアント（color / size）を型安全に管理するバッジコンポーネントの実装例。