---
title: "最初の質問をしてください"
slug: "make-your-first-query"
abstract: "JSデータパッケージリクエストおよびウィジェットオブジェクトSitecore Search検索リクエストの作成およびディスパッチについて説明します。"
---
# 最初の質問をしてください

アプリケーションがSitecore Searchに検索リクエストを送信する前に、そのリクエストが認証される必要があります。組み込みのsetupメソッドは認可の成功と失敗を処理します。このウォークスルーでは、設置から最初の検索クエリへの回答対応までの手順をカバーします。

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

1.  [JSデータパッケージをインストールしてください](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/make-your-first-query.html#UUID-440f946c-08f9-4e28-8507-d9702944d2e3_N1753954203978 "Install the JS Data package")
2.  [セッションの認証](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/make-your-first-query.html#UUID-440f946c-08f9-4e28-8507-d9702944d2e3_section-idm4527382676712034134551292225 "Authenticate a session")
3.  [ウィジェットリクエストオブジェクトを作成してください](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/make-your-first-query.html#UUID-440f946c-08f9-4e28-8507-d9702944d2e3_section-idm4639433122916834134555124374 "Make a widget request object")
4.  [検索リクエストを出す](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/make-your-first-query.html#UUID-440f946c-08f9-4e28-8507-d9702944d2e3_N1753954245152 "Make a search request")
5.  [捜索リクエストを送信](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/make-your-first-query.html#UUID-440f946c-08f9-4e28-8507-d9702944d2e3_section-idm4560442156166434134565359414 "Dispatch a search request")

## JSデータパッケージをインストールしてください

開発を始める前に、NPMのJS Dataパッケージをインストールする必要があります。これはIDEで直接行うか、ターミナルを使って行うことができます。

プロジェクトにSearch JS Dataパッケージをインストールするには:

-   プロジェクト内のターミナルで、以下を実行します:
    
    npm install --save @sitecore-search/data
    

## セッションの認証

Searchへのすべてのリクエストは認証が必要です。組み込みのsetupメソッドを使ってセッションを認証できます。

セッションの認証方法:

1.  TypeScriptファイルindex.tsで、以下のコードブロックをコピー&ペーストします。
    
    import {
     setup,
    } from "@sitecore-search/data";
    
    setup({
     customerKey: '<YOUR\_CUSTOMER\_KEY>',
     apiKey:'<YOUR\_API\_KEY>',
    });
    
2.  Sitecore Searchのユーザーインターフェースのメインメニューで、**Developer Resources**をクリックします。
    
3.  **API Access**タブで*Customer key*と*API key*値をコピーしてください。
    
4.  index.tsファイルのsetup関数で、<YOUR\_CUSTOMER\_KEY>と<YOUR\_API\_KEY>をコピーした*Customer key*と*API key*の値に置き換えてください。
    

## ウィジェットリクエストオブジェクトを作成してください

ウィジェット固有のパラメータはWidgetRequestオブジェクトのSearchに送信されます。

ウィジェットリクエストオブジェクトを作成するには:

1.  index.tsファイル内で、ウィジェットとエンティティペアのウィジェットリクエストオブジェクトを作成するには、以下のコードブロックを貼り付け、インポートを調整してください:
    
    import {
     setup,
     WidgetRequest,
    } from "@sitecore-search/data";
    
    const searchResultsWidgetRequest = new WidgetRequest("rfkid\_7");
    searchResultsWidgetRequest.setEntity("content");
    const previewSearchWidgetRequest = new WidgetRequest("rfkid\_6");
    previewSearchWidgetRequest.setEntity("content");
    
2.  WidgetRequestオブジェクト内で、クエリ用語をコンテンツフィールドや属性名の形でリクエストに渡し、インポートを調整します。
    
    searchResultsWidgetRequest.addSearchContentField('attribute\_name');
    searchResultsWidgetRequest.setSearchQueryKeyphrase("search\_term");
    
3.  WidgetRequestオブジェクトでページ設定パラメータを設定するには、以下のコードブロックを貼り付け、インポートを調整します:
    
    searchResultsWidgetRequest.setSearchLimit(10); 
    searchResultsWidgetRequest.setSearchOffset(30);
    
    previewSearchWidgetRequest.setSearchLimit(10); 
    previewSearchWidgetRequest.setSearchOffset(30);
    

## 検索リクエストを出す

コンテキストとウィジェット情報を含むRequestオブジェクトがSearchに送信されます。そのパラメータには、含まれるすべてのウィジェットに適用されるものが含まれています。

検索リクエストを作成し、ウィジェットリクエストオブジェクトを追加するには:

1.  index.tsファイル内で、localeをコンテキストにしたリクエストを作成するには、以下のコードブロックをファイル内に貼り付け、インポートを調整します:
    
    import {
     setup,
     Request,
    } from "@sitecore-search/data";
    
    const request = new Request();
    request.setContextLocaleCountry("us");
    request.setContextLocaleLanguage("en");
    
2.  requestオブジェクトでは、WidgetRequestオブジェクトを個別に、または と の配列に追加できます:
    
    -   WidgetRequestオブジェクトを個別に追加するには、以下のコードブロックを貼り付け、インポートを調整してください:
        
        request.addWidgetItem(searchResultsWidgetRequest.toJson());
        request.addWidgetItem(previewSearchWidgetRequest.toJson());
        
    -   あるいは、配列にWidgetRequestオブジェクトを追加するには、以下のコードブロックを貼り付けてからインポートを調整してください:
        
        request.setWidgetItems(  searchResultsWidgetRequest.toJson(), previewSearchWidgetRequest.toJson()  );
        

## 捜索リクエストを送信

DataProviderはUIとSearch間のすべての通信を統括するシングルトンです。

DataProviderシングルトンを使って検索リクエストを送信するには:

-   index.tsファイル内に以下のコードブロックを貼り付け、インポートを調整します。
    
    import {
     setup,
     DataProvider,
     Request,
     WidgetRequest,
    } from "@sitecore-search/data";
    
    DataProvider.get(request.toJson())
     .then((response) => console.log(JSON.stringify(response, null, 4)))
     .catch((error) => console.log(JSON.stringify(error, null, 4)));