119 件（3 / 5 ページ）
React で再試行ボタン付きの ErrorBoundary を実装する
エラー発生時に「再試行」ボタンを表示し、state リセットで再レンダリングを促す ErrorBoundary パターンの実装例。
React でフォームフィールドにヘルプテキストとエラーメッセージを表示する
入力フィールドの下にヘルプテキスト（説明）とバリデーションエラーメッセージを表示し、スクリーンリーダー対応の aria-describedby で関連付けるアクセシブルなフォームパターン。
React でドラッグ＆ドロップ対応のファイル選択UIを実装する
DragEvent API を使いドラッグ＆ドロップでファイルを受け付けるクライアント UI を実装する例。ドロップゾーンの視覚フィードバックとクリック選択の併用パターンも示す。
React でファイル選択時に画像プレビューを表示する
FileReader や URL.createObjectURL を使い、ファイル選択直後にクライアント側で画像プレビューを表示するコンポーネント実装例。
React でフォームフィールド近傍にインラインエラーメッセージを表示する
フォームの各フィールド直下にバリデーションエラーや API エラーをインライン表示するパターン。aria-describedby でアクセシブルに紐付け、エラー状態のスタイルも切り替える例。
IntersectionObserver カスタムフックで要素の可視性を検出する
useIntersectionObserver カスタムフックを自作し、要素が viewport に入ったことを検知して遅延ロードやスクロールアニメーションをトリガーする例。
React で検索キーワードに応じた 0 件 EmptyState を表示する
検索語の有無・フィルタ条件の有無によって異なる 0 件メッセージを出し分け、クリアボタンや別キーワード提案など検索導線につながる EmptyState を実装する例。
React でチェックボックス複数選択フィルタを実装する
複数カテゴリのチェックボックスによる AND/OR フィルタリング UI をクライアントサイドで実装する例。フィルタロジックをコンポーネントから分離して管理する。
React で検索結果が 0 件のときに関連キーワードを提案する
検索結果が 0 件のとき、入力キーワードに近い候補を提案して検索のやり直しを促す UX パターン。部分一致による候補抽出とワンクリック再検索の実装例。
React でクリップボード貼り付け（Ctrl+V）から画像をアップロードする
ClipboardEvent の clipboardData.items を走査して image/* を抽出し、URL.createObjectURL でプレビュー表示してからサーバーへアップロードする UI パターン。
React で関連サンプル一覧を表示して回遊導線を作る
slug の配列から関連サンプルのメタデータを取得し、カード形式で一覧表示する回遊導線コンポーネントの実装例。
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 で EmptyState コンポーネントの story とバリエーションを管理する
EmptyState コンポーネントの検索ゼロ・未登録・エラーの 3 バリアントを Storybook の story として定義し、args / argTypes でプロパティを切り替えながら確認できる例。
Storybook でフィルタチップコンポーネントのストーリーを書く
フィルタチップ（アクティブ状態・削除ボタン付き・複数選択）の各状態を Storybook CSF 形式でストーリー化し、args と 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 でフィルターチップ（アクティブフィルタ表示・削除）UI を実装する
適用中のフィルタ条件をチップ形式で横並びに表示し、個別削除ボタンと一括クリアボタンを持つフィルターチップコンポーネントを Tailwind CSS で実装する例。