Feature Flags を運用に耐えさせる — Rork Max のキルスイッチと段階的ロールアウト設計

// src/providers/RemoteConfigProvider.tsx
import React, { createContext, useContext, useEffect, useState } from 'react';
import remoteConfig from '@react-native-firebase/remote-config';
 
// デフォルト値（オフライン時やフェッチ失敗時のフォールバック）
const DEFAULT_FLAGS: Record<string, boolean> = {
  enable_new_onboarding: false,
  enable_dark_mode_v2: false,
  enable_ai_suggestions: false,
  enable_social_sharing: false,
};
 
const DEFAULT_CONFIG: Record<string, string> = {
  welcome_message: 'アプリへようこそ！',
  max_upload_size_mb: '10',
  api_timeout_seconds: '30',
};
 
interface RemoteConfigState {
  flags: Record<string, boolean>;
  config: Record<string, string>;
  isLoading: boolean;
  lastFetchTime: Date | null;
}
 
const RemoteConfigContext = createContext<RemoteConfigState>({
  flags: DEFAULT_FLAGS,
  config: DEFAULT_CONFIG,
  isLoading: true,
  lastFetchTime: null,
});
 
export function RemoteConfigProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState<RemoteConfigState>({
    flags: DEFAULT_FLAGS,
    config: DEFAULT_CONFIG,
    isLoading: true,
    lastFetchTime: null,
  });
 
  useEffect(() => {
    async function initRemoteConfig() {
      try {
        // 開発環境では短いキャッシュ時間を設定
        await remoteConfig().setConfigSettings({
          minimumFetchIntervalMillis: __DEV__ ? 0 : 3600000, // 本番: 1時間
        });
 
        // デフォルト値を設定
        await remoteConfig().setDefaults({
          ...DEFAULT_FLAGS,
          ...DEFAULT_CONFIG,
        });
 
        // サーバーから最新値を取得
        await remoteConfig().fetchAndActivate();
 
        // 全ての値を読み取り
        const allValues = remoteConfig().getAll();
        const flags: Record<string, boolean> = {};
        const config: Record<string, string> = {};
 
        Object.entries(allValues).forEach(([key, entry]) => {
          if (key in DEFAULT_FLAGS) {
            flags[key] = entry.asBoolean();
          } else {
            config[key] = entry.asString();
          }
        });
 
        setState({
          flags: { ...DEFAULT_FLAGS, ...flags },
          config: { ...DEFAULT_CONFIG, ...config },
          isLoading: false,
          lastFetchTime: new Date(),
        });
      } catch (error) {
        console.warn('Remote Config fetch failed, using defaults:', error);
        setState(prev => ({ ...prev, isLoading: false }));
      }
    }
 
    initRemoteConfig();
  }, []);
 
  return (
    <RemoteConfigContext.Provider value={state}>
      {children}
    </RemoteConfigContext.Provider>
  );
}
 
// Feature Flag を取得するカスタムフック
export function useFeatureFlag(flagName: string): boolean {
  const { flags } = useContext(RemoteConfigContext);
  return flags[flagName] ?? false;
}
 
// Remote Config 値を取得するカスタムフック
export function useRemoteConfig(key: string): string {
  const { config } = useContext(RemoteConfigContext);
  return config[key] ?? '';
}
 
// ローディング状態を取得するフック
export function useRemoteConfigStatus() {
  const { isLoading, lastFetchTime } = useContext(RemoteConfigContext);
  return { isLoading, lastFetchTime };
}

// src/components/FeatureGate.tsx
import React from 'react';
import { useFeatureFlag } from '../providers/RemoteConfigProvider';
 
interface FeatureGateProps {
  flag: string;
  children: React.ReactNode;
  fallback?: React.ReactNode; // フラグOFF時に表示する代替UI
}
 
export function FeatureGate({ flag, children, fallback = null }: FeatureGateProps) {
  const isEnabled = useFeatureFlag(flag);
  return <>{isEnabled ? children : fallback}</>;
}
 
// 使用例:
// <FeatureGate flag="enable_ai_suggestions">
//   <AISuggestionsPanel />
// </FeatureGate>
//
// 期待する出力:
// - enable_ai_suggestions が true → AISuggestionsPanel が表示される
// - enable_ai_suggestions が false → 何も表示されない

// src/hooks/useABTest.ts
import { useEffect } from 'react';
import { useRemoteConfig } from '../providers/RemoteConfigProvider';
import analytics from '@react-native-firebase/analytics';
 
type ABTestVariant = 'control' | 'variant_a' | 'variant_b';
 
