---
title: "ウェブ体験でJavaScriptを使う"
slug: "use-javascript-in-a-web-experience"
abstract: "ウェブ体験でJavaScriptを使った際の動的データの挿入方法(Sitecore Personalize)。"
---
# ウェブ体験でJavaScriptを使う

組織のサイトでウェブ体験を稼働させるには、JavaScriptエディタでドキュメントオブジェクトモデル(DOM)のどこにオファーやコンテンツを表示するかを指定する必要があります。これにより、組織のウェブサイトに[HTMLをどこに挿入・レンダリング](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiences/introduction-to-web-experiences-in-sitecore-personalize/create-a-web-experience/inserting-a-web-experience-in-your-html.html "Inserting a web experience in your HTML") するかが決定されます。

JavaScriptエディタは、あなたのバリアントで [クライアントサイドJavaScriptを実行](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/using-client-side-javascript-in-personalization/using-client-side-javascript-in-personalization.html "Using client-side JavaScript in personalization") させることができます。

ほとんどのバリアントは、[サーバー側のゲストデータを](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/using-server-side-javascript-in-sitecore-personalize/using-server-side-javascript-in-sitecore-personalize.html "Using server-side JavaScript in Sitecore Personalize") 組織のウェブサイトに渡す必要があります。例えば、ゲストの名前、所在地、ロイヤルティ番号などです。これを可能にするために、APIレスポンスに動的データを含めるように設定し、バリアントが実行された際にサーバーからデータを要求し、その後バリアントに渡されるようにする必要があります。

JavaScriptを使って、APIレスポンスからインデックスでネストされた値にアクセスできます。

> !注このエクスペリエンスはゲスト属性などのサーバー側データを呼び出し、CSJSで利用できます。これにはゲストの完全な履歴だけでなく、リアルタイムセッションデータの連続ストリームも含まれます。

ウェブ体験でJavaScriptを使用するには:

1.  **エクスペリエンス**タイルで、設定したいバリアントの隣にある**編集**アイコンをクリックします。
    
2.  コードエディターの**JavaScript**タブで、ウェブ体験で使いたいJavaScriptを入力します。JavaScriptコードを自動的にフォーマット・インデントするには、![Format JS icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/preetify.png)をクリックします。
    
3.  動的データをJavaScriptに挿入するには、**Data**タブの**Data Selector**検索ボックスでゲストのメールアドレスやその他の識別子を入力して検索してください。これにより、データモデルの属性やパスにアクセスできます。
    
    > !ヒントコードの設定やテスト時によく使うゲストがいる場合は、![Bookmark icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/bookmark.png) をクリックしてゲストをブックマークし、検索しなくて済むようにしましょう。
    
    ![Editing the JavaScript to apply personalization in a variant.](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/Use_HTML_custom_code.png)
    
4.  動的なゲストデータを含めるには、**ゲストデータモデル** ツリーの下で ![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) をクリックし、「 **JavaScriptとしてパスをコピー**」をクリックします。
    
    ゲストデータモデルの任意の部分をJavaScript内で使用可能で、データ拡張やセグメントメンバーシップも含まれます。以下のように示されています。
    
    ![Using segment memberships from the guest data model in the JavaScript.](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/guestsegmentmembership1.png)
    
    この例では、コードはguest.segmentMemberships.nameを用いてゲストがrewards\_memberセグメントに属するかvip\_tierセグメントのいずれかに属するかを判定します。
    
    > !注ゲスト属性はグローバルなJavaScriptオブジェクトとして利用できません。 guest.firstNameのような直接ドット表記アクセスはサポートされておらず、ゲストオブジェクトがJavaScript実行範囲に定義されていないため参照エラーが発生します。JavaScriptでゲスト属性にアクセスするには、Handlebars補間を使います:
    > 
    > const firstName = "{{guest.firstName}}";
    > 
    > ハンドルバーの式はスクリプト実行前に評価されるため、JavaScriptベースのバリアントでゲストデータを取得するためのサポート手法となっています。オートコンプリートやCopy Path as JavaScriptはguest.firstNameのようなパスを提案することがありますが、これらはデータモデルのパスを指し、JavaScript変数スコープではなく、JavaScript内で使用する場合はHandlebars構文でラップする必要があります。
    
5.  意思決定モデル応答からの動的データを含めるには、**意思決定モデル応答** ツリーを展開し、「 ![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) 」をクリックして「 **JavaScriptとしてパスをコピー**」をクリックしてください。
    
6.  体験応答からの動的データを含めるには、**経験応答** ツリーを展開し、「 ![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) 」をクリックして「 **パスをJavaScriptとしてコピー**」をクリックしてください。
    
7.  **JavaScript**タブでデータを貼り付けて「**保存**」をクリックします。
    
8.  コードエディタを閉じるには ![back.png](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/back.png) をクリックしてください。
    
    APIリクエストを作成する際には動的データも含めなければなりません。これにより、体験が実行される際に [サーバーが動的データを要求](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/using-server-side-javascript-in-sitecore-personalize/using-server-side-javascript-in-sitecore-personalize.html "Using server-side JavaScript in Sitecore Personalize") し、それをバリアントに渡すことが保証されます。