mcpField
R
react-patterns

react-patterns

github.com/majesticlabs-dev開発5048 回インストール7 週間前に更新
リポジトリ

react-patterns について

モダンな React インターフェースを実装する開発者向けのパターンガイダンスです。コンポーネント構成、フック、状態管理、パフォーマンス、アクセシビリティを扱います。

主な機能

  1. 01コンポーネント構成パターン
  2. 02カスタムフックの指針
  3. 03状態管理の選択
  4. 04パフォーマンスとコード分割
  5. 05エラー処理とアクセシビリティ

活用シーン

  1. 01再利用可能な複合コンポーネントの設計
  2. 02フォームやデータ取得用フックの作成
  3. 03インターフェースの状態管理方式の選択
  4. 04大規模コンポーネントや操作の最適化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill react-patterns

インストール後、Claude Code で/react-patternsを入力して読み込まれたか確認します。

同梱ファイルreferences/examples.md

詳細

React パターン

フック、コンポーネントの合成、状態管理、並行機能を使用して最新の React パターンを実装するための専門的なガイダンスです。

基本理念

優先事項説明
コンポーネントの合成シンプルで再利用可能なパーツから複雑な UI を構築します
関心の分離ビジネスロジックはフックに、表示はコンポーネントに配置します
暗黙的より明示的にデータフローと状態管理を明確にします
パフォーマンス再レンダリングを最小限に抑え、負荷の高い計算を最適化します
アクセシビリティ誰もが利用でき、キーボードで操作できるインターフェースを構築します

パターンのカテゴリー

コンポーネント合成パターン
パターン用途例
複合コンポーネント共有コンテキストを持つ柔軟なコンポーネント APIアコーディオン、タブ、メニュー
Render Propsコンポーネント間でロジックを共有しますMouseTracker、スクロール位置
高階コンポーネント機能を追加するためにコンポーネントをラップしますwithAuth、withLoading

完全なコード例については、references/examples.md を参照してください。

カスタムフックのパターン
フック目的
useApi読み込み／エラー状態を伴うデータ取得
useFormバリデーションを伴うフォーム状態管理
useDebounce急速に変化する値のデバウンス
usePrevious状態／プロパティの以前の値へのアクセス
useLocalStorage状態を localStorage に永続化

実装については、references/examples.md を参照してください。

状態管理パターン
種類使用する場面例
useStateシンプルな UI 状態トグル、フォーム入力、ページネーション
useReducer複雑な状態ロジック複数ステップのフォーム、ショッピングカート
Contextテーマ、認証、アプリ全体の設定ユーザーセッション、機能フラグ
URL State共有やブックマークが可能な状態フィルター、検索パラメーター、タブ
Server StateAPI データ（React Query/SWR）ユーザープロフィール、商品カタログ
Global Store複数機能にまたがる連携複雑なアプリ向けの Zustand/Redux

Context + useReducer パターン：複数のアクションがあり、コンポーネント間で共有する必要がある複雑な状態に最適です。references/examples.md を参照してください。

パフォーマンスの最適化

メモ化を使用する場面
ツール使用する場面
useMemo負荷の高い計算（大きな配列のソート、フィルタリング）
useCallbackメモ化された子コンポーネントに渡す関数、または依存配列で使用する関数
memo同じ props で頻繁に再レンダリングされる純粋コンポーネント
コード分割の戦略
レベル実装
ルートレベルlazy(() => import('./pages/Dashboard'))
コンポーネントレベルチャートやエディターなどの負荷の高いコンポーネント
条件付き機能フラグで制御される機能

lazy コンポーネントは必ず、適切なフォールバックを指定した <Suspense> でラップしてください。

エラー処理

方針適用範囲
Error Boundariesコンポーネントツリーのエラー（クラスコンポーネント）
try/catch非同期処理、イベントハンドラー
React Query onError自動リトライを伴う API エラー

Error Boundary の配置：致命的なエラーにはアプリレベル、適切に機能を縮退させるには機能レベルに配置します。

アクセシビリティのパターン

要件実装
フォーカス管理モーダルを閉じたときに起動元へフォーカスを戻します
キーボード操作インタラクティブ要素で Tab、Enter、Escape をサポートします
ARIA ラベルアイコンボタン、表示ラベルのないフォーム入力
セマンティック HTML<nav>、<main>、<button> を適切に使用します

アクセシブルなモーダルの実装については、references/examples.md を参照してください。

ベストプラクティスのチェックリスト

  1. ロジックが再利用される場合や複雑な場合（20 行超）は、カスタムフックを抽出します
  2. 柔軟なコンポーネント API には、複合コンポーネントを使用します
  3. 計算コストの高い処理や、メモ化された子コンポーネントに渡すコールバックをメモ化します
  4. ルートと負荷の大きいコンポーネントをコード分割します
  5. 適切なレベルにエラーバウンダリーを配置して、エラーを処理します
  6. モーダルや動的コンテンツでフォーカスを管理します
  7. アクセシビリティのために、セマンティック HTML と ARIA ラベルを使用します
  8. コンポーネントから切り離して、フックを単体でテストします
  9. コンポーネントは小さく保ちます（200 行未満）
  10. 状態は使用箇所の近くに配置します

コメント

Markdown 対応