instantsearch

InstantSearch

InstantSearch を使って、本番品質の検索エクスペリエンスを構築できます。以下のワークフローを順番に進めてください。手順を省略しないでください。

対応ライブラリ

InstantSearch には 3 つのライブラリがあります。プロジェクトの依存関係やフレームワークから該当するものを判別するか、ユーザーに尋ねてください。

ライブラリ	パッケージ	使用する場面
React InstantSearch	react-instantsearch	React、Next.js、Remix
Vue InstantSearch	vue-instantsearch	Vue、Nuxt
InstantSearch.js	instantsearch.js	Vanilla JS、または専用ライブラリがないフレームワーク全般

ライブラリを特定したら、該当するリファレンスディレクトリ（例：references/react/）を、技術ルール、アンチパターン、スタイリング、用語集、パターン固有のガイダンスを確認する際に使用してください。

注： ライブラリごとの対応範囲：

• React InstantSearch：完全対応（オートコンプリート、検索結果ページ、カスタムウィジェット、ミドルウェア、SSR）。
• Vue InstantSearch と InstantSearch.js：ライブラリレベルのルールとオートコンプリートのみ対応しています。その他のパターンについては、正確な情報源の確認に従い、複雑なフローの足場を作成する前にユーザーに確認してください。

ワークフロー

1. 調査

コードを書く前に、まず状況を把握してください。最初に、InstantSearch がすでにコードベースにセットアップされているか（検索クライアント、プロバイダー、既存のウィジェット）を確認します。セットアップ済みの場合は、再度質問するのではなく、既存の設定を読み取ってください。

新規に開始する場合は、ユーザーの回答を待ってから次の手順に進み、段階的に進めてください。

• 認証情報：Algolia のアプリ ID、検索専用 API キー、インデックス名をユーザーに尋ねてください。

• クエリサジェスト：クエリサジェストのインデックスがあるか、ユーザーに尋ねてください。

• スキーマ：認証情報を取得したら、メインインデックスからいくつかのレコードを取得し、利用可能な属性とその形式を確認してください。すべての項目のリストを尋ねるのではなく、ユーザーに内容を確認してください。レンダリング方法を提案するには、事前にスキーマが必要です。クエリサジェストのインデックスから取得する必要はありません。形式は標準で、ウィジェットが処理します。

  curl -s -X POST \
    "https://${APP_ID}.algolia.net/1/indexes/${INDEX_NAME}/query" \
    -H "x-algolia-api-key: ${API_KEY}" \
    -H "x-algolia-application-id: ${APP_ID}" \
    -H "content-type: application/json" \
    -d '{"params": "hitsPerPage=5"}'
  

• プロジェクトの調査：プロジェクトで採用されているスタイリング方法、ブレークポイント、レイアウト、レスポンシブパターン、コンポーネントライブラリ、フレームワークの詳細を確認してください。どの InstantSearch ライブラリを使うか特定してください（上の表を参照）。

• ルート：詳細ページのルートパターン（例：/products/[id]、/articles/[slug]）を探し、既存の一覧ページまたは検索結果ページを確認してください。見つかった場合は、実際にクエリパラメーターを読み取って動的な結果を表示するか（静的な一覧ではないか）を確認してください。見つからない場合、またはページが静的な場合は、ユーザーに「検索クエリの送信後、検索結果をどのページに表示しますか？ それとも検索結果ページはありませんか？」と尋ねてください。

• 配置：検索エクスペリエンスを UI のどこに配置するか確認してください。パターンの機能リファレンスを参照するか、ユーザーに尋ねてください。

• レンダリング：検索結果の表示方法について、具体的な番号付きの選択肢をユーザーに提示してください。選択肢は、スキーマ（利用可能な属性）とプロジェクトのデザインに応じて決めます。提示する選択肢は、パターンの機能リファレンスを参照してください。

認証情報、スキーマ、レンダリング方法の希望、プロジェクトのデザインに関する理解が揃うまで、先に進まないでください。

