99 件
CSS Modules でスコープ付きスタイルのコンポーネントを作る
CSS Modules を使い、クラス名の衝突を避けたスコープ付きスタイルでコンポーネントを実装する例。Tailwind との使い分けと composes による再利用パターンも示す。
React Testing Library でコンポーネントをテストする
render / screen / userEvent を使い、コンポーネントの表示・インタラクション・非同期更新を単体テストする例。jest-custom-hook-test のフック版に対するコンポーネント版。
Jest + React Testing Library でカスタムフックをテストする
renderHook を使ってカスタムフックの動作を単体テストする例。act でステート更新をラップし、非同期フックの検証パターンも示す。
Jest の useFakeTimers でデバウンス・タイマー処理をテストする
jest.useFakeTimers() と jest.advanceTimersByTime() を使って、setTimeout / setInterval / デバウンス関数の時間依存処理を同期的にテストする例。
Jest で fetch をモックしてクライアントのデータ取得ロジックをテストする
jest.spyOn(global, 'fetch') または global.fetch のモック置換で、クライアント側のデータ取得関数の成功・エラー・ネットワーク障害ケースをテストする例。
Jest でモジュールをモックして単体テストを書く
jest.mock でモジュール・外部依存を差し替え、spy 関数で呼び出しを検証する例。API クライアントや Next.js の navigation モジュールをモックするパターンを示す。
Jest で Next.js Route Handler をテストする
Request / Response オブジェクトを直接渡して Route Handler 関数をユニットテストする例。GET / POST それぞれのハッピーパスとエラーパスを検証する。
Jest でスナップショットテストを書いてUI回帰を防ぐ
toMatchSnapshot / toMatchInlineSnapshot でコンポーネントの構造的回帰を検出する例。スナップショットの更新・管理方法とインラインスナップショットの使い分けも示す。
Next.js Route Handler でエラーレスポンスを型安全に統一する
Route Handler のエラーレスポンスを型付きで統一し、400 / 404 / 500 を一貫して扱うラッパー関数を実装する例。try/catch パターンとエラー型の整理も示す。
Next.js Route Handler でサーバーサイドキーワード検索を実装する
クエリパラメータで受け取ったキーワードを Route Handler でサーバーサイドフィルタし、ページネーション付きで返す例。クライアントのデバウンス入力と合わせた構成も示す。
Next.js Route Handler でクエリパラメータを使ってソートを実装する
sort キーと order（asc/desc）をクエリパラメータで受け取り、Route Handler でデータをソートして返すパターンと、クライアント側のソートボタン UI を示す例。
Next.js で認証状態に応じてページを redirect する
Server Component や Route Handler でセッションの有無を確認し、認証済みユーザーをダッシュボードへ、未認証ユーザーをログインページへ redirect するパターンの例。
Next.js で fetch キャッシュと revalidateTag を使ったキャッシュ制御
fetch の cache オプション（force-cache / no-store）と revalidateTag を組み合わせてデータ単位でキャッシュを制御する例。revalidatePath との使い分けも示す。
Next.js の cookies() で httpOnly セッション Cookie を管理する
next/headers の cookies() を使い、ログイン時に httpOnly セッション Cookie を発行し、Server Component・Route Handler・Middleware で読み書きする例。
Next.js Route Handler でファイルアップロードを受信・保存する
Route Handler で multipart/form-data を受信し、アップロードされたファイルをサーバー側に保存する例。ファイルサイズ・拡張子バリデーションパターンも示す。
Next.js の global-error.tsx でルートレベルのエラーをキャッチする
app/global-error.tsx を使い、ルートレイアウトを含む最上位のランタイムエラーをキャッチして reset ボタンで回復する実装例。error.tsx との責務の違いも示す。
Next.js Intercepting Routes で URL 付きモーダルを実装する
Intercepting Routes（(..) 記法）と Parallel Routes を組み合わせ、リスト画面の URL を維持したままモーダルで詳細を表示する実装例。
Next.js で not-found.tsx を使ってカスタム 404 ページを作る
notFound() 関数と not-found.tsx を組み合わせてカスタム 404 ページを実装する例。動的ルートでリソースが存在しない場合の処理パターンを示す。
React 19 の useOptimistic で楽観的 UI 更新を実装する
React 19 の useOptimistic を使い、Server Actions の完了を待たずに UI を即時更新し、失敗時に自動ロールバックする楽観的更新を実装する例。
Next.js App Router で URL 同期ページネーションを実装する
searchParams を受け取る Server Component と Link コンポーネントを使い、URL クエリ（?page=N）と同期したページネーションを実装する例。
Next.js App Router の layout で認証チェックして配下ページを保護する
App Router の layout.tsx でセッション Cookie を確認し、未認証ユーザーをログインページへ redirect することで配下のすべてのページを一括保護する例。
Next.js Route Handler で REST API（CRUD）を実装する
app/api/ 配下の Route Handler を使い、GET / POST / PUT / DELETE を備えた REST API を実装する例。インメモリデータを使ってシンプルに CRUD を示す。
Next.js Server Actions で CRUD を実装する
Server Actions と revalidatePath を使い、追加・更新・削除を含む CRUD 操作を実装する例。API ルートを作らずにフォームからサーバー処理を呼び出す。
Next.js で session cookie を削除してログアウトを実装する
Route Handler で httpOnly session cookie を削除してログアウト処理を実装し、Server Component でのセッション確認と合わせた認証フロー全体を示す例。
Next.js でファイルアップロードの進捗バーを表示する
XMLHttpRequest の progress イベントを使ってアップロード中の進捗率を取得し、プログレスバー UI でリアルタイム表示する実装例。
Playwright でログインから保護ページ到達までの認証フローを E2E テストする
Playwright でログインフォームへの入力・送信・Cookie 設定・保護ページへのリダイレクト確認・ログアウトまでの認証フローを E2E テストする例。
Playwright でファイルアップロードの E2E テストを書く
Playwright の setInputFiles を使って file input へのファイル選択をシミュレートし、アップロードの成功・エラー・複数ファイルケースを E2E テストする例。
Prisma と Route Handler で CRUD API を実装する
Prisma Client の findMany / create / update / delete を Route Handler から呼び出して CRUD API を構築する例。スキーマ定義からマイグレーション・型安全なクエリまでを示す。
Prisma で skip / take を使ったページネーションクエリを実装する
Prisma の skip / take / orderBy を使ったオフセットページネーションと、cursor ベースのページネーションのパターン、Route Handler との組み合わせ例。
Prisma でリレーションを含むクエリを書く（include / select / ネスト）
Prisma の include / select を使った 1対多・多対多のリレーション取得パターンと、ネストしたフィルタ・ソート・集計（_count）の例。
Prisma で論理削除（soft delete）を実装する
deletedAt フィールドを使った論理削除パターンを Prisma で実装し、通常クエリから削除済みレコードを自動除外する例。
React でコマンドパレット風のキーワードフィルタ UI を実装する
キーボードショートカットで開くモーダル内で候補リストをリアルタイムフィルタし、キーボードナビゲーションで選択するコマンドパレット UI の実装例。
React で Compound Component パターンを実装する
Context と Children を組み合わせた Compound Component パターンで、Tabs や Accordion のような柔軟な UI コンポーネントを実装する例。
Context と CSS カスタムプロパティでテーマシステムを構築する
React Context で現在のテーマを管理し、CSS カスタムプロパティ（CSS 変数）でコンポーネントがテーマを自動追従するシステムを実装する例。
制御コンポーネントと非制御コンポーネントの違いと使い分け
useState で値を管理する制御コンポーネントと、useRef で DOM を直接参照する非制御コンポーネントの違いを実装例で比較し、それぞれの適切なユースケースを示す。
useDebounce カスタムフックで検索入力をデバウンスする
useDebounce カスタムフックを自作し、検索入力のデバウンス処理を実装する例。lodash.debounce を使わず useEffect + setTimeout で実現する。
HTML5 Drag & Drop API でリストの順序を並べ替える
外部ライブラリを使わず HTML5 の Drag & Drop API（dragstart / dragover / drop イベント）でリストアイテムの順序をドラッグで並べ替える実装例。
React で再試行ボタン付きの ErrorBoundary を実装する
エラー発生時に「再試行」ボタンを表示し、state リセットで再レンダリングを促す ErrorBoundary パターンの実装例。
React でドラッグ＆ドロップ対応のファイル選択UIを実装する
DragEvent API を使いドラッグ＆ドロップでファイルを受け付けるクライアント UI を実装する例。ドロップゾーンの視覚フィードバックとクリック選択の併用パターンも示す。
React でファイル選択時に画像プレビューを表示する
FileReader や URL.createObjectURL を使い、ファイル選択直後にクライアント側で画像プレビューを表示するコンポーネント実装例。
IntersectionObserver カスタムフックで要素の可視性を検出する
useIntersectionObserver カスタムフックを自作し、要素が viewport に入ったことを検知して遅延ロードやスクロールアニメーションをトリガーする例。
React でチェックボックス複数選択フィルタを実装する
複数カテゴリのチェックボックスによる AND/OR フィルタリング UI をクライアントサイドで実装する例。フィルタロジックをコンポーネントから分離して管理する。
React でクリップボード貼り付け（Ctrl+V）から画像をアップロードする
ClipboardEvent の clipboardData.items を走査して image/* を抽出し、URL.createObjectURL でプレビュー表示してからサーバーへアップロードする UI パターン。
React で検索キーワードにマッチした文字列をハイライト表示する
入力された検索語と一致するテキスト部分を分割して <mark> タグや span で強調表示するコンポーネントの実装例。
React.lazy と Suspense・ErrorBoundary を組み合わせてコード分割する
React.lazy でコンポーネントを遅延読み込みし、Suspense でローディング表示、ErrorBoundary で読み込み失敗時のフォールバックを実装する例。
React で非同期処理の失敗時に Toast 通知を表示する
カスタム Toast コンポーネントと useToast フックを実装し、API エラーや非同期処理の失敗時に画面端にトースト通知を表示するパターン。
useReducer でフォームの状態とバリデーションを一元管理する
useReducer を使い、複数フィールドのフォーム状態・入力値・バリデーションエラーを単一の reducer で管理する例。外部ライブラリなしで複雑なフォームを扱う。
Redux Toolkit の RTK Query で API データフェッチとキャッシュを管理する
RTK Query の createApi でエンドポイントを定義し、useGetQuery / useMutation フックでデータフェッチ・キャッシュ・自動再フェッチを管理する例。
Storybook でコンポーネントの Story を書く
Storybook 8 の CSF3 形式で UI コンポーネントの Story を作成する例。args / argTypes / play 関数を使ったインタラクティブテストのパターンを示す。
Storybook の play 関数でインタラクションテストを書く
@storybook/test の userEvent と expect を使い、play 関数でユーザー操作をシミュレートしてコンポーネントの動作を Story 内で自動検証する例。
Tailwind CSS でアニメーションとトランジションを実装する
Tailwind CSS の animate-* / transition / duration / ease クラスを使い、フェード・スライド・スケール・スピンなどのアニメーションをコンポーネントに適用する例。
Tailwind CSS でダークモードを実装する（class strategy + localStorage）
Tailwind の class strategy と useState / localStorage を組み合わせてダークモードを実装する例。next-themes を使わずに自前でテーマ切り替えを管理する。
Tailwind CSS で空状態（EmptyState）UI を実装する
検索結果ゼロ・データ未登録・エラー後などの空状態に表示するコンポーネントを Tailwind CSS でスタイリングし、アイコン・メッセージ・アクションボタンを組み合わせたパターン集。
Tailwind CSS でフォーム部品（Input / Select / Checkbox / Radio）をスタイリングする
Tailwind CSS を使い Input / Select / Checkbox / Radio / Textarea などの基本フォーム部品に一貫したスタイルを適用するコンポーネント集。フォーカスリングやエラー状態のスタイルも示す。
Tailwind CSS でレスポンシブレイアウトを組む
Tailwind CSS のブレークポイントプレフィックス（sm / md / lg）を使い、モバイルファーストのレスポンシブレイアウトを実装する例。
Tailwind CSS でテーブル UI をスタイリングする
Tailwind CSS でレスポンシブ対応のテーブル UI を実装し、ヘッダー固定・行ホバー・ストライプ・空状態・ローディング状態のスタイルパターンをまとめた例。
TanStack Query でクライアントサイドページネーションを実装する
useQuery の page パラメータと keepPreviousData を使い、クライアントサイドでスムーズなページネーションを実装する例。
TanStack Query で Server Component からデータをプリフェッチする
Server Component で prefetchQuery を実行し HydrationBoundary でクライアントに渡すことで、ウォーターフォールなしに TanStack Query のキャッシュをハイドレートする例。
Zod の discriminatedUnion でバリアント型を型安全に処理する
z.discriminatedUnion を使い、status フィールドで分岐するバリアント型（成功 / エラー / ローディング等）を型安全にパース・絞り込む例。
Zod でネストオブジェクト・配列・transform を組み合わせてバリデーションする
Zod でネストされたオブジェクト・配列のバリデーションと、transform / refine / superRefine を使ったカスタム変換・クロスフィールド検証の例。
Next.js の cookies() でサーバーサイドのクッキーを読み書きする
App Router の cookies() を使い、Server Component・Server Actions・Route Handler でクッキーを読み書きする実装例。
Next.js の dynamic import でコンポーネントを遅延読み込みする
next/dynamic を使い、重いコンポーネントや SSR 不要なコンポーネントを遅延読み込みしてバンドルサイズを削減する実装例。
Zod で Next.js の環境変数を起動時に検証する
Zod スキーマで環境変数を定義・検証し、未設定の変数をビルド時または起動時に検出する実装例。
Next.js の Image コンポーネントで画像を最適化する
next/image を使い、自動リサイズ・WebP 変換・遅延読み込みを設定する実装例。外部ドメイン画像の許可設定も含む。
Next.js App Router の loading.tsx と Suspense でローディング UI を実装する
loading.tsx を配置するだけでルートセグメント単位のローディング UI が自動適用される仕組みと、Suspense を使った部分的な待機表示の実装例。
Next.js の Metadata API で title / description / OGP を設定する
metadata オブジェクトと generateMetadata を使い、静的・動的な SEO メタデータと OGP を設定する実装例。
Next.js の Parallel Routes で複数スロットを同時表示する
@スロット記法を使い、同一ページに複数の独立したルートコンテンツを並列表示する実装例。
Next.js の Route Groups で layout を分ける
Route Groups（括弧付きディレクトリ）を使い、URL 構造を変えずに異なる layout を適用する実装例。
Next.js の searchParams で URL 同期フィルタを実装する
searchParams を読み取り、URL クエリパラメータに基づいてサーバー側でリストをフィルタリングする実装例。
Next.js Server Actions でフォーム送信を処理する
Server Actions と useActionState を使い、クライアントコンポーネントからサーバー関数を直接呼び出してフォーム送信を処理する実装例。
React の ErrorBoundary コンポーネントでレンダリングエラーを捕捉する
クラスコンポーネントで ErrorBoundary を実装し、子コンポーネントのレンダリングエラーをフォールバック UI で安全に表示する実装例。
React Hook Form の useFieldArray で動的フィールドを追加・削除する
useFieldArray を使い、フォーム内のフィールドを動的に追加・削除・並び替えする実装例。Zod で配列バリデーションも行う。
React Hook Form でファイルアップロード対応フォームを実装する
React Hook Form の register でファイル入力を管理し、Zod でファイルサイズ・拡張子バリデーションを行う実装例。
React の createPortal でモーダル・トーストを DOM 外に描画する
createPortal を使い、モーダルやトーストを親コンポーネントの DOM 外（body 直下）に描画する実装例。
Redux Toolkit の createAsyncThunk で非同期処理を管理する
createAsyncThunk で API フェッチを定義し、pending / fulfilled / rejected の状態を extraReducers で管理する実装例。
TanStack Query の useInfiniteQuery で無限スクロールを実装する
useInfiniteQuery を使い、スクロールに応じて次ページを自動フェッチする無限スクロールの実装例。Intersection Observer と組み合わせる。
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）を型安全に管理するバッジコンポーネントの実装例。