export function useABTest(testName: string): ABTestVariant {
  const variant = useRemoteConfig(`ab_${testName}`) as ABTestVariant;
  const resolvedVariant = variant || 'control';
 
  useEffect(() => {
    // どのバリアントに割り当てられたかを Analytics に記録
    analytics().setUserProperty(`ab_${testName}`, resolvedVariant);
    analytics().logEvent('ab_test_exposure', {
      test_name: testName,
      variant: resolvedVariant,
    });
  }, [testName, resolvedVariant]);
 
  return resolvedVariant;
}
 
// 使用例: オンボーディング画面のA/Bテスト
// function OnboardingScreen() {
//   const variant = useABTest('onboarding_flow_2026');
//
//   switch (variant) {
//     case 'variant_a':
//       return <OnboardingCarousel />;     // スワイプ型
//     case 'variant_b':
//       return <OnboardingVideo />;        // 動画型
//     default:
//       return <OnboardingClassic />;      // 従来型（コントロール）
//   }
// }
//
// 期待する出力:
// - Firebase Console で variant_a に割り当てられたユーザー → カルーセル形式のオンボーディング
// - variant_b に割り当てられたユーザー → 動画形式のオンボーディング
// - control グループ → 従来のオンボーディング

// src/utils/abTestTracking.ts
import analytics from '@react-native-firebase/analytics';
 
export const ABTestEvents = {
  // オンボーディング完了率の計測
  onboardingCompleted: (testName: string, variant: string) => {
    analytics().logEvent('onboarding_completed', {
      test_name: testName,
      variant,
      timestamp: Date.now(),
    });
  },
 
  // CTA ボタンのクリック率計測
  ctaClicked: (testName: string, variant: string, ctaLabel: string) => {
    analytics().logEvent('cta_clicked', {
      test_name: testName,
      variant,
      cta_label: ctaLabel,
    });
  },
 
  // 課金コンバージョンの計測
  purchaseCompleted: (testName: string, variant: string, amount: number) => {
    analytics().logEvent('purchase', {
      test_name: testName,
      variant,
      value: amount,
      currency: 'JPY',
    });
  },
};

// src/utils/rollout.ts
import { useRemoteConfig } from '../providers/RemoteConfigProvider';
 
function hashStringToPercent(str: string): number {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash; // 32bit整数に変換
  }
  return Math.abs(hash) % 100;
}
 
export function useGradualRollout(
  featureName: string,
  userId: string
): boolean {
  // Remote Config からロールアウト率を取得（例: "25" = 25%のユーザーに公開）
  const rolloutPercentage = parseInt(
    useRemoteConfig(`rollout_${featureName}_percent`),
    10
  );
 
  if (isNaN(rolloutPercentage) || rolloutPercentage <= 0) return false;
  if (rolloutPercentage >= 100) return true;
 
  // ユーザーIDのハッシュ値でロールアウト対象かを判定
  const userPercent = hashStringToPercent(`${featureName}_${userId}`);
  return userPercent < rolloutPercentage;
}
 
// 使用例:
// const isNewCheckoutEnabled = useGradualRollout('new_checkout', user.id);
//
// Firebase Console で rollout_new_checkout_percent = "10" に設定すると、
// 約10%のユーザーにだけ新しいチェックアウト画面が表示される

// src/hooks/useKillSwitch.ts
import { useFeatureFlag } from '../providers/RemoteConfigProvider';
import { useEffect } from 'react';
import { Alert } from 'react-native';
 
export function useKillSwitch(featureName: string): {
  isKilled: boolean;
  message: string;
} {
  const isKilled = useFeatureFlag(`kill_${featureName}`);
  const message = `この機能は現在メンテナンス中です。しばらくお待ちください。`;
 
  useEffect(() => {
    if (isKilled) {
      console.warn(`[KillSwitch] ${featureName} is disabled`);
    }
  }, [isKilled, featureName]);
 
  return { isKilled, message };
}
 
// 使用例:
// function PaymentScreen() {
//   const { isKilled, message } = useKillSwitch('payment');
//   if (isKilled) {
//     return <MaintenanceScreen message={message} />;
//   }
//   return <PaymentForm />;
// }
//
// 期待する出力:
// - kill_payment が false → 通常の決済画面が表示
// - kill_payment が true → メンテナンス画面が表示（決済処理は実行されない）

// App.tsx
import React from 'react';
import { RemoteConfigProvider } from './src/providers/RemoteConfigProvider';
import { NavigationContainer } from '@react-navigation/native';
import { RootNavigator } from './src/navigation/RootNavigator';
 
export default function App() {
  return (
    <RemoteConfigProvider>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </RemoteConfigProvider>
  );
}

// 画面全体の切り替え
function HomeScreen() {
  const showNewHome = useFeatureFlag('enable_new_home_v2');
  return showNewHome ? <HomeScreenV2 /> : <HomeScreenV1 />;
}
 
