ソフトウェアを構築する場合、何も壊さずに新しい機能を迅速にリリースするのは難しい場合があります。機能フラグを使用するとこれが簡単になります。 Vercel のフィーチャー フラグ SDK について読んだ後、フィーチャー フラグについてさらに勉強し、フィーチャー フラグとは何なのか、どのように機能するのか、そして自分でフィーチャー フラグを構築する方法について説明するのが役立つだろうと思いました。

機能フラグとは何ですか?

機能フラグ (機能トグルとも呼ばれます) を使用すると、開発者はコードを変更したりアプリケーションを再デプロイしたりすることなく、機能をオンまたはオフにできます。これは、次のことができることを意味します:

• 段階的に機能をリリースします: 一部のユーザーのみに新機能を公開し、徐々に全員に公開します。
• 本番環境で新機能をテストする: すべてのユーザーが利用できるようにせずに、自分自身または少数のテスター グループに対して機能を有効にすることができます。
• 機能をすばやくロールバックする: 新しい機能によって問題が発生した場合は、再デプロイせずにその機能を無効にできます。

機能フラグを使用すると、コードのデプロイ時とは別に、ユーザーがいつ機能にアクセスできるかを制御できます。

機能フラグを使用する理由

1. 継続的デリバリー

   機能フラグは、チームがより頻繁にコードをリリースするのに役立ちます。未完成の作業をメインのコードベースにマージし、フラグの後ろに隠して、ユーザーに影響を与えずにデプロイできます。

2. A/B テスト

   機能の 2 つのバージョンを異なるユーザー グループでテストして、どちらのパフォーマンスが優れているかを確認できます。これは、実際のデータに基づいてユーザー エクスペリエンスを向上させるのに役立ちます。

3. 制御されたロールアウト

   少数のユーザー グループに機能をリリースし、そのパフォーマンスを監視してから、他の全員にリリースすることができます。

4. クイックロールバック

   何か問題が発生した場合は、コードの変更を元に戻すよりも機能フラグをオフにするほうがはるかに速く、アプリの安定性を維持できます。

Vercel の Flags SDK を使用した Next.js での機能フラグの使用

flags.ts (サーバー側)

import { unstable_flag as flag } from "@vercel/flags/next";

export const showBanner = flag({
  key: "banner",
  decide: () => false,
});

決定関数はフラグの値を決定します。フラグの値は、次のようなさまざまなソースから提供されます。

• 環境変数
• その他の機能フラグプロバイダー
• Vercel の Edge Config (データ構成ストア)
• データベースなど

app/page.tsx

import { showBanner } from "../flags";

export default async function Page() {
  const banner = await showBanner();
  return (
    

      {banner ?  : null}
      {/* other components */}
    
  );
}

フラグは関数であるため、呼び出し側で何も変更せずに実装を簡単に変更できます。この柔軟性により、アプリケーションはフラグ ロジックのコア構造を変更することなく、新しい要件に適応できます。

独自の機能フラグ システムを構築する方法

時間をかけて改善できるシンプルな機能フラグ システムを構築しましょう。

ステップ 1: 機能フラグを取得するためのカスタム フックを作成する

このステップには、機能フラグを動的に取得できるようにするカスタム フックの作成が含まれます。このフックを React アプリケーションの任意の部分で簡単に再利用して、機能が有効か無効かを確認できます。

import { useState, useEffect } from 'react';

export const useFeatureFlag = (key: string): boolean => {
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    const fetchFeatureFlag = async () => {
      try {
        const response = await fetch(`http://localhost:3001/api/feature-flags/${key}`);
        if (response.ok) {
          const data = await response.json();
          setIsEnabled(data.is_enabled);
        }
      } catch (error) {
        console.error('Failed to fetch feature flag:', error);
      }
    };

    fetchFeatureFlag();
  }, [key]);

  return isEnabled;
};

ステップ 2: コンポーネントに反応する

次に、カスタム フックを使用して、フラグが有効か無効かに基づいてさまざまな機能をレンダリングするコンポーネントを作成します。これにより、アプリケーションはユーザー エクスペリエンスを中断することなく、古い機能と新しい機能をシームレスに切り替えることができます。

import React from 'react';
import { useFeatureFlag } from './useFeatureFlag';

const FeatureFlaggedComponent: React.FC = () => {
  const isNewFeatureEnabled = useFeatureFlag('new-feature');

  return (
    

      
Feature Flag Example
      {isNewFeatureEnabled ? (
        

          
New Feature
          
This is the new feature enabled by the feature flag.
        
      ) : (
        

          
Old Feature
          
This is the old feature displayed when the new feature is disabled.
        
      )}
    
  );
};

export default FeatureFlaggedComponent;

市場のその他の機能フラグ ソリューション

独自の機能フラグ システムの構築は小規模プロジェクトには便利ですが、大規模なチームで作業している場合や、より高度な制御が必要な場合は、いくつかのツールがサービスとして機能フラグを提供します。

1. Vercel フィーチャー フラグ

   Vercel はプラットフォームに統合された機能フラグを提供しており、どのユーザーにどの機能が表示されるかをリアルタイムで制御できます。

2. ローンチダークリー

   LaunchDarkly は、機能フラグを大規模に管理するための人気のあるツールです。場所や行動などの属性に基づいてユーザーをターゲティングし、複雑なロールアウトをサポートします。

3. 最適化

   Optimizely は実験と A/B テストに重点を置き、機能フラグを使用してさまざまな機能をテストし、ユーザー エクスペリエンスを向上させます。

4. Split.io

   Split.io を使用すると、チームはさまざまな機能バージョン間でトラフィックを分割し、リアルタイムでパフォーマンス指標を追跡できます。

5. ハイパーチューン

Hypertune は、機能フラグ領域の新しいプレーヤーであり、高パフォーマンスの実験と機能の切り替えに重点を置いています。これにより、チームは最小限の遅延で複雑な実験を実行できるようになり、リアルタイムのパフォーマンスに関する洞察が保証されます。 Hypertune の独自のアプローチは、機能フラグを機械学習モデルと統合し、機能のロールアウトとユーザーのターゲティングに関して、よりインテリジェントな意思決定を可能にします。

結論

機能フラグは、コードを再デプロイすることなく機能を安全にリリースし、運用環境でテストし、迅速な変更を加えるための優れた方法です。 JavaScript を使用してシンプルな機能フラグ システムを構築することも、大規模なプロジェクトには Vercel、LaunchDarkly、Optimizely などのより高度なツールを使用することもできます。

機能フラグを使用すると、開発プロセスがより柔軟かつ効率的になり、新しい機能をより迅速かつ確実に提供できるようになります。

読んでいただきありがとうございます。お気軽にコメントをお寄せください。