Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

react-patterns

Name: react-patterns
Author: sickn33

モダンなReactのパターンと設計原則に関するスキルです。Hooks、コンポジション、パフォーマンス最適化、TypeScriptのベストプラクティスを活用したコード作成や改善に対応します。

description の原文を見る

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

SKILL.md 本文

React パターン

本番環境対応の React アプリケーションを構築するための原則。

1. コンポーネント設計の原則

コンポーネントの種類

種類	用途	ステート
Server	データ取得、静的コンテンツ	なし
Client	インタラクティビティ	useState、effects
Presentational	UI表示	Props のみ
Container	ロジック/ステート	大量のステート

設計ルール

コンポーネントは1つの責務を持つ
Props は下へ、イベントは上へ
継承より合成を優先
小さく焦点を絞ったコンポーネントを推奨

2. Hook パターン

Hook を抽出すべきタイミング

パターン	抽出の条件
useLocalStorage	同じストレージロジックが必要な場合
useDebounce	複数の debounce された値が必要な場合
useFetch	繰り返される fetch パターンがある場合
useForm	複雑なフォームステートがある場合

Hook ルール

トップレベルでのみ Hook を使用
すべてのレンダーで同じ順序
カスタム Hook は "use" で始まる名前
unmount 時に effects をクリーンアップ

3. ステート管理の選択

複雑さ	ソリューション
シンプル	useState、useReducer
共有ローカル	Context
サーバーステート	React Query、SWR
複雑なグローバル	Zustand、Redux Toolkit

ステート配置

スコープ	場所
単一コンポーネント	useState
親子関係	ステートをリフトアップ
サブツリー	Context
アプリ全体	グローバルストア

4. React 19 パターン

新しい Hook

Hook	目的
useActionState	フォーム送信ステート
useOptimistic	楽観的 UI 更新
use	レンダー内でリソースを読み込み

コンパイラの利点

自動メモ化
手動の useMemo/useCallback が不要
純粋なコンポーネントに焦点を当てる

5. 合成パターン

複合コンポーネント

親は context を提供
子は context を消費
スロットベースの柔軟な合成
例：タブ、アコーディオン、ドロップダウン

Render Props vs Hooks

ユースケース	推奨
再利用可能なロジック	カスタム Hook
レンダーの柔軟性	Render Props
横断的な関心事	Higher-order component

6. パフォーマンスの原則

最適化すべきタイミング

シグナル	アクション
遅いレンダー	まずプロファイル
大きなリスト	仮想化
高コストな計算	useMemo
安定したコールバック	useCallback

最適化の順序

実際に遅いかを確認
DevTools でプロファイル
ボトルネックを特定
的を絞った修正を適用

7. エラーハンドリング

Error Boundary の使用

スコープ	配置
アプリ全体	ルートレベル
機能	ルート/機能レベル
コンポーネント	リスキーなコンポーネントの周囲

エラー復旧

フォールバック UI を表示
エラーをログ出力
再試行オプションを提供
ユーザーデータを保存

8. TypeScript パターン

Props タイピング

パターン	用途
Interface	コンポーネント props
Type	ユニオン、複雑な型
Generic	再利用可能なコンポーネント

よくある型

必要性	型
子要素	ReactNode
イベントハンドラ	MouseEventHandler
Ref	RefObject<Element>

9. テスト原則

レベル	焦点
ユニット	純粋関数、Hook
統合	コンポーネント動作
E2E	ユーザーフロー

テスト優先事項

ユーザーに見える動作
エッジケース
エラー状態
アクセシビリティ

10. アンチパターン

❌ やめるべき	✅ するべき
深い Props のドリリング	Context を使う
巨大なコンポーネント	より小さく分割
すべてに useEffect を使う	Server components を使う
早すぎる最適化	まずプロファイル
キーとして index を使用	安定したユニーク ID を使う

11. ファイル構造

プロジェクトのより良いファイル構造の参考として、この画像を使用してください

忘れずに： React は合成についてです。小さく構築し、思慮深く組み合わせましょう。

使用時期

このスキルは、概要で説明されたワークフローまたはアクションを実行する場合に適用できます。

制限事項

このスキルは、上記で説明されたスコープに明確に一致するタスクの場合にのみ使用してください。
出力を環境固有の検証、テスト、または専門家レビューの代替と見なさないでください。
必要な入力、権限、安全の境界、または成功基準が不足している場合は、立ち止まって説明を求めてください。

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: sickn33
リポジトリ: sickn33/antigravity-awesome-skills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/sickn33/antigravity-awesome-skills / ライセンス: MIT