first-flag

最初のフィーチャーフラグを作成する

SDK は接続されています。次は、ユーザーが最初のフィーチャーフラグを作成し、エンドツーエンドで動作を確認できるようにサポートします。

このスキルは LaunchDarkly オンボーディング の配下にあり、親の ステップ 6 は 最初のフラグ です。前提: コード変更を適用する。

任意 -- フラグ作成スキルがすでにインストールされている場合: github.com/launchdarkly/ai-tooling の launchdarkly-flag-create スキルがセッションで利用可能な場合 (npx skills add launchdarkly/ai-tooling --skill launchdarkly-flag-create -y --agent <agent> でインストール)、フラグの作成 と、リポジトリに合った 評価コードの選択 に使用できます。それでも デフォルト OFF -> OFF を検証 -> ON に切り替え -> ON を検証 (以下のステップ 3〜5) を完了する必要があります。このスキルを 必須にしてはいけません: これが存在しない場合や、MCP のみのフローがユーザーのセットアップと競合する場合、このページが完全なフォールバックとして機能し続けます。

セキュリティ: 認証情報の取り扱い

コマンドにトークンのリテラル値を絶対に代入しないでください。 代わりに環境変数参照を使用してください:

• シェルコマンド: $LAUNCHDARKLY_ACCESS_TOKEN (シェルによって展開され、ps の出力には表示されません)
• セッションで変数を設定: export LAUNCHDARKLY_ACCESS_TOKEN=<your-token>

これにより、トークンがプロセスリスト、シェル履歴、画面録画に表示されるのを防ぎます。

ステップ 0: SDK のフラグキーに関するガイダンスを確認する

フラグを作成したり評価コードを接続したりする前に、以下の SDK ごとのフラグキーの動作 表を確認してください。一部の SDK は、アプリケーションコードで公開する前にフラグキーを変換します (例: React SDK はケバブケースのキーをキャメルケースに変換します)。LaunchDarkly で作成するフラグキー、SDK/フレームワークの設定、コードで参照するキーはすべて一致している必要があります。

• SDK がキーを変換する場合 (例: React の useFlags() は my-first-flag → myFirstFlag のようにキャメルケースに変換): 変換後の キーを使用して評価コードを生成します。LaunchDarkly のフラグキーはそのまま (ケバブケースが慣例) にします。
• SDK がキーをそのまま保持する場合 (ほとんどのサーバーサイド SDK): コード内で LaunchDarkly のフラグキー文字列をそのまま使用します。
• SDK が両方のモードをサポートする場合 (例: React はプロバイダーオプションでキャメルケースを無効化できます): プロジェクトがどちらのモードを使用しているかを判断し (既存のコードまたはプロバイダー設定を確認)、それに一致するコードを生成します。

SDK ごとのフラグキーの動作

SDK	キーの変換	my-first-flag のコードキー	備考
React Web (useFlags())	デフォルトでキャメルケース	myFirstFlag	プロバイダーの reactOptions: { useCamelCaseFlagKeys: false } でこの動作を無効化できます
React Native (useFlags())	デフォルトでキャメルケース	myFirstFlag	同じ reactOptions オーバーライドが利用可能
Vue (useLDFlag())	なし (元のキーを渡す)	'my-first-flag'
JavaScript Browser	なし	'my-first-flag'
Node.js Server	なし	'my-first-flag'
Python Server	なし	'my-first-flag'
Go Server	なし	"my-first-flag"
Java Server	なし	"my-first-flag"
.NET Server	なし	"my-first-flag"
Ruby Server	なし	'my-first-flag'
Swift/iOS	なし	"my-first-flag"
Android	なし	"my-first-flag"
Flutter	なし	'my-first-flag'

以下のステップ 2 で評価コードを接続する際は、SDK が変換を適用する場合は常に、生の LaunchDarkly キーではなく コードキー 列の値を使用してください。

ステップ 1: フラグを作成する

REST / curl 認証: Authorization ヘッダーの値として $LAUNCHDARKLY_ACCESS_TOKEN を使用します (LaunchDarkly は生のトークンを使用し、Bearer プレフィックスは付けません)。シェルは変数を展開しますが、ログには記録しません。

MCP 経由（推奨）

LaunchDarkly MCP サーバーが利用可能な場合は、create-feature-flag（またはお使いのサーバーが公開している同等のフィーチャーフラグ作成ツール）を使用してください：

