feature-flags-react-native

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

このスキルは、React Native アプリケーションへの PostHog フィーチャーフラグの追加を支援します。

リファレンスファイル

• references/react-native.md - React Native のフィーチャーフラグのインストール - ドキュメント
• 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、ネットワークサブスクリプション）との同期にのみ使用してください。
• posthog-react-native は React Native SDK のパッケージ名です。
• react-native-config を使用して .env から POSTHOG_PROJECT_TOKEN と POSTHOG_HOST を読み込んでください（変数は実行時ではなく、ビルド時に埋め込まれます）。
• react-native-svg は posthog-react-native の必須 peer dependency（サーベイ機能で使用）であり、併せてインストールする必要があります。
• React Navigation v7 との互換性を保つため、PostHogProvider は NavigationContainer の内側に配置してください。