---
title: "Search JS Dataパッケージを用いた統合"
slug: "integrating-using-search-js-data-package"
abstract: "JS DataパッケージSitecore Search実行時に検索UXを入力するために必要なオブジェクトやメソッドが含まれており、それらを使って検索体験を設定できます。"
---
# Search JS Dataパッケージを用いた統合

ウェブサイトやアプリケーションをSitecore Searchと統合する方法の一つに、Search JS Dataパッケージを利用する方法があります。

> !注もし組織に[JSS Next.js](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/javascript-services-sdk--jss--for-next-js.html)やJSS AngularアプリケーションがSitecore XM Cloudに接続されている場合は、XM CloudサイトでSitecore Search関連機能を[Sitecore CloudSDK](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/sitecore-cloud-sdk-for-javascript.html)。また、[クラウドSDKとSitecore Search REST APIの比較](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/en/cloud-sdk-comparison-charts.html)も参照してください。

Sitecore Searchは訪問者に合わせてパーソナライズできるヘッドレス検索エンジンです。 [検索可能なコンテンツをインデックス化](https://doc.sitecore.com/search/en/users/search-user-guide/index-items.html) し、それらをエンティティとして保存することでエンティティベースの検索を提供します。エンティティは、異なるカテゴリのコンテンツを表す独自の構造を持つ、異なる検索インデックス可能なオブジェクトタイプです。

フレームワークやフレーバーに関係なく、すべてのJavaScriptプロジェクトはSearchJS Dataパッケージを使ってSitecore Searchで設定された検索体験を作成できます。

## 構成

[Sitecore Searchインターフェース](https://doc.sitecore.com/search/ja/developers/search-developer-guide/the-sitecore-search-interface.html "The Sitecore Search interface") は、ドメインの認証、エンティティ、属性、ソース、機能などすべての構成を含むため、実装において重要な役割を果たします。

ContentストラテジストはSitecore Searchインターフェースでウィジェットや検索体験の設定を設定します。開発者は、アプリケーション内で検索結果を表示するためのウィジェットコンポーネントやUI要素を作成します。

コンソールに慣れておくことをお勧めします。統合時にコンソールから様々な設定にアクセスする必要があるかもしれません。

## 典型的な検索体験

典型的な検索体験やアプリケーション内の [ウィジェットコンポーネントとのやり取り](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/en/widget-templates.html) において、ユーザーは以下の通りです:

1.  検索にキーワードを提出します。
2.  検索結果を閲覧。
3.  ソー **ト** をクリックするとソート検索が始まります。
4.  検索結果を閲覧。
5.  アイテムをクリックして閲覧、ダウンロード、ブックマーク、または他のコンバージョンアクションを行います。

検索結果をパーソナライズするために、訪問者情報やウェブページの情報がデータリクエストに含まれ、必要なエンティティタイプも含まれています。これにより、ウィジェットを埋めるために必要なエンティティのみが検索され、受信されることが保証されます。

## 統合アーキテクチャ

あなたのアプリケーションはJS Dataパッケージを用いて統合され、シングルトンインスタンスであるDataProviderを通じてSearchサービスと通信します。実行時には、さまざまなメソッド、オブジェクト、型を使って構築されたリクエストを中継し、あらかじめ定義された型で応答を受け取ります。

![Requests traveling from a component to Search API and back.](https://doc.sitecore.com/api/markdown-image/search/ja/developers/search-developer-guide/images/search-data.png)

このデータパッケージはJSフレームワークに依存しず、リクエストの作成やレスポンス解析に使えるオブジェクトやメソッドが含まれています。扱われている多くのユースケースには以下があります:

-   [検索リクエストにウィジェットを追加する。](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/make-your-first-query.html "Make your first query")
-   [検索リクエストのコンテキスト設定。](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/search-request/the-context-interface.html "The Context interface")
-   [検索結果のフィルター設定。](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/search-request/the-filter-objects.html "The Filter objects")
-   [検索結果のフィルターにfacetsを追加する。](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/search-request/the-facet-interface.html "The Facet interface")
-   [質問と回答](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/search-request/the-questions-interface.html "The Questions interface")を求めています。

また、[応答オブジェクト](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/search-response.html "Search Response") や [ユーザーインタラクションを追跡する手法](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/tracking-user-interactions.html "Tracking user interactions")に関する重要な参考文献も見つけることができます。

## 統合の開始

開発プロセスのどの段階でもJSデータパッケージを使った統合を開始できます。UIコンポーネントで使われるモデルは、リクエスト内のエンティティと一致または対応しなければなりません。不一致はデータの欠落やエラーを引き起こすことがあります。

統合を始める前に、以下のことをする必要があります:

-   アプリケーション内でウィジェットとそのUIの [インベントリ](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/en/create-an-inventory-of-widgets.html) を作成しましょう。
-   ウィジェットが公開されているか確認してください。
-   Sitecore Searchのエンティティとフロントエンドモデル間の不一致を修正しましょう。

### 最初の検索クエリを行ってください

[JS Dataパッケージを使って最初の検索クエリを作成する際の](https://doc.sitecore.com/search/ja/developers/search-developer-guide/integrating-using-search-js-data-package/make-your-first-query.html "Make your first query") ウォークスルーは、パッケージのインストールやクエリ・ウィジェットオブジェクトの作成について説明しています。