React IntaltSearchの導入

2つの実装パターン#

Algolia で検索を実行する際、React InstantSearch と呼ばれるウィジェットを使うパターンと JavaScript API client を使うパターンがあります。

パターン	難易度	カスタム性
React InstantSearch	低	中
JavaScript API client	中	高

このドキュメントでは React InstantSearch （ウィジェット）をベースに解説します。どちらの実装方法でも一般的な検索UIの実装は問題なく可能です。

ウィジェットをカスタマイズして使う#

Algoliaにはたとえば以下のウィジェットが用意されています。

ウィジェット名	役割
searchBox	検索フォーム
sortBy	並べ替え
refinementList	絞り込み条件（タグやカテゴリ）
hits	検索結果の一覧
pagination	ページ送り
hitsPerPage	1ページあたりの表示件数設定

他のウィジェットはドキュメントで確認できます。

ウィジェットは機能と見た目を最初から備えていますが、デフォルトの見た目をそのまま使えるシーンは少ないでしょう。実際にはプロダクトのブランドに合わせて見た目を馴染ませる必要があります。それぞれのウィジェットは機能を抽出して挙動や見た目をカスタマイズすることとができます。これをカスタムウィジェットと呼びます。

基本的にカスタムウィジェットにして Tailwind CSS などでデザインすることになります。

実装#

基本的な実装は以下です。searchClient は 初期化 で用意したものを使います。

ターミナル
npm install react-instantsearch-dom

import { InstantSearch } from 'react-instantsearch-dom';

<InstantSearch
  searchClient={searchClient}
  indexName="インデックス名"
>
  // この中にウィジェットを配置
</InstantSearch>

React InstantSearch では各ウィジェットは必ず <InstantSearch> タグの中に設置する必要があります。この中に既存のウィジェット、あるいはカスタムウィジェットを設置することで検索結果の表示や条件の変更が可能になります。

ライブデモ