Next.js / React / TypeScript の実践的なコードサンプル集
全 129 件（3 / 6 ページ）
Context と Children を組み合わせた Compound Component パターンで、Tabs や Accordion のような柔軟な UI コンポーネントを実装する例。
React Context で現在のテーマを管理し、CSS カスタムプロパティ（CSS 変数）でコンポーネントがテーマを自動追従するシステムを実装する例。
useState で値を管理する制御コンポーネントと、useRef で DOM を直接参照する非制御コンポーネントの違いを実装例で比較し、それぞれの適切なユースケースを示す。
useDebounce カスタムフックを自作し、検索入力のデバウンス処理を実装する例。lodash.debounce を使わず useEffect + setTimeout で実現する。
外部ライブラリを使わず HTML5 の Drag & Drop API（dragstart / dragover / drop イベント）でリストアイテムの順序をドラッグで並べ替える実装例。
エラー発生時に「再試行」ボタンを表示し、state リセットで再レンダリングを促す ErrorBoundary パターンの実装例。
入力フィールドの下にヘルプテキスト（説明）とバリデーションエラーメッセージを表示し、スクリーンリーダー対応の aria-describedby で関連付けるアクセシブルなフォームパターン。
DragEvent API を使いドラッグ＆ドロップでファイルを受け付けるクライアント UI を実装する例。ドロップゾーンの視覚フィードバックとクリック選択の併用パターンも示す。
FileReader や URL.createObjectURL を使い、ファイル選択直後にクライアント側で画像プレビューを表示するコンポーネント実装例。
フォームの各フィールド直下にバリデーションエラーや API エラーをインライン表示するパターン。aria-describedby でアクセシブルに紐付け、エラー状態のスタイルも切り替える例。
useIntersectionObserver カスタムフックを自作し、要素が viewport に入ったことを検知して遅延ロードやスクロールアニメーションをトリガーする例。
検索語の有無・フィルタ条件の有無によって異なる 0 件メッセージを出し分け、クリアボタンや別キーワード提案など検索導線につながる EmptyState を実装する例。
複数カテゴリのチェックボックスによる AND/OR フィルタリング UI をクライアントサイドで実装する例。フィルタロジックをコンポーネントから分離して管理する。
検索結果が 0 件のとき、入力キーワードに近い候補を提案して検索のやり直しを促す UX パターン。部分一致による候補抽出とワンクリック再検索の実装例。
ClipboardEvent の clipboardData.items を走査して image/* を抽出し、URL.createObjectURL でプレビュー表示してからサーバーへアップロードする UI パターン。
slug の配列から関連サンプルのメタデータを取得し、カード形式で一覧表示する回遊導線コンポーネントの実装例。
フォームラベルの横に「必須」「任意」バッジを表示し、aria-required と組み合わせてアクセシブルなフォーム入力欄を実装するパターン。
検索条件（キーワード・カテゴリ・難易度など）をプリセットとして localStorage に保存し、一覧画面からワンクリックで再適用できる UI パターン。
入力された検索語と一致するテキスト部分を分割して <mark> タグや span で強調表示するコンポーネントの実装例。
/ や Ctrl+K などのキーボードショートカットで検索入力欄へフォーカスを移動するパターン。useEffect と keydown イベントで実装し、入力中の誤作動を防ぐ制御も示す。
React.lazy でコンポーネントを遅延読み込みし、Suspense でローディング表示、ErrorBoundary で読み込み失敗時のフォールバックを実装する例。
カスタム Toast コンポーネントと useToast フックを実装し、API エラーや非同期処理の失敗時に画面端にトースト通知を表示するパターン。
useReducer を使い、複数フィールドのフォーム状態・入力値・バリデーションエラーを単一の reducer で管理する例。外部ライブラリなしで複雑なフォームを扱う。
RTK Query の createApi でエンドポイントを定義し、useGetQuery / useMutation フックでデータフェッチ・キャッシュ・自動再フェッチを管理する例。
絞り込み・並び順