2. 信頼できる情報源の確認

このスキルでは、価値の高いパターンのみを対象にガイダンスを用意しています。このスキルで明示的にドキュメント化されていないウィジェット、フック、コネクター、プロパティ、ミドルウェア、将来のフラグ、API が必要な場合は、コードを書く前に必ず信頼できる情報源を確認してください。トレーニングデータは古く、情報が欠落しており、プロパティの形状について誤っていることもよくあります。

正確なコマンドと URL のパターンについては、ライブラリの信頼できる情報源を参照してください。

ライブラリ	参照先
React	source-of-truth.md
Vue	source-of-truth.md
JS	source-of-truth.md

参照先では、常に次の順序で確認します。

1. プロパティの形状、renderState、コネクターのコントラクトについて、node_modules 内のインストール済みの型を読みます。
2. 正規の URL パターンで最新の Algolia ドキュメントを取得します。
3. スタイル設定するクラス名について、インストール済みの CSS／ソースを grep します。
4. **その後でのみ、コードを書きます。**いずれかの手順に失敗した場合（オフライン、404、型が見つからないなど）は、推測せずにユーザーに確認してください。

パターンリファレンスがある場合でも、そのリファレンスで明示的に扱われていないプロパティや動作が必要なら、必ずこの手順を実施してください。

3. 構築

ライブラリとユーザーの依頼に合ったパターンリファレンスを選んでください。依頼内容に該当するパターンリファレンスがない場合は、信頼できる情報源の確認（手順 2）に従い、推測に基づくウィジェットツリーをひな形として作成する前に、ユーザーに確認してください。

各ライブラリで利用できるパターン：

パターン	React	Vue	JS
オートコンプリート	機能、スタイル設定、アンチパターン	機能、スタイル設定、アンチパターン	機能、スタイル設定、アンチパターン
検索結果ページ（ファセット検索、並べ替え、ページネーションを含む）	機能、スタイル設定、アンチパターン	—	—
ライブラリレベルのリファレンスも読み、適用してください（パターンにかかわらず適用します）。

リファレンス	React	Vue	JS
技術ルール	technology-rules.md	technology-rules.md	technology-rules.md
アンチパターン	anti-patterns.md	anti-patterns.md	anti-patterns.md
スタイリング	styling.md	styling.md	styling.md
用語集	glossary.md	glossary.md	glossary.md
信頼できる情報源	source-of-truth.md	source-of-truth.md	source-of-truth.md
カスタムウィジェット	custom-widgets.md	—	—
ミドルウェア	middleware.md	—	—
SSR	ssr.md	—	—
パターン	React	Vue	JS
------------------------------------------------------------	------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------	---	---
オートコンプリート	features, styling, anti-patterns	—	—
検索結果ページ（ファセット検索、並べ替え、ページネーションを含む）	features, styling, anti-patterns	—	—

ライブラリレベルのリファレンスも読み、適用してください（パターンにかかわらず適用します）。

参照	React	Vue	JS
テクノロジールール	technology-rules.md	—	—
アンチパターン	anti-patterns.md	—	—
スタイリング	styling.md	—	—
用語集	glossary.md	—	—
信頼できる情報源	source-of-truth.md	—	—
カスタムウィジェット	custom-widgets.md	—	—
ミドルウェア	middleware.md	—	—
SSR	ssr.md	—	—

最初に型定義と最新のドキュメントを確認してください（ステップ 2）。両方で解決できない場合にのみ、ユーザーに尋ねてください。古いライブラリや推測した API に頼らないでください。

4. スタイル

ライブラリのスタイルガイドに従って手順を進めてから、パターン固有のスタイルガイドを適用してください。サイトで既に使われている CSS の手法、配色、タイポグラフィ、余白、コンポーネントのパターンに合わせてください。

5. レビュー

ライブラリのアンチパターン、パターン固有のアンチパターン、機能チェックリストに照らして作業をレビューしてください。違反があれば修正してください。