• Key: my-first-flag（またはユーザーのプロジェクトに関連する名前）
• Name: "My First Flag"
• Kind: boolean
• Variations: true / false
• Temporary: true

LaunchDarkly API 経由

curl -s -X POST \
  "https://app.launchdarkly.com/api/v2/flags/PROJECT_KEY" \
  -H "Authorization: $LAUNCHDARKLY_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "My First Flag",
    "key": "my-first-flag",
    "kind": "boolean",
    "variations": [
      {"value": true},
      {"value": false}
    ],
    "temporary": true
  }'

ldcli 経由

ldcli flags create \
  --access-token "$LAUNCHDARKLY_ACCESS_TOKEN" \
  --project PROJECT_KEY \
  --data '{"name": "My First Flag", "key": "my-first-flag", "kind": "boolean", "temporary": true}'

作成後、フラグはターゲティング OFF の状態で開始され、全員に off バリエーション（false）を配信します。プロジェクトキーが判明している場合は、フラグのダッシュボードページへのリンクをユーザーに提示してください：https://app.launchdarkly.com/projects/{projectKey}/flags/my-first-flag（実際のプロジェクトキーに置き換えてください）。

ステップ 2: フラグ評価コードを追加する

アプリケーションでフラグを評価するコードを追加します。ユーザーの機能にとって適切な場所に配置してください。

サーバーサイドの例

// Node.js (@launchdarkly/node-server-sdk) -- ldClient is your initialized server client after waitForInitialization
const context = { kind: 'user', key: 'example-user-key', name: 'Example User' };
const showFeature = await ldClient.boolVariation('my-first-flag', context, false);

if (showFeature) {
  console.log('Feature is ON');
} else {
  console.log('Feature is OFF');
}

# Python (launchdarkly-server-sdk) -- client is ldclient.get() after set_config
from ldclient import Context

context = Context.builder("example-user-key").name("Example User").build()
show_feature = client.variation("my-first-flag", context, False)

if show_feature:
    print("Feature is ON")
else:
    print("Feature is OFF")

// Go
context := ldcontext.NewBuilder("example-user-key").Name("Example User").Build()
showFeature, _ := ldClient.BoolVariation("my-first-flag", context, false)

if showFeature {
    fmt.Println("Feature is ON")
} else {
    fmt.Println("Feature is OFF")
}

クライアントサイドの例

// React — useFlags() camelCases keys: "my-first-flag" → myFirstFlag (see Step 0 table)
import { useFlags } from 'launchdarkly-react-client-sdk';

function MyComponent() {
  const { myFirstFlag } = useFlags();

  return (
    <div>
      {myFirstFlag ? <p>Feature is ON</p> : <p>Feature is OFF</p>}
    </div>
  );
}

React SDK の useFlags() フックは、デフォルトでケバブケースのフラグキーをキャメルケースに変換するため、my-first-flag は myFirstFlag になります。プロジェクトでプロバイダーの reactOptions: { useCamelCaseFlagKeys: false } によってこれが無効化されている場合は、代わりに元のキー文字列を使用してください。どちらの形式を使用するかを選ぶ前に、必ずプロジェクトのプロバイダー設定を確認してください — 上記のフラグキーの動作表を参照してください。

ステップ 3: デフォルト値を確認する

ターゲティングが OFF の場合、フラグは false に評価されるはずです。アプリケーションを実行して確認してください：

Feature is OFF

ステップ 4: フラグをオンに切り替える

MCP 経由

LaunchDarkly MCP サーバーが公開しているのは update-feature-flag（JSON Patch）であり、toggle-flag という名前のツールではありません -- お使いの MCP サーバーが一覧表示するツール名を使用してください。

最もシンプルな方法: フラグを一度オンにするだけであれば、以下の ldcli または LaunchDarkly API のブロックを優先してください。

update-feature-flag を使用する場合: projectKey、featureFlagKey、および PatchWithComment.patch を JSON Patch 配列として指定して呼び出します。環境に対してフラグをオンにするには、通常、その環境の on フィールドに対する replace 操作を使用します（必要に応じて、お使いのアカウントの正確なパスを get-feature-flag で確認してください）：

{
  "projectKey": "PROJECT_KEY",
  "featureFlagKey": "my-first-flag",
  "PatchWithComment": {
    "patch": [
      {
        "op": "replace",
        "path": "/environments/ENVIRONMENT_KEY/on",
        "value": true
      }
    ],
    "comment": "Onboarding: turn on my-first-flag"
  }
}

