feature-flags-react

React 向け PostHog フィーチャーフラグ

このスキルは、React アプリケーションに PostHog フィーチャーフラグを追加するのに役立ちます。

リファレンスファイル

• references/react.md - React のフィーチャーフラグのインストール - ドキュメント
• references/adding-feature-flag-code.md - フィーチャーフラグのコードの追加 - ドキュメント
• references/best-practices.md - フィーチャーフラグのベストプラクティス - ドキュメント

API の詳細とフレームワーク固有のパターンについては、ドキュメントを参照してください。

主な原則

• 環境変数：PostHog のキーには必ず環境変数を使用してください。ハードコードしないでください。
• 変更は最小限に：既存のロジックにフィーチャーフラグのコードを追加してください。既存のコードを置き換えたり、再構成したりしないでください。
• まずはブール値フラグから：ユーザーが多変量フラグを明確に求めている場合を除き、ブール値のフラグチェックを使用してください。
• 可能な場合はサーバーサイドで：UI のちらつきを避けるため、サーバーサイドでのフラグ評価を優先してください。

PostHog MCP ツール

PostHog MCP サーバーが接続されているか確認してください。利用可能な場合は、フィーチャーフラグの管理（フラグの作成、一覧表示、更新、削除）に関連するツールを探してください。ユーザーにダッシュボードで手動操作を求めるのではなく、これらのツールを使用して PostHog でフラグを直接管理してください。

フレームワークのガイドライン

• フィーチャーフラグには、useFeatureFlagEnabled() または useFeatureFlagPayload() フックを使用してください。これらのフックは、読み込み状態と外部同期を自動的に処理します。
• ユーザーアクションが発生するイベントハンドラーに分析イベントの送信を追加してください。状態変化に反応する useEffect には追加しないでください。
• データ変換に useEffect を使用しないでください。代わりに、レンダリング中に派生値を計算してください。
• ユーザーイベントへの応答に useEffect を使用しないでください。そのロジックはイベントハンドラー自体に記述してください。
• 状態更新を連鎖させるために useEffect を使用しないでください。関連する更新はすべてイベントハンドラー内でまとめて計算してください。
• 親コンポーネントへの通知に useEffect を使用しないでください。イベントハンドラー内で setState とともに親コンポーネントのコールバックを呼び出してください。
• プロパティの変更時にコンポーネントの状態をリセットするには、useEffect を使わず、そのプロパティをコンポーネントの key として渡してください。
• useEffect は、外部システム（非 React ウィジェット、ブラウザー API、ネットワークサブスクリプション）との同期にのみ使用してください。