adding-feature-flags

機能フラグの追加

ユーザーから機能フラグ、機能トグル、段階的なロールアウト、または A/B テストの追加を依頼された場合に、このスキルを使用します。

オプション A：PostHog の機能フラグ（推奨）

1. PostHog がまだ導入されていない場合はインストールします。

   npm install posthog-js
   

2. コードで機能フラグを使用します。

   import { useFeatureFlagEnabled } from "posthog-js/react";
   
   function MyComponent() {
     const showNewFeature = useFeatureFlagEnabled("new-checkout-flow");
     if (showNewFeature) return <NewCheckout />;
     return <OldCheckout />;
   }
   

3. サーバーサイドで評価します — サーバーコンポーネントまたは API ルートで使用します。

   import { PostHog } from "posthog-node";
   
   const posthog = new PostHog(process.env.POSTHOG_API_KEY!);
   const isEnabled = await posthog.isFeatureEnabled("new-checkout-flow", userId);
   

4. PostHog のダッシュボードでフラグを作成します — ユーザープロパティ、割合ベースのロールアウト、またはコホートに基づくターゲティングルールを設定します。

オプション B：シンプルなローカル機能フラグ

サードパーティーサービスを必要としないプロジェクト向けです。

1. フラグの設定ファイルを作成します — lib/feature-flags.ts：

   export const FLAGS = {
     NEW_CHECKOUT: process.env.NEXT_PUBLIC_FF_NEW_CHECKOUT === "true",
     DARK_MODE: process.env.NEXT_PUBLIC_FF_DARK_MODE === "true",
   } as const;
   

2. コンポーネントで使用します。

   import { FLAGS } from "@/lib/feature-flags";
   
   function App() {
     return FLAGS.NEW_CHECKOUT ? <NewCheckout /> : <OldCheckout />;
   }
   

3. 環境変数を追加します — .env と .env.example にフラグを追加します。

   NEXT_PUBLIC_FF_NEW_CHECKOUT=false
   NEXT_PUBLIC_FF_DARK_MODE=true
   

注意事項

• ロールアウト中は、実験だけでなく、ユーザー向けのすべての変更に機能フラグを使用します。
• 古くなったフラグを整理します。機能のロールアウトが完了したら、フラグと古いコードパスを削除します。
• サーバーサイドのフラグでは、リクエストごとに API を呼び出さないよう、評価結果をキャッシュします。
• フラグには内容が分かる名前を付けます。flag-1 ではなく new-checkout-flow を使用します。