---
title: "カスタムUIコンポーネントを用いた開発"
slug: "development-using-custom-ui-components"
abstract: "Sitecore Search JS SDKを使ってSearchと統合するOverview。"
---
# カスタムUIコンポーネントを用いた開発

Sitecore Search JS SDKを用いて、ヘッドレスUIコンポーネントを使わずにReactアプリケーションを統合Searchできます。JS SDKは様々なクエリフック、コンポーネント、関数を提供します。これらを使って、JS SDKはアプリケーションとのデータやり取りを管理Search。

以下は、ReactアプリケーションをJS SDK for Reactでクエリフックしたい場合の典型的なシナリオです:

-   機能的なウェブアプリケーションにSearchデータを入れたいのです。
-   パッケージ内でUIコンポーネントを使うことは制限Search UI Components。

> !注完全に機能する検索ウェブアプリケーションの [スターターキットのウェブサイト](https://developers.sitecorecloud.io/search-sdk/react/website) をご覧ください。そのアプリは[GitHubリポジトリ](https://github.com/Sitecore/Sitecore-Search-JS-SDK-Starter-Kit/blob/main/README.md)からダウンロードできます。

以下のウォークスルーでは、JS SDKを使ってコンポーネントを使ってアプリケーションを統合する方法を説明します。

統合を始める前に、以下のことを忘れないでください:

-   アプリケーション内でウィジェットとそのUIの [インベントリ](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") を作成しましょう。
-   ウィジェットが公開されていることを確認してください。

Search JS SDKおよびカスタムUIコンポーネントを使ってReactアプリケーションを統合するには:

1.  プロジェクトに [React用のJS SDK](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 "Setting up the JS SDK in your React project") をインストールしてください。
2.  [各ウィジェットに対して、クエリフックを使ってそのUIコンポーネントをSearchに接続します](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/query-hooks.html "Query hooks")
3.  [各UIコンポーネントごとに、クエリフックで登録されていないイベントを追跡するコードを追加してください](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/events/events.html "Events")