facebook/feature-flags

feature-flags は何をしますか？

フィーチャーフラグテストの失敗、フラグの更新、@gateプラグマの理解、チャネル固有のテスト失敗のデバッグ、Reactへの新しいフラグ追加などに使用します。

概要

このスキルは、Reactプロジェクトにおけるフィーチャーフラグ（機能フラグ）の管理を支援します。フィーチャーフラグは、コードの出荷を段階的に行ったり、特定の環境やチャネルで機能を有効/無効にしたりするために使用されます。

主な用途

• テスト失敗のデバッグ: フィーチャーフラグに関連するテストが失敗した場合、@gateプラグマの条件を確認し、フラグの状態（有効/無効）が適切かどうかを検証します。
• フラグの更新: 既存のフラグのデフォルト値やチャネルごとの設定を変更する場合。
• @gateプラグマの理解: テストファイル内の@gateコメントがどのようにテストのスキップ/実行を制御するかを説明します。
• チャネル固有のテスト失敗: 特定のチャネル（例：www、RN、OSS）でのみ発生するテスト失敗をデバッグします。
• 新しいフラグの追加: Reactに新しいフィーチャーフラグを追加し、関連するテストを設定する手順を提供します。

@gateプラグマ

@gateプラグマは、特定の条件が満たされた場合にのみテストを実行するために使用されます。

// @gate flagName
// @gate !flagName
// @gate flagName1 && flagName2

@gateは以下のように動作します。

• 条件がtrueと評価された場合、テストは実行されます。
• 条件がfalseと評価された場合、テストはスキップされます（pendingとしてマーク）。
• 条件式には、論理演算子&&、||、!、および括弧を使用できます。
• フラグ名は、ReactFeatureFlags.jsまたは動的フラグの場合はdynamicFlagsで定義されている必要があります。

フラグの種類

• 静的フラグ: コンパイル時に決定されるフラグ。ReactFeatureFlags.jsで定義され、ビルド時に値が固定されます。
• 動的フラグ: 実行時に決定されるフラグ。ReactDOMFeatureFlags.jsやreact-native.config.jsなどで定義され、環境変数やチャネル設定によって変更できます。

チャネル

Reactは複数のチャネル（配信チャネル）で動作します。

• www: Facebookの本番環境。
• RN: React Native。
• OSS: オープンソースのReact。

各チャネルは独自のフラグ設定を持つことができます。

新しいフラグの追加手順

1. フラグの定義: 使用するチャネルに応じて、適切なファイルにフラグを追加します。
   • 静的フラグ: packages/shared/src/ReactFeatureFlags.js
   • 動的フラグ: packages/shared/src/forks/ReactFeatureFlags.www.js（www用）、packages/react-native/src/ReactNativeFeatureFlags.js（RN用）
2. デフォルト値の設定: 各フラグにデフォルト値を設定します。
3. テストの追加: フラグを使用するテストファイルに@gateプラグマを追加します。
4. ビルド設定: 必要に応じて、ビルド設定を更新します。

デバッグのヒント

• テストが@gate条件によりスキップされた場合、yarn jest --verboseでスキップされたテストを確認できます。
• チャネル固有の失敗は、yarn jest --releaseChannel=wwwのようにチャネルを指定してテストを実行すると再現できます。
• フラグの現在の状態を確認するには、該当するフラグファイルの値を確認するか、console.logで出力します。

関連ファイル

• packages/shared/src/ReactFeatureFlags.js
• packages/shared/src/forks/ReactFeatureFlags.www.js
• packages/react-native/src/ReactNativeFeatureFlags.js
• scripts/jest/setupTests.js