feature-flags

React の機能フラグ

フラグファイル

ファイル	目的
packages/shared/ReactFeatureFlags.js	デフォルトのフラグ（canary）、__EXPERIMENTAL__ による上書き
packages/shared/forks/ReactFeatureFlags.www.js	www チャネル、__VARIANT__ による上書き
packages/shared/forks/ReactFeatureFlags.native-fb.js	React Native、__VARIANT__ による上書き
packages/shared/forks/ReactFeatureFlags.test-renderer.js	テストレンダラー

テストのゲーティング

@gate プラグマ（テストレベル）

フラグがないと機能を完全に利用できない場合に使用します。

// @gate enableViewTransition
it('supports view transitions', () => {
  // This test only runs when enableViewTransition is true
  // and is SKIPPED (not failed) when false
});

インラインの gate()（アサーションレベル）

機能は存在するものの、フラグによって動作が異なる場合に使用します。

it('renders component', async () => {
  await act(() => root.render(<App />));

  if (gate(flags => flags.enableNewBehavior)) {
    expect(container.textContent).toBe('new output');
  } else {
    expect(container.textContent).toBe('legacy output');
  }
});

新しいフラグの追加

1. ReactFeatureFlags.js にデフォルト値とともに追加します
2. 各フォークファイル（*.www.js、*.native-fb.js など）に追加します
3. www/RN で変化させる場合は、フォークファイルで __VARIANT__ に設定します
4. テストを @gate flagName またはインラインの gate() でゲーティングします

フラグの状態を確認する

/flags を使って、各チャネルの状態を確認します。コマンドの全オプションについては、flags スキルを参照してください。

__VARIANT__ フラグ（GK）

__VARIANT__ に設定されたフラグはゲートキーパーをシミュレートし、true と false の両方でテストされます。

/test www <pattern>              # __VARIANT__ = true
/test www variant false <pattern> # __VARIANT__ = false

チャネル固有の失敗をデバッグする

1. /flags --diff <channel1> <channel2> を実行して値を比較します
2. @gate の条件を確認します。テストが特定のチャネルにゲーティングされている可能性があります
3. /test <channel> <pattern> を実行して失敗を切り分けます
4. 新しく追加したフラグがすべてのフォークファイルにあることを確認します

よくある間違い

• 両方のバリアントを試し忘れる - __VARIANT__ フラグでは、必ず www と www variant false の両方をテストします
• 動作の違いに @gate を使う - 両方の経路を実行する場合は、インラインの gate() を使用します
• フォークファイルへの追加漏れ - 新しいフラグはメインファイルだけでなく、すべてのフォークファイルに追加する必要があります
• ゲート構文の誤り - gate('name') ではなく、gate(flags => flags.name) です