ENVIRONMENT_KEY は、ターゲットとする環境の環境キー（例：test、production）に置き換えてください。

LaunchDarkly API 経由

curl -s -X PATCH \
  "https://app.launchdarkly.com/api/v2/flags/PROJECT_KEY/my-first-flag" \
  -H "Authorization: $LAUNCHDARKLY_ACCESS_TOKEN" \
  -H "Content-Type: application/json; domain-model=launchdarkly.semanticpatch" \
  -d '{
    "environmentKey": "ENVIRONMENT_KEY",
    "instructions": [
      {"kind": "turnFlagOn"}
    ]
  }'

ldcli 経由

ldcli flags toggle-on \
  --access-token "$LAUNCHDARKLY_ACCESS_TOKEN" \
  --project PROJECT_KEY \
  --environment ENVIRONMENT_KEY \
  --flag my-first-flag

ステップ 5: 切り替えを確認する

フラグをオンに切り替えた後、アプリケーションは次のように表示されるはずです：

Feature is ON

ストリーミングを使用するサーバーサイド SDK（デフォルト）では、変更は数秒以内に反映されるはずです。クライアントサイド SDK では、変更は次回のページ読み込み時、または SDK が更新をポーリングしたときに反映されます。

ステップ 6: インタラクティブなデモを追加する

フラグが動作するようになったので、ユーザーがフラグの効果を実際に確認できるよう、目に見えるインタラクティブな要素を追加してください -- 単なるコンソールログではなく。これにより「おっ」と思わせる瞬間が生まれ、ユーザーが他の人に見せられる具体的な証拠を提供できます。

検出した内容に基づいて適切なデモを選択してください：

アプリの種類	追加するもの	ユーザー体験
フロントエンド（React、Vue、SPA）	フラグで制御されるバナー、バッジ、またはボタン	ダッシュボードでフラグを切り替え → ページを更新 → 要素が表示/非表示になる
バックエンド API（Node、Python、Go など）	フラグの状態を JSON で返す /launchdarkly-demo エンドポイント	エンドポイントを curl → フラグを切り替え → 再度 curl → レスポンスが変化する
フルスタック（Next.js SSR、Rails など）	両方：API エンドポイント + フラグの状態を表示する UI 要素	フラグを切り替え → API と UI の両方に変更が反映されるのを確認
CLI / スクリプト	--feature-demo フラグまたは独自の出力モード	スクリプトを実行 → フラグを切り替え → 再度実行 → 出力が変化する

フロントエンドデモの例（React）

フラグがオンのときに視覚的に明らかなコンポーネントまたは要素を追加します：

// Add to an existing page component
import { useFlags } from 'launchdarkly-react-client-sdk';

function FeatureFlagDemo() {
  const { myFirstFlag } = useFlags();

  if (!myFirstFlag) return null;

  return (
    <div style={{
      padding: '12px 20px',
      backgroundColor: '#405BFF',
      color: 'white',
      borderRadius: '8px',
      margin: '16px 0',
      fontWeight: 500
    }}>
      LaunchDarkly is working — this banner is controlled by a feature flag
    </div>
  );
}

目立つ場所（例：メインページの上部、またはダッシュボード/ヘッダー領域）に配置してください。

バックエンドのデモ例（Node.js/Express）

フラグの状態を返すエンドポイントを追加します：

// Add to your Express app (or equivalent for other frameworks)
app.get('/launchdarkly-demo', async (req, res) => {
  const context = { kind: 'user', key: 'demo-user' };
  const flagValue = await ldClient.boolVariation('my-first-flag', context, false);
  
  res.json({
    flag: 'my-first-flag',
    enabled: flagValue,
    message: flagValue 
      ? 'LaunchDarkly is working — the flag is ON'
      : 'LaunchDarkly is working — the flag is OFF'
  });
});

ユーザーに次のコマンドでテストするよう伝えます：curl http://localhost:PORT/launchdarkly-demo

バックエンドのデモ例（Python/Flask）

@app.route('/launchdarkly-demo')
def launchdarkly_demo():
    context = Context.builder("demo-user").build()
    flag_value = ld_client.variation("my-first-flag", context, False)
    
    return jsonify({
        "flag": "my-first-flag",
        "enabled": flag_value,
        "message": "LaunchDarkly is working — the flag is ON" if flag_value 
                   else "LaunchDarkly is working — the flag is OFF"
    })

フルスタックのデモ

