fp-ts-react について
Reactアプリでfp-tsのパターンを使う開発者向けガイドです。状況に応じた型やフックの選び方を示し、統合例には検証が必要であることも説明します。
主な機能
- 01Option、Either、TaskEitherの選択
- 02RemoteDataによるリクエスト状態の表現
- 03フォーム検証エラーの集約
- 04ReaderTaskEitherによる依存性注入
活用シーン
- 01オプション値や処理失敗の扱い
- 02読み込み・エラー・成功画面の構築
- 03複数ルールによるフォーム検証
- 04ReactやNext.jsでの関数型パターンの適用
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/fp-ts-reactを入力して読み込まれたか確認します。
同梱ファイルreferences/detailed-guide.md
詳細
React における関数型プログラミング
React アプリ向けの実践的なパターンです。テストされていない統合スケッチのため、外部 JSON とリクエストのライフサイクルの動作を検証してください。
詳細ガイド
このスキルを実行する前に、詳細ガイドをお読みください。完全な手順と参考資料が記載されています。安全性、前提条件、検証要件は必須事項として扱ってください。特定の作業では関連するセクションを読み、最初から最後まで作業する場合はガイド全体をお読みください。
このスキルを使用する場面
- 型安全な状態管理のために fp-ts を使用して React アプリを構築する場合
- データ取得における読み込み／エラー／成功の状態を処理する場合
- エラーを蓄積するフォーム検証を実装する場合
- React 18/19 または Next.js 14/15 で関数型パターンを使用する場合
用途別の選択肢
| 状況 | 使用するもの |
|---|---|
| 値が存在しない可能性がある | Option<T> |
| 同期処理が失敗する可能性がある | Either<E, A> |
| 非同期処理が失敗する可能性がある | TaskEither<E, A> |
| 読み込み／エラー／成功の UI が必要 | RemoteData<E, A> |
| 複数の検証を行うフォーム | 検証用 Applicative を使った Either |
| 依存性の注入 | Context + ReaderTaskEither |
| fp-ts で再レンダリングを防ぐ | useMemo または fp-ts-react-stable-hooks |
制限事項
- 上記の説明にある対象範囲にタスクが明確に該当する場合にのみ、このスキルを使用してください。
- 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
- 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認を求めてください。
コメント
Markdown 対応