---
title: "実装のためのReactリソース"
slug: "react-resources-for-your-implementation"
abstract: "React実装のために利用可能なSitecore SearchリソースOverview。"
---
# 実装のためのReactリソース

## React用のJS SDK

Sitecore Search Reactおよび[Search UIコンポーネント](https://www.npmjs.com/package/@sitecore-search/ui)[向けJS SDK](https://www.npmjs.com/package/@sitecore-search/react)パッケージパッケージには、さまざまなコンポーネント、関数、クエリフック、オブジェクトが含まれており、Search体験を迅速にReactアプリケーションに統合できます。以下のセクションでは、それらと実装における役割について説明します。

### Component

SDKでは、ウィジェットコンポーネントとSearch間のすべての通信を開始し調整するReact*コンポーネントをコンポーネント*と呼びます。 [WidgetsProvider](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/providers/widgetsprovider.html "WidgetsProvider")はそのようなコンポーネントであり、ウィジェットコンポーネントをラップします。実行時には[ReactQuery](https://www.npmjs.com/package/react-query)シングルトンクライアントを作成します。ウィジェットコンポーネントは、ウィジェットコンポーネントに関連付けられたコンテンツやデータのためにこのシングルトンにフックrfk\_idします。

### 高次の関数

開発者が統合しやすくなるため、Sitecore SearchはSDKにすぐに使える高次関数を含んでいます。

-   [widget](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/high-order-functions/widget-function.html "widget function") - UIコンポーネントをウィジェットコンポーネントに設定すること。
-   [setWidget](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/high-order-functions/setwidget-function.html "setWidget function") - Sitecore Searchインターフェース構成に合わせたウィジェットコンポーネントを作成すること。
-   [setWidgetType](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/high-order-functions/setwidgettype-function.html "setWidgetType function") - 特定のタイプの汎用ウィジェットコンポーネントを作成すること。

### ウィジェットコンポーネント

このSDKは、setWidgetとwidgetの2つの関数を提供し、UIコンポーネントをウィジェットコンポーネントに変換し、rfkIdとwidget typeを付けています。ウィジェットコンポーネントはクエリフックを使ってデータの要求と受信を行います。

上記の関数を使って、UI ComponentsパッケージからヘッドレスUIコンポーネントを組み、カスタムUIコンポーネントで構築したウィジェットコンポーネントを作成する必要があります。SDKは各ウィジェットタイプごとにクエリフックを提供します。

### クエリフック

WidgetProvider[の で](https://www.npmjs.com/package/react-query) の の で の の で 、ウィジェットコンポーネントは[SDKのReactフック](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/query-hooks.html "Query hooks")のいずれかを使用します。ウィジェットコンポーネントもフックを通じて入力されます。

以下の表はSDKにおける典型的なクエリフックを示しています。

キー

種類

概要

actions

Object

ウィジェットがリクエストを入力するために使うアクションやコールバック。各ウィジェットタイプには独自のリストがあります。

state

Object

ウィジェットによって入力されるRequestパラメータ。各ウィジェットタイプには独自のリストがあります。

queryResult

Object

応答オブジェクトを含みます。ウィジェットはその値しか読み取れません。

SDKはまた、ウィジェットをサポートするコンポーネントのデータを取得するための [補完的なクエリフック](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/complementary-query-hooks.html "Complementary query hooks") も提供しています。例えば、ウィジェットのリストやパンくずなどです。

## UIコンポーネントCLI

エラーを減らし、IDE内でのみ作業できるようにするには、Search [UIコンポーネントCLI](https://www.npmjs.com/package/@sitecore-search/cli)を利用できます。CLIを使えば、UIコンポーネントパッケージからウィジェットテンプレートをIDEターミナルを通じて直接アプリケーション内で再現できます。

[UI Components参照](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/ui-components-reference.html "UI components reference")はエンティティタイプごとにコンポーネントを一覧化しています。すべてのウィジェットテンプレートは、TypescriptおよびJavaScript Reactアプリケーションの両方でCLIを使って利用可能です。

[UIコンポーネントを使ったRapid Development Walkthroughシリーズ](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/rapid-development-using-search-ui-components-walkthrough-series.html "Rapid development using Search UI components walkthrough series")では、CLIのインストールと使用について説明します。

## Starter kit

[スターターキットのウェブサイト](https://developers.sitecorecloud.io/search-sdk/react/website)は、SDKとUI Componentsパッケージを使って構築された機能するミニサイトです。このサイトでは、さまざまな検索体験を構築できます。[GitHub](https://github.com/Sitecore/Sitecore-Search-JS-SDK-Starter-Kit/blob/main/README.md)リポジトリからウェブサイトをダウンロードしてスタータープロジェクトとして使うこともできますし、リポジトリをフォークして検索体験の背後にあるコードを読むこともできます。

## Sitecore開発者ポータル

私たちは、ツールや情報に直接アクセスできる開発者体験を向上させるために、[Sitecore開発者ポータル](https://developers.sitecore.com/content-management/search) を作成しました。ポータルにはさまざまな動画が掲載されています。

:::youtube{id="GhQNYlR7pvo"}