🌑

LaunchDarkly を React のプロジェクトに入れてみた

2021/07/19に公開

React

LaunchDarkly

tech

LaunchDarkly とは？

https://launchdarkly.com/

特定のユーザにだけこっそり機能をリリースすることを簡単にできるようにするためのサービスです。

Feature Flag というものを作って、こんな感じで Default では true/false を返すか、どんな条件に合致するユーザに true/false を配信するかを設定することができます。

このツールを React のプロジェクトで使ってみたので、設定した内容をメモしていきます。

基本的な設定

基本的にはこのドキュメント通りにすすめればOKです。

まずはライブラリをインストールします。

npm i --save launchdarkly-react-client-sdk

続いて index.tsx(アプリ全体を描画しているところ)を開いて、次のように LaunchDarkly の Provider を設定します。

import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
(async () => {
  const LDProvider = await asyncWithLDProvider({
    clientSideID: 'your-client-side-id',
    user: {
      "key": "aa0ceb",
      "name": "Grace Hopper",
      "email": "gracehopper@example.com"
    },
    options: { /* ... */ }
  });
  
  render(
    <LDProvider>
      <YourApp />
    </LDProvider>,
    document.getElementById('reactDiv'),
  );
})();

clientSideID　はどこで取るのがベストなのか不明なのですが、私は Quickstart の　 2.d のところから取れるのでそこから取得していました。(さすがに遠回し過ぎるので他にちゃんとした取り方がある気がする)

user の中身はフラグ配信の時の判定に使う値を詰めます。上記の例では key, name, email の３つがありますが、最低限としては key だけあれば事足りる模様です。

フラグを参照する

withLDConsumer という HoC があるので、それで使う側のコンポーネントを包みます。 props の型は LDProps というものを import すればいいです。

import { withLDConsumer, LDProps } from 'launchdarkly-react-client-sdk';

const Home: React.VFC<LDProps> = ({ flags, ldClient }) => {
  return flags.devTestFlag ? <div>Flag on</div> : <div>Flag off</div>;
};

export const HomePage = withLDConsumer()(Home);

ログイン時に再度フラグを更新する

上記で困るのはログイン前はユーザの情報などないので、ログイン後に何かしらしないとフラグが更新されないことです。なのでログインを実行した時に ldClient.identify を呼ぶ必要があります。

const Hoge: React.VFC<LDProps> = ({ ldClient }) => {
  const onLogin = (user) => {
    ldClient?.identify({ key: user.id });
  };

  return (
    <div>
      {/* 何かやる */}
    </div>
  );
};

export const HogePage = withLDConsumer()(Hoge);

LaunchDarkly とは？

基本的な設定

フラグを参照する

ログイン時に再度フラグを更新する

Discussion