// UIの一部分だけを切り替え
function ProfileScreen() {
  const showBadges = useFeatureFlag('enable_user_badges');
  return (
    <View>
      <UserInfo />
      {showBadges && <BadgeCollection />}
      <ActivityFeed />
    </View>
  );
}
 
// Remote Config で動的にテキストを変更
function PromotionBanner() {
  const bannerText = useRemoteConfig('promotion_banner_text');
  const bannerColor = useRemoteConfig('promotion_banner_color');
 
  if (!bannerText) return null;
 
  return (
    <View style={{ backgroundColor: bannerColor || '#FF6B35' }}>
      <Text>{bannerText}</Text>
    </View>
  );
}

// src/screens/DebugFlagsScreen.tsx（開発ビルドのみ）
import React, { useState } from 'react';
import { View, Text, Switch, ScrollView, StyleSheet } from 'react-native';
import { useFeatureFlag } from '../providers/RemoteConfigProvider';
 
const FLAG_LIST = [
  { key: 'enable_new_onboarding', label: '新オンボーディング' },
  { key: 'enable_dark_mode_v2', label: 'ダークモード v2' },
  { key: 'enable_ai_suggestions', label: 'AI サジェスト' },
  { key: 'enable_social_sharing', label: 'ソーシャルシェア' },
];
 
export function DebugFlagsScreen() {
  // ローカルオーバーライド用のstate
  const [overrides, setOverrides] = useState<Record<string, boolean>>({});
 
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>Feature Flags デバッグ</Text>
      {FLAG_LIST.map(flag => {
        const remoteValue = useFeatureFlag(flag.key);
        const currentValue = overrides[flag.key] ?? remoteValue;
 
        return (
          <View key={flag.key} style={styles.row}>
            <View>
              <Text style={styles.label}>{flag.label}</Text>
              <Text style={styles.key}>{flag.key}</Text>
            </View>
            <Switch
              value={currentValue}
              onValueChange={val =>
                setOverrides(prev => ({ ...prev, [flag.key]: val }))
              }
            />
          </View>
        );
      })}
    </ScrollView>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 16 },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#E0E0E0',
  },
  label: { fontSize: 16 },
  key: { fontSize: 12, color: '#888', marginTop: 2 },
});

// src/providers/persistedFlags.ts
import AsyncStorage from '@react-native-async-storage/async-storage';
 
const CACHE_KEY = 'remote_config_last_activated_v1';
 
// 取得に成功した設定は「最後に信頼できた状態」として保存する
export async function persistFlags(flags: Record<string, boolean>) {
  await AsyncStorage.setItem(
    CACHE_KEY,
    JSON.stringify({ flags, savedAt: Date.now() })
  );
}
 
// 起動直後、フェッチ完了を待たずに適用する初期値
export async function loadPersistedFlags(): Promise<Record<string, boolean> | null> {
  const raw = await AsyncStorage.getItem(CACHE_KEY);
  if (!raw) return null;
 
  try {
    const parsed = JSON.parse(raw) as { flags: Record<string, boolean>; savedAt: number };
    // 30日以上前のキャッシュは信頼しない（フラグ撤去後の亡霊を避ける）
    const ageDays = (Date.now() - parsed.savedAt) / 86_400_000;
    if (ageDays > 30) return null;
    return parsed.flags;
  } catch {
    return null;
  }
}
 
// 期待する挙動:
// - 前回起動時に kill_payment = true を取得済み → オフライン起動でもメンテナンス画面
// - キャッシュなし & オフライン → DEFAULT_FLAGS（= 安全側）にフォールバック

type FlagState = 'on' | 'off' | 'unknown';
 
export function useKillSwitchStrict(featureName: string): {
  shouldBlock: boolean;
  reason: 'killed' | 'unresolved' | 'none';
} {
  const { flags, isLoading, lastFetchTime } = useContext(RemoteConfigContext);
  const state: FlagState = isLoading && lastFetchTime === null
    ? 'unknown'
    : flags[`kill_${featureName}`] ? 'on' : 'off';
 
  // 決済のような不可逆な操作は、unknown のうちは通さない
  if (state === 'on') return { shouldBlock: true, reason: 'killed' };
  if (state === 'unknown') return { shouldBlock: true, reason: 'unresolved' };
  return { shouldBlock: false, reason: 'none' };
}

// src/bootstrap.ts
const FETCH_TIMEOUT_MS = 2500;
 
async function withTimeout<T>(p: Promise<T>, ms: number): Promise<T | null> {
  return Promise.race([
    p,
    new Promise<null>((resolve) => setTimeout(() => resolve(null), ms)),
  ]);
}
 
