---
title: "Search UIコンポーネントウォークスルーシリーズを用いた急速な開発"
slug: "rapid-development-using-search-ui-components-walkthrough-series"
abstract: "JS SDKとUIコンポーネントを用いてSitecore Searchと統合するためのウォークスルーシリーズ。"
---
# Search UIコンポーネントウォークスルーシリーズを用いた急速な開発

カスタムUIコンポーネントやSearch UI ComponentsとSearch JS SDKを組み合わせることで、ReactアプリケーションをSitecore Searchと統合することも可能です。また、アプリケーション内でコンポーネントをインスタンス化するためのSearch [UIコンポーネントCLI](https://www.npmjs.com/package/@sitecore-search/cli)も提供しています。

実装を始める前に、インスタンス化するウィジェットコンポーネントの [インベントリを作成する](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/create-an-inventory-of-widgets.html "Create an inventory of widgets") ことをお勧めします。Sitecore Searchユーザーインターフェースの**Widgets**セクションには、実装用に設定されたすべてのウィジェットが一覧です。アプリケーションで使われていないウィジェットがいくつかあるかもしれません。

> !注ウィジェットコンポーネントの正確かつ成功したレンダリングのために:
> 
> -   ウィジェットコンポーネントは、関連付けるウィジェットと同じ**rfk\_id**とタイプを持つ必要があります。
>     
> -   関連するウィジェットは公開されなければなりません。
>     

このウォークスルーシリーズでは、ReactおよびUIコンポーネント向けにJS SDKを用いてアプリケーションを統合する最も一般的かつ最速の方法を説明します。

JS SDKを使うSitecore Searchのユーザーインターフェースを開発するには、以下のウォークスルーに従ってください:

1.  [Reactプロジェクトを立ち上げる](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/set-up-the-react-project.html "Set up the React project")
2.  [ウィジェットコンポーネントの作成](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/walkthrough--creating-widget-components.html "Walkthrough: Creating widget components")
3.  [訪問者とのやり取りの追跡](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/walkthrough--tracking-visitor-interactions.html "Walkthrough: Tracking visitor interactions")
4.  [Reactアプリケーションへのウィジェット追加](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/walkthrough--adding-widgets-to-the-react-application.html "Walkthrough: Adding widgets to the React application")

> !ヒントその他の用途については、以下を参照してください:
> 
> -   [JSのSDKとUI Componentsの仕事](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/working-with-js-sdk-and-ui-components.html "Working with JS SDK and UI Components")