kenchandayo

もうすでにある程度実装は進んでる 
<iframe id="zenn-embedded__ad90dc385d441" src="https://embed.zenn.studio/card#zenn-embedded__ad90dc385d441" data-content="https%3A%2F%2Fdocs.launchdarkly.com%2Fhome%2Fgetting-started" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://docs.launchdarkly.com/home/getting-started" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.launchdarkly.com/home/getting-started</a> 
<iframe id="zenn-embedded__efdf3ddc5d6cf" src="https://embed.zenn.studio/card#zenn-embedded__efdf3ddc5d6cf" data-content="https%3A%2F%2Fgithub.com%2Flaunchdarkly-labs%2Fnextjs-ld-template" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/launchdarkly-labs/nextjs-ld-template" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/launchdarkly-labs/nextjs-ld-template</a>

一旦愚直にclient-side実装

ドキュメントによるとこんな感じらしい
<div class="code-block-container"><pre class="language-tsx"><code class="language-tsx code-line" data-line="1">import { render } from 'react-dom';
import { withLDProvider } from 'launchdarkly-react-client-sdk';

import App from './App';

const LDProvider = withLDProvider({
 clientSideID: 'client-side-id-123abc',
 context: {
 "kind": "user",
 "key": "user-key-123abc",
 "name": "Sandy Smith",
 "email": "sandy@example.com"
 },
 options: { /* ... */ }
})(App);

const rootElement = document.getElementById("root");
render(&lt;LDProvider /&gt;, rootElement);
</code></pre></div>

<code>LDProvider</code>を実装してrootをラップする形に実装する 
あと<code>clientSideID</code>がserver-sideとは別で用意されてるの知らなくて同じやつ使用して少し詰まってた

データの取得は
<div class="code-block-container"><pre class="language-tsx"><code class="language-tsx code-line" data-line="1">// app.js
import React, { useEffect } from 'react';
import { useFlags, useLDClient } from 'launchdarkly-react-client-sdk';

export default function App {
 const flags = useFlags();
 const ldClient = useLDClient();

 useEffect(() =&gt; {
 ldClient.identify({ key: 'context-key-123abc' });
 }, []);

 return &lt;div&gt;Let your feature flags fly!&lt;/div&gt;
}
</code></pre></div>みたいな感じなんだけど、<s><code>useFlags</code>の返り値がProxy Objectでオブジェクトにアクセスするとundefinedになっちゃう</s> 
シンプルにkey名ミスってるだけだった

どのflagを取得してくるのかを指定するには？ 
<code>useFlags</code>は全部のフィーチャーフラグを返すのか

contextってなんのために利用するの？

cookieに突っ込んで管理すればいいのやろうか

コンテキストについての説明が載ってる記事もあった 
<iframe id="zenn-embedded__7a3140503eb5d" src="https://embed.zenn.studio/card#zenn-embedded__7a3140503eb5d" data-content="https%3A%2F%2Fnote.homie.co.jp%2Fn%2Fnce61ac81d5f0" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://note.homie.co.jp/n/nce61ac81d5f0" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://note.homie.co.jp/n/nce61ac81d5f0</a>

管理画面でコンテキストを設定できる 
コンテキストによってフラグを出し分けることが可能？

管理画面で設定できるというよりはコンテキストがアプリケーション側で作成されるとそのリクエストで管理画面側に作成されたコンテキストとして反映される感じ？

コンテキストを使用するとフラグによってどのグループを対象にフラグを出し分けるかを決めることができるっぽい？

context利用してない限りはanonymousの実装でいいのかな

clientでデータを取得するのに<code>useFlags</code>と<code>useLDClient</code>でclientを作成して取得するのはどっちがいい？

<code>useFlags</code>は全部のフラグを取得できる 
Proxy Objectで返却されるがパフォーマンスの問題がありそう？ 
<iframe id="zenn-embedded__1156eae7c004e" src="https://embed.zenn.studio/card#zenn-embedded__1156eae7c004e" data-content="https%3A%2F%2Fgithub.com%2Flaunchdarkly%2Freact-client-sdk%2Fissues%2F177" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/launchdarkly/react-client-sdk/issues/177" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/launchdarkly/react-client-sdk/issues/177</a>

なんでProxyしてん