サーバーとクライアントの両方があるアプリ（例：Next.js、Remix、フロントエンド付きの Rails）の場合：

1. API エンドポイントを追加します（上記のバックエンドの例）
2. エンドポイントを呼び出すか、クライアント SDK を直接使用する UI コンポーネントを追加します
3. ユーザーは両方の経路が動作することを確認できます

ガイドライン

1. 既存のパターンに合わせる -- アプリの他の部分と同じルーティングスタイル、コンポーネントの慣習、コードスタイルを使用します
2. わかりやすくする -- これが LaunchDarkly のデモであることを明確に示す色、位置、またはテキストを使用します
3. 削除しやすくする -- // LaunchDarkly demo - safe to remove のような短いコメントを追加して、後で削除できる（またはテンプレートとして残せる）ことをユーザーに知らせます
4. 過剰に作り込まない -- これはデモであり、本番機能ではありません。数行のコードが理想的です

ユーザーを手順に沿って案内する

デモ要素を追加した後：

1. どこに追加したか、どのように確認するか（URL、ページ上の位置、コマンド）をユーザーに伝えます
2. 現在のフラグの状態が表示されることを確認してもらいます
3. ダッシュボードでフラグを切り替えるよう依頼します（ディープリンクを提供します：https://app.launchdarkly.com/projects/{projectKey}/flags/my-first-flag）
4. 更新または再実行して変更を確認してもらいます
5. 統合の成功を祝います

おめでとうございます

ユーザーは以下を無事に完了しました：

1. LaunchDarkly SDK をインストールした
2. LaunchDarkly に接続した
3. フィーチャーフラグを作成した
4. コード内で評価した
5. 切り替えて結果を確認した
6. 他の人に見せられるインタラクティブなデモを追加した

これは「証明となる」瞬間です -- ユーザーはリアルタイムで切り替えられる動作するフィーチャーフラグを手に入れました。デモ要素によって、それが具体的で共有可能なものになります。

次のスキルを促す： github.com/launchdarkly/ai-tooling から launchdarkly-flag-create スキルを インストールまたは有効化 することを提案します（npx skills add launchdarkly/ai-tooling --skill launchdarkly-flag-create -y --agent <agent>）。これにより、今後の作業 -- リポジトリの慣習に合ったフラグの作成、機能のラップ、配線の検証 -- に専用のプレイブックが用意されます。方法がわからない場合は、追加を手伝うことも提案します。

エラーハンドリング

認可エラー

いずれかのステップで 401 または 403 が返された場合：

D9 -- ブロッキング： 今すぐ構造化質問ツールを呼び出してください。

• question: 「認可エラー（[具体的なステータスコードとメッセージ]）を受け取りました。これを解決するにはあなたの対応が必要です -- 自動的に再試行することはできません。」
• options:
  • 「再認証します -- ldcli login を実行するか、トークンを更新してください」
  • 「アクセストークンを確認して再試行します」
  • 「アカウントを持っていません -- サインアップを手伝ってください」
  • 「プロジェクトまたは環境が存在しません -- 作成を手伝ってください」
• 停止してください。質問をテキストとして書かないでください。認可エラーを自動的に再試行しないでください -- これらは常にユーザーの対応が必要です。ユーザーがオプションを選択するまで続行しないでください。

その他のエラー

認証以外のエラー（フラグ作成の失敗、SDK キーの不一致、フラグがフォールバック値を返すなど）については、エラー出力、アプリケーションログ、およびプロジェクトに関する理解を用いて問題を診断してください。

提案する次のステップ:

• まだ利用可能でない場合は、github.com/launchdarkly/ai-tooling から launchdarkly-flag-create を インストール してください -- このオンボーディングフローは最初の boolean フラグのみを扱いますが、このスキルは既存のコードパターンに沿った実践的なフラグ作成をガイドします（そのスキルの前提条件に従い、LaunchDarkly MCP が必要です）。
• 同じディストリビューションの launchdarkly-flag-targeting を使用して、パーセンテージロールアウトとターゲティングルールを設定してください
• コンテキスト、実験、メトリクスなどの高度なトピックについては、LaunchDarkly ドキュメントをお読みください

---

完了したら、次に進んでください: オンボーディングの概要 および エディタールールとスキル（親オンボーディングスキルでのデフォルトの続行手順 -- MCP のセットアップでは ありません。それはステップ 4 です）。MCP のインストールやトラブルシューティングについては、mcp-configure および MCP 設定テンプレートを使用してください。