Elasticsearch Search UIでの初期ソート順の指定方法

概要

本記事はAIが作成しました。

ElasticsearchとSearch UIを使って検索インターフェースを構築する際、検索結果のソート順を制御することは一般的な要件です。このガイドでは、Search UI Reactライブラリでソートを設定する方法を説明します。

参考

https://www.elastic.co/docs/reference/search-ui/api-react-search-provider#api-react-search-provider-initial-state

初期状態とソート設定の理解

Search UIライブラリでは、検索の初期状態を指定することができ、ソートの方向とソートするフィールドを含めることができます。これは、ユーザーがページに最初にアクセスしたときに、検索結果が事前に決められた順序で表示されるようにしたい場合に特に役立ちます。

基本的なソート設定の例

Search UI設定でソートを指定する方法は次のとおりです：

const config = {
  // その他の設定オプション...
  initialState: {
    sortDirection: 'asc',
    sortField: 'field_tz_id',
  },
};

return (
  <SearchProvider config={config}>
    {/* 検索コンポーネント */}
  </SearchProvider>
);

ソート設定オプション

initialStateオブジェクトは、ソート関連の2つのプロパティを受け付けます：

1. sortField: ソートしたいElasticsearchインデックス内のフィールド
2. sortDirection: ソートの方向、'asc'（昇順）または'desc'（降順）

TypeScriptの型安全性

TypeScriptを使用している場合、ソート方向を定義するときにas constを使用して型安全性を確保できます：

const config = {
  // その他の設定...
  initialState: {
    sortDirection: 'asc' as const, // 'asc' | 'desc'として型付け
    sortField: 'field_tz_id',
  },
};

これにより、sortDirectionは「asc」または「desc」のみを取り得るようになり、潜在的なエラーを防ぐことができます。

結論

Elasticsearch Search UIで初期ソートを設定する際の参考になりましたら幸いです。