119 件（4 / 5 ページ）
Tailwind CSS でフォーム部品（Input / Select / Checkbox / Radio）をスタイリングする
Tailwind CSS を使い Input / Select / Checkbox / Radio / Textarea などの基本フォーム部品に一貫したスタイルを適用するコンポーネント集。フォーカスリングやエラー状態のスタイルも示す。
Tailwind CSS でレスポンシブレイアウトを組む
Tailwind CSS のブレークポイントプレフィックス（sm / md / lg）を使い、モバイルファーストのレスポンシブレイアウトを実装する例。
Tailwind CSS でローディング中のスケルトンカード UI を実装する
コンテンツ読み込み中に表示するスケルトン（骨格）カード UI を Tailwind CSS の animate-pulse で実装し、一覧グリッドに並べるパターン。
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 と組み合わせる。