この記事の対象読者
- 新機能を段階的に出したい人
- リリース後にすぐ戻せる作りにしたい人
- フロントエンドのFeature Flagをどう考えるか知りたい人
本題に入る前に
新しい画面や導線を作ったとき、「全ユーザーに一気に出して大丈夫かな」と不安になることがあります。
実装はできた。テストもした。でも実際の業務データで使われると、思わぬ問い合わせが来るかもしれない。こういう緊張感、ありますよね。リリースボタンを押す手が少し重くなる感じです。
そんなときに役立つ考え方がFeature Flagです。
コードは入れておくけれど、表示するかどうかを設定で切り替える。問題があれば戻す。全員ではなく一部のユーザーから試す。これができると、リリースの怖さを少し減らせます。
この記事では、React/TypeScriptで小さなフラグを扱う例を紹介します。
フラグで何を切り替えるのか
Feature Flagで切り替えたいものはいくつかあります。
| 切り替えるもの | 例 |
|---|---|
| 画面表示 | 新しい一覧UIを出す |
| 導線 | 新しい作成画面へ遷移する |
| 処理 | 新しいAPIを使う |
| 文言 | 新しい説明文を出す |
最初は「画面表示」から始めると分かりやすいです。
小さな型を作る
フラグ名を文字列で散らすと、あとから探しにくくなります。
type FeatureFlags = {
newReservationList: boolean;
bulkEdit: boolean;
};
const defaultFlags: FeatureFlags = {
newReservationList: false,
bulkEdit: false,
};
画面では、フラグを見て表示を切り替えます。
function ReservationPage({ flags }: { flags: FeatureFlags }) {
if (flags.newReservationList) {
return <NewReservationList />;
}
return <LegacyReservationList />;
}
フラグはどこから来るのか
最初は環境変数や設定ファイルでもよいですが、ユーザーごとに切り替えたい場合はAPIから取得することが多いです。
{
"newReservationList": true,
"bulkEdit": false
}
async function fetchFeatureFlags(): Promise<FeatureFlags> {
const response = await fetch("/api/me/feature-flags");
if (!response.ok) {
return defaultFlags;
}
return response.json();
}
取得に失敗したときは、基本的に安全側へ倒します。つまり、新機能を出さない設定に戻すことが多いです。
フラグは消すところまで考える
Feature Flagは便利ですが、ずっと残すとコードが読みにくくなります。
if (flags.newReservationList) {
return <NewReservationList />;
}
return <LegacyReservationList />;
この分岐が何ヶ月も残ると、「どちらが本命なのか」が分かりにくくなります。
フラグを作るときは、消す条件も一緒にメモしておくとよいです。
| 項目 | 例 |
|---|---|
| 目的 | 新しい一覧UIを一部ユーザーへ出す |
| 戻し方 |
newReservationList=false にする |
| 消す条件 | 全ユーザー移行後に旧UIを削除 |
まとめ
Feature Flagは、新機能を安全に試すためのスイッチです。
ただし、増やしすぎるとコードが複雑になります。まずは表示切り替えから小さく始め、戻し方と消す条件もセットで持つのがおすすめです。