---
title: "ReactプロジェクトでJS SDKを設定する方法"
slug: "setting-up-the-js-sdk-in-your-react-project"
abstract: "JS SDKとコンポーネントを使ってReactプロジェクトを統合する際のセットアップSitecore Searchウォークスルー。"
---
# ReactプロジェクトでJS SDKを設定する方法

JS SDKを使ってReactアプリケーションをSitecore Searchと統合する前に、まずReactプロジェクトにJS SDKをインストールして設定する必要があります。このウォークスルーの各種手順は、Searchパッケージのインストールと認証をカバーしています。

このウォークスルーでは、以下の方法を説明します:

-   [JS SDKをインストールしてUI Components React。](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/setting-up-the-js-sdk-in-your-react-project.html#UUID-38bafbf0-bb41-8281-7aef-dca975f3f8de_section-idm234980677311652 "Install JS SDK and UI Components for React")
-   [認証情報を取り戻す。](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/setting-up-the-js-sdk-in-your-react-project.html#UUID-38bafbf0-bb41-8281-7aef-dca975f3f8de_section-idm234982228137888 "Retrieve credentials")
-   [認証情報で認証してください。](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/setting-up-the-js-sdk-in-your-react-project.html#UUID-38bafbf0-bb41-8281-7aef-dca975f3f8de_section-idm234982233461605 "Authenticate with credentials")

## JS SDKをインストールしてUI Components React

開発者はSitecore Search JS SDKやUI Componentsパッケージをプロジェクトにインストールできます。Reactコードでは、他のJSパッケージと同様にこれらのパッケージからクラス、関数、オブジェクトをインポートできます。

Reactの最新のJS SDKとUI Componentsをインストールするには:

1.  Search JS SDK for Reactをプロジェクトに追加するには、プロジェクト内で以下の動作を実行してください。
    
    npm install --save @sitecore-search/react
    
2.  プロジェクトにReact Search UI Componentsを追加するには、プロジェクト内で以下の手順を実行してください。
    
    npm install --save @sitecore-search/ui
    
3.  ReactプロジェクトのRootコンポーネントで、WidgetsProviderとコンポーネントPageControllerインポートします。
    
    import { PageController, WidgetsProvider } from "@sitecore-search/react";
    
    const Root = () => {
     PageController.getContext().setLocaleLanguage('en');
     PageController.getContext().setLocaleCountry('us');
     return (
     <WidgetsProvider>
     </WidgetsProvider>
    )};
    
    > !注複数のロケージを設定していない場合は、PageControllerコンポーネントとreturn文の前の2行を削除できます。この場合、デフォルトのロケールが自動的に使われます。
    

## 認証情報の取得

プライバシーとコンテンツを保護するため、申請をする前にアプリケーションがSearchで認証することを求めています。アカウントとドメインに関連付けられた認証情報を使用する必要があります。

Searchの認証情報を取得するには:

1.  Sitecore Searchの認証情報でログインしてSitecore Searchしてください。
2.  メニューバーで **Developer Resources**をクリックします。
3.  右側の **APIキー** ペインで、データリクエスト用のキーをコピーします。

## 認証情報で認証してください

プライバシーとコンテンツを保護するため、申請を行う前にアプリケーションはSearchで認証する必要があります。アカウントとドメインに関連付けられた認証情報を使用する必要があります。データ請求の前や最初のデータ請求時に認証を選択することができます。

> !重要JS SDKはクッキーを設定し、イベントを追跡する際にUUIDを含みます。検索結果をパーソナライズするために訪問者情報(UUID)が必要です。

JS SDKがアプリケーションを認証した後、JS SDKは今後のすべてのリクエストに必要な認証情報を含めます。

React申請のRootまたはAppの要素に資格を含めることをお勧めします。

サブドメインが設定されたときに認証するには:

ReactプロジェクトのRootコンポーネントで、[認証用の正しい認証情報](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/credentials-for-authentication.html "Credentials for authentication")を持つWidgetsProviderコンポーネントと、ロケールを設定するPageControllerコンポーネントを追加してください。これは以下のコードブロックに示されています。

import { PageController, WidgetsProvider } from "@sitecore-search/react";

const Root = () => {
 PageController.getContext().setLocaleLanguage('en');
 PageController.getContext().setLocaleCountry('us');
 return (
 <WidgetsProvider
 env='<environment>'
 customerKey='<customer key>'
 serviceHost='<api domain>'
 >
 <MyApp />
 </WidgetsProvider>
)};

> !注複数のロケージを設定していない場合は、PageControllerコンポーネントとreturn文の前の2行を削除できます。この場合、デフォルトのロケールが自動的に使われます。
> 
> 使用する認証情報は、ドメインの設定方法によってSitecore Search異なります。サブドメインがSearchで設定されていない場合の認証手順については、「 [ドメイン設定なしで認証」](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/authenticate-without-domain-set-up.html "Authenticate without domain set up")を参照してください。
> 
> env属性の値は、アジア/オセアニアドメインの場合apse2、ヨーロッパドメインの場合prodEu、米国ドメインの場合prodのいずれかでなければなりません。