export async function bootstrapFlags() {
  // 1) 前回の確定値をまず適用（0ms 相当・オフラインでも効く）
  const persisted = await loadPersistedFlags();
  if (persisted) applyFlags(persisted);
 
  // 2) 最新値を取りにいくが、最大 2.5 秒で諦める
  const fetched = await withTimeout(
    remoteConfig().fetchAndActivate().then(() => readAllFlags()),
    FETCH_TIMEOUT_MS
  );
 
  if (fetched) {
    applyFlags(fetched);
    await persistFlags(fetched);
  }
  // fetched === null でも起動は続行する。UI は persisted か DEFAULT_FLAGS で動く
}

// src/utils/bucket.ts
 
// FNV-1a: 短い文字列でも下位ビットまで攪拌される
function fnv1a(input: string): number {
  let h = 0x811c9dc5;
  for (let i = 0; i < input.length; i++) {
    h ^= input.charCodeAt(i);
    // 32bit の乗算を桁あふれさせずに行う
    h = Math.imul(h, 0x01000193) >>> 0;
  }
  return h >>> 0;
}
 
/**
 * @param experimentKey フラグ名ではなく、実験の不変IDを渡す（リネーム耐性）
 * @returns 0.0 以上 1.0 未満の安定した位置
 */
export function bucketOf(experimentKey: string, userId: string): number {
  return fnv1a(`${experimentKey}:${userId}`) / 0x100000000;
}
 
export function isInRollout(
  experimentKey: string,
  userId: string,
  percent: number
): boolean {
  if (percent <= 0) return false;
  if (percent >= 100) return true;
  return bucketOf(experimentKey, userId) * 100 < percent;
}
 
// 期待する出力（10万件の合成IDで検証したときの実測値）:
// percent=10 → 実際に true になった割合 9.98%
// percent=50 → 50.03%
// 旧実装（連番ID・percent=10）→ 13.4% に偏った

// src/flags/registry.ts
export type FlagKind = 'release' | 'experiment' | 'kill' | 'ops';
 
export interface FlagSpec {
  key: string;
  kind: FlagKind;
  owner: string;
  createdAt: string;   // ISO 8601
  expiresAt: string;   // この日を過ぎたら「撤去するか延長するか」を決める
  defaultValue: boolean;
  description: string;
}
 
export const FLAG_REGISTRY: readonly FlagSpec[] = [
  {
    key: 'enable_new_onboarding',
    kind: 'release',
    owner: 'mobile',
    createdAt: '2026-03-01',
    expiresAt: '2026-06-01',
    defaultValue: false,
    description: '新オンボーディング導線。100%到達後に分岐ごと削除する',
  },
  {
    key: 'kill_payment',
    kind: 'kill',
    owner: 'mobile',
    createdAt: '2026-03-01',
    expiresAt: '2027-03-01', // kill は長命でよい
    defaultValue: false,
    description: '決済フロー全体の緊急停止',
  },
] as const;

#!/usr/bin/env bash
# scripts/check-flags.sh — 期限切れフラグと孤児フラグを検出する
set -euo pipefail
 
TODAY=$(date +%Y-%m-%d)
FAIL=0
 
# 1) 期限切れの検出
node -e '
const { FLAG_REGISTRY } = require("./src/flags/registry.ts");
const today = new Date().toISOString().slice(0, 10);
const expired = FLAG_REGISTRY.filter((f) => f.expiresAt < today);
if (expired.length) {
  console.error("期限切れフラグ:", expired.map((f) => f.key).join(", "));
  process.exit(1);
}
'
 
# 2) レジストリに載っていないフラグ参照の検出
grep -rhoE "useFeatureFlag\(['\"]([a-z0-9_]+)['\"]\)" src/ \
  | sed -E "s/.*\(['\"]([a-z0-9_]+)['\"]\).*/\1/" | sort -u > /tmp/used.txt
grep -oE "key: '([a-z0-9_]+)'" src/flags/registry.ts \
  | sed -E "s/key: '(.*)'/\1/" | sort -u > /tmp/declared.txt
 
if ! comm -23 /tmp/used.txt /tmp/declared.txt | grep -q '^$'; then
  echo "レジストリ未登録のフラグ参照:"
  comm -23 /tmp/used.txt /tmp/declared.txt
  FAIL=1
fi
 
exit $FAIL

// src/hooks/useExposure.ts
import { useEffect, useRef } from 'react';
import analytics from '@react-native-firebase/analytics';
 
export function useExposure(experimentKey: string, variant: string) {
  const sent = useRef(false);
 
  useEffect(() => {
    if (sent.current) return;
    sent.current = true;
 
    // 「割り当てられた」ではなく「実際に描画された」時点で送る
    analytics().logEvent('experiment_exposure', {
      experiment_key: experimentKey,
      variant,
    });
  }, [experimentKey, variant]);
}