mcpField
R
react-patterns

react-patterns

github.com/casper-studios開発15248 回インストール5 日前に更新
リポジトリ

react-patterns について

react-patternsは、Reactのコンポーネント設計、状態管理、最適化を扱う開発者向けスキルです。状態、メモ化、条件ロジックの個別ガイドを参照できます。

主な機能

  1. 01派生値と局所的な状態
  2. 02複雑な状態管理パターン
  3. 03O(n)処理のメモ化
  4. 04Loader/Innerによる型の絞り込み
  5. 05明示的な条件付きレンダリング

活用シーン

  1. 01コンポーネントの状態境界の選定
  2. 02複雑なReact状態の管理
  3. 03コストの高い計算の最適化
  4. 04条件付きレンダリングの記述

インストール

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

$npx skills add https://github.com/casper-studios/casper-marketplace --skill react-patterns

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
conditional-logic.md
memoization.md
state-management.md

詳細

React パターン

コンポーネント設計、状態管理、最適化のための React の基本パターンです。

状態設計の考え方

状態変数は避け、派生値と props を優先します。状態はそれを必要とする最小のサブツリーに限定します。複雑な状態には判別可能なユニオンを使用します。

状態管理については、以下を参照してください。

  • 状態より派生値を優先する
  • 状態のスコープを定めるコンポーネント境界
  • Context API のパターン
  • 複雑な状態には Zustand を使用する
  • 複数の useState よりステートマシンを使用する

メモ化

O(n) の処理には必ずメモ化を使用します。依存配列を最小限にするため、アトミックにメモ化します。Loader/Inner パターンを使って、useMemo の前に型を絞り込みます。

メモ化については、以下を参照してください。

  • useMemo を使用するタイミング
  • アトミックなメモ化
  • ハンドラーに useCallback を使用する
  • 型の絞り込みに使う Loader/Inner パターン

条件分岐

肯定形のロジックと明示的な条件分岐を使い、&& より三項演算子を優先します。ガード節には早期リターンを使用します。

条件ロジックについては、以下を参照してください。

  • 肯定形のロジック
  • 明示的な条件分岐
  • 条件付きレンダリング
  • 条件分岐による型の絞り込み
  • 早期リターン

コメント

Markdown 対応