> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# モダンなフロントエンドフレームワークでの A/B テスト

> Kameleoon Activation API を使用して実験をプログラムでトリガーすることにより、React、Angular、Vue アプリケーションで A/B 実験を実行する方法。

<Note>
  実験やフィーチャーフラグを実行するには、優先するフレームワークに対応する [クライアントサイド SDK](../../../feature-experimentation/get-started/overview#javascript-sdk-の選択) を使用してください。[Feature Experimentation](https://www.kameleoon.com/en/platform/feature-experimentation) モジュールが利用できない場合や SDK のインストールが望ましくない場合は、本記事で説明する回避策に従って [Activation API](../api-reference/api-reference) を使用して実験を実行してください。
</Note>

## コンテキスト

モダンな JavaScript クライアントサイドフレームワーク（React、Angular、Vue など）は、DOM ツリーと要素を管理します（しばしば仮想 DOM を実装します）。この内部管理により、DOM 操作がフレームワークの動作と競合するため、特定のフレームワーク外でクライアントサイドテストを実装することが困難になります。要素やロジックに対する外部からの変更は、しばしば上書きされます。

DOM Mutation Observer を使用するなど、これらの問題への回避策はありますが、外部コードはこれらを注意深く扱う必要があります。侵襲的な外部アプローチを使用するのではなく、既存の React、Angular、または Vue のコードベースに直接バリエーションを実装し、実験をプログラムでトリガーします。このロジックは SDK の使用法を反映しています。Kameleoon のフロントエンドエンジンは [JavaScript SDK](../../../sdks/web-sdks/js-sdk) と同等の役割を果たします。

<Note>
  本記事で説明する手法では、実験やパーソナライゼーションを開始するために JS ソースコードの再デプロイが必要です。このアプローチはコーディングを簡素化しますが、IT デプロイメントなしでローンチを可能にする標準的な Kameleoon の方法論の柔軟性は欠けます。リポジトリへのアクセス権を持つ開発者が実装を行う必要があります。

  JS 実験の外部実装（Kameleoon のインジェクトされたコード経由）または両方のアプローチの組み合わせも引き続き可能です。
</Note>

ここで紹介する Activation API メソッドを使用するには、[このドキュメント](../../../web-experimentation/implementation-and-deployment/standard-implementation) に従ってクライアントサイドアプリケーションに Kameleoon をインストールしてください。

<Info>
  インストールプロセスは標準的な Web サイトと同じです。Kameleoon エンジンと Activation API を含む外部 JavaScript アプリケーションファイルを追加します。
</Info>

実験をトリガーするアプリケーションコードを実行する前に Kameleoon が完全にロードされていることを確認するため、[Kameleoon::Started](../api-reference/activation-api-events#kameleoonstarted) イベントをリッスンしてください。または、フレームワークコードの前に HTML ローダーページで Kameleoon スクリプトを [同期的](../../../web-experimentation/implementation-and-deployment/standard-implementation#同期タグ) にロードしてください。

## 実験の作成と設定

手順は標準の A/B 実験（バリエーションの作成、ゴールの選択、解析統合）と同じです。以下の要件に注意してください:

* コードエディタを使用して実験を作成します。
* API 経由で手動で実験をトリガーするには、[Explicit trigger](/user-manual/assets/segments/create-a-segment#Technical) ターゲティング条件を選択します。

コードで使用するために実験 ID とバリエーション ID をメモしてください。

<Note>
  ほとんどの場合、バリエーションの JS コードは空のままで構いません。ただし、バリエーションに JSON データを含めることで、アプリケーションコードでパラメータを取得することは有用です。これらのパラメータは、Kameleoon インターフェースで更新でき、再デプロイは不要です。
</Note>

## 実験をトリガーするためのサンプルコード

以下のコード例は、実験をトリガーし、現在のユーザーに関連付けられたバリエーションを取得する方法を示しています。`Kameleoon.API.Experiments.getAll()` は、インターフェース経由でローンチされていない実験を含みません。このセットアップにより、コードデプロイメントの準備と実験のローンチを独立して行うことができます。通常、IT チームはデプロイメントを計画し、プロダクトオーナーはローンチをスケジュールします。

```js theme={null}
var variationID;

// この時点で Kameleoon がロードされ、アクティブであることを確認します
var experiment = Kameleoon.API.Experiments.getById(75253);

/*
  実験が現在ライブではありません（まだローンチされていない、または一時停止中）。
  デフォルトの動作を行う必要があります。
*/
if (!experiment) {
  variationID = 0;
} else {
  Kameleoon.API.Experiments.trigger(experiment.id, false);

  /*
    実験はアクティブ化されていません。これは通常、ユーザーがバリエーションに
    割り当てられていない（トラフィックの一部がいずれのバリエーションにも割り当てられていない）か、
    キャッピング要件を満たしていないことを意味します。この場合もデフォルトの動作が行われます。
  */
  if (!experiment.associatedVariation) {
    variationID = 0;
  } else {
    variationID = experiment.associatedVariation.id;

    /*
      JSON パラメータ化手法の例 - additionalParameters 変数は
      Kameleoon のバックオフィスで設定した JSON コンテンツと等しくなります。
    */
    var additionalParameters = Kameleoon.API.Variations.execute(variationID);
  }
}

// このコードは実験に関連する変更を実装します

if (0 == variationID) {
  // デフォルト / 参照の表示する商品数
  recommendedProductsNumber = 5;
} else if (148382 == variationID) {
  // 推奨商品数を 10 に更新するバリエーション
  recommendedProductsNumber = 10;
} else if (187791 == variationID) {
  // 推奨商品数を 8 に更新するバリエーション
  recommendedProductsNumber = 8;
}
```

アプリケーションでバリエーション依存の JSON データを取得するには、Kameleoon インターフェースで以下のように JS バリエーションコードを設定します:

```js theme={null}
return {timeout: 500, errorMessage: "Something went wrong", productIDs: [536, 892]};
```