How to Implement Feature Flags: Claude Code 활용 가이드

フィーチャーフラグとは

フィーチャーフラグ（Feature Flags）は、コードを배포した後でも機能のオン・オフを전환られる仕組みです。段階的な릴리스やA/B테스트に不可欠な技術であり、Claude Code를 활용하면堅牢な구현を빠르게구축할 수 있습니다。

기본적인フィーチャーフラグシステム

> TypeScriptでフィーチャーフラグの관리システムを作って。
> 사용자属性에 기반한条件付きフラグにも대응して。

type FlagValue = boolean | string | number;

interface FlagRule {
  conditions: Record<string, any>;
  value: FlagValue;
}

interface FeatureFlag {
  key: string;
  defaultValue: FlagValue;
  description: string;
  rules: FlagRule[];
  enabled: boolean;
}

class FeatureFlagManager {
  private flags: Map<string, FeatureFlag> = new Map();

  register(flag: FeatureFlag) {
    this.flags.set(flag.key, flag);
  }

  evaluate(key: string, context: Record<string, any> = {}): FlagValue {
    const flag = this.flags.get(key);
    if (!flag || !flag.enabled) return flag?.defaultValue ?? false;

    for (const rule of flag.rules) {
      if (this.matchConditions(rule.conditions, context)) {
        return rule.value;
      }
    }
    return flag.defaultValue;
  }

  private matchConditions(conditions: Record<string, any>, context: Record<string, any>): boolean {
    return Object.entries(conditions).every(([key, value]) => {
      if (Array.isArray(value)) return value.includes(context[key]);
      return context[key] === value;
    });
  }

  isEnabled(key: string, context?: Record<string, any>): boolean {
    return Boolean(this.evaluate(key, context));
  }
}

React用フックの구현

> React컴포넌트でフィーチャーフラグ를 사용하는ためのカスタムフックを作って。

import { createContext, useContext, ReactNode } from 'react';

const FlagContext = createContext<FeatureFlagManager | null>(null);

export function FlagProvider({ manager, children }: { manager: FeatureFlagManager; children: ReactNode }) {
  return <FlagContext.Provider value={manager}>{children}</FlagContext.Provider>;
}

export function useFeatureFlag(key: string, context?: Record<string, any>): boolean {
  const manager = useContext(FlagContext);
  if (!manager) throw new Error('FlagProviderが必要です');
  return manager.isEnabled(key, context);
}

// Usage example
function NewDashboard() {
  const showNewUI = useFeatureFlag('new-dashboard', { userId: currentUser.id });

  if (showNewUI) {
    return <ModernDashboard />;
  }
  return <LegacyDashboard />;
}

パーセンテージロールアウト

特定の割合の사용자にだけ機能を公開する段階的릴리스も구현할 수 있습니다。

function percentageRollout(userId: string, percentage: number): boolean {
  const hash = Array.from(userId).reduce((acc, char) => {
    return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
  }, 0);
  return Math.abs(hash % 100) < percentage;
}

// フラグ등록時にパーセンテージを설정
flagManager.register({
  key: 'new-checkout',
  defaultValue: false,
  description: '新しいチェックアウトフロー',
  enabled: true,
  rules: [{
    conditions: { rolloutPercentage: 20 },
    value: true,
  }],
});

フラグの관리画面

운영を楽にするため、フラグの状態をAPIで관리する仕組みも구축할 수 있습니다。

import express from 'express';

const router = express.Router();

router.get('/api/flags', (req, res) => {
  const flags = Array.from(flagManager.getAllFlags()).map(([key, flag]) => ({
    key,
    enabled: flag.enabled,
    description: flag.description,
  }));
  res.json(flags);
});

router.patch('/api/flags/:key', (req, res) => {
  const { enabled } = req.body;
  flagManager.setEnabled(req.params.key, enabled);
  res.json({ success: true });
});

정리

フィーチャーフラグを도입することで、安全な段階的릴리스とリスクの低減が可能になります。Claude Code를 사용하면条件分岐ロジックやReactフック、관리APIまで一貫して생성할 수 있습니다。A/B테스트との組み合わせはA/B테스트구현가이드を、状態관리の설계は状態관리の글를 참고하세요.

フィーチャーフラグの설계パターン에 대해서는Martin Fowler - Feature Togglesが詳しいです。