` のスコープ内では `useFlag` フックを使ってフラグの評価を行います。`useFlag` の第 1 引数に機能名、第 2 引数にデフォルト値を渡すことで、フラグの評価結果を取得できます。
```tsx:Dashboard.tsx
import { useFlag } from "@openfeature/react-sdk";
export const Dashboard = () => {
const flag = useFlag("ai-assistant", false);
return (
ダッシュボード
{flag.value && }
);
};
```
### コンテキストにより動的にフラグを評価する
フィーチャーフラグを用いて、特定のユーザーのみに新機能を公開したいことがあります。例えば、社内のユーザーのみに新機能を公開して本番環境で安全にテストを行ったり、AB テストを行いたい場合などです。
特定のユーザー ID の場合にフラグを `on` に設定する例を見てみましょう。Provider に渡す `flagConfig` オブジェクトのプロパティに `contextEvaluator` を追加します。このプロパティはコンテキストを引数に受け取る関数を指定して、`variants` プロパティの値を返します。
```tsx {9-14}
const flagConfig: FlagConfiguration = {
"ai-assistant": {
disabled: false,
variants: {
on: true,
off: false,
},
defaultVariant: "off",
contextEvaluator(ctx) {
if (ctx.userId === "123") {
return "on";
} else {
return "off";
}
},
},
};
```
`userId` が `"123"` の場合には AI アシスタント機能が有効化され、それ以外の場合には無効化されるようになります。`OpenFeature.setProvider` で Provider を設定する際に、コンテキストのデフォルト値を渡します。
```tsx
OpenFeature.setProvider(new InMemoryProvider(flagConfig, { userId: "999" }));
```
コンテキストの初期値には `"999"` を設定していますので、`useFlag` フックを使うと、`off` が返される機能が表示されないことが確認できます。
コンテキストの値は動的に変更できます。例えば、ユーザーがログインし直したときには別のユーザー ID をコンテキストの値として設定したしはずです。`OpenFeature.setContext()` メソッドを呼び出すことで、Provider に新しいコンテキストを渡すことができます。
```tsx
function App() {
const handleChange = (e) => {
OpenFeature.setContext({ userId: e.target.value });
};
return (
);
}
```
セレクタボックスの値を変更するとコンテキストの値が変更され、コンポーネントが再レンダリングされます。`userId` が `"123"` の「ユーザー 2」を選択すると、AI アシスタント機能のボタンが表示されることが確認できます。
### テスト
テスト向けの用途として、`` コンポーネントが用意されています。`` に値を渡すことで、簡単に `useFlag` の値を設定できます。
`` コンポーネントをテストする例を見てみましょう。`` でコンポーネントラップして、ON と OFF の状態をそれぞれテストします。
```tsx:Dashboard.test.tsx
import { render, screen } from "@testing-library/react";
import { OpenFeatureProvider } from "@openfeature/react-sdk";
import { Dashboard } from "./Dashboard";
describe("Dashboard", () => {
it("ai-assistant が ON の場合にボタンが表示される", () => {
render(
);
expect(screen.getByRole("button")).toBeInTheDocument();
});
it("ai-assistant が OFF の場合にボタンが表示されない", () => {
render(
);
expect(screen.queryByRole("button")).not.toBeInTheDocument();
});
});
```
フラグが評価されるまでの遅延を再現したい場合、`delayMs` を設定できます。下記の例では、1000ms の遅延を設定しています。
```tsx
```
## ConfigCat との連携
個々まではテスト用途に `InMemoryProvider` を使っていましたが、実際に [ConfigCat](https://configcat.com/) と連携する例を見てみましょう。まずは ConfigCat から提供されている Provider をインストールします。
```sh
npm install @openfeature/config-cat-web-provider
```
ConfigCat に Sign Up して、「ADD FEATURE FLAG」ボタンをクリックして新しいフラグを作成します。フラグのキーは `ai-assistant` とします。
そして、「VIEW SDK KEY」ボタンをクリックして、 `SDK Key` をコピーします。
React のコードに戻り、`ConfigCatWebProvider.create()` を呼び出して Provider を作成します。`create()` メソッドの引数には先程コピーした `SDK Key` を渡します。
```tsx
import { ConfigCatWebProvider } from "@openfeature/config-cat-web-provider";
const provider = ConfigCatWebProvider.create("");
OpenFeature.setProvider(provider);
```
ConfigCat の管理画面で `ai-assistant` フラグを ON に設定し、「SAVE & PUBLISH」ボタンをクリックします。これで、`ai-assistant` フラグが ON になり、`` コンポーネントでボタンが表示されるようになります。アプリケーションのコードはほとんど変更することなく Provider を切り替えることができました。
## まとめ
- OpenFeature はフィーチャーフラグの標準化を目指すプロジェクト
- フィーチャーフラグの API の標準化により、ベンダーロックインを回避し、フィーチャーフラグのツールを自由に選択できるようになる
- React 向けの SDK が提供されており、抽象化された概念を提供している
- テスト用途には `InMemoryProvider` を使うことができる
- ConfigCat により提供されている `ConfigCatWebProvider` を使うことで、ConfigCat と連携することができる
## 参考
- [OpenFeature](https://openfeature.dev/)
- [OpenFeature - Windymeltの公開メモ帳](https://scrapbox.io/windymelt/OpenFeature)
- [Feature Flag Deep Dive - Speaker Deck](https://speakerdeck.com/biwashi/feature-flag-deep-dive)
- [フィーチャーフラグを管理するためのOpenFeature | フューチャー技術ブログ](https://future-architect.github.io/articles/20230621a/)