Elasticsearch簡易検索UI構築　～Searchkit編～

Elasticsearch簡易検索UI構築 ～Search UIとSearchkit～ 2023/12/13 Jun Ohtani / @johtani 1

自己紹介 フリーランスエンジニア / コンサルタント 検索技術勉強会主催者の一人 検索システムの著者の一人 （ラムダノートより出版） 2

宣伝 絶賛発売中 検索についてはこちらの本が いいらしいですよ（ステマ） 以下、書籍のページへ 3

Elasticsearch簡易検索UI構築 - Search UI編先週、某所でSearch UI編に利用したLTのスライドはこちら https://noti.st/johtani/VHoIMR 4

Elasticsearchに入れたデータを検索するのに… KibanaのDev Tool？ KibanaのDiscover？ 毎回自作アプリ？ curl?? 5

Searchkitとは https://www.searchkit.co/ オープンソースのライブラリ InstantsearchというUIライブラリのバックエンドでEsを使える ようにしたもの JavaScript、Vue、React、Angularに対応 作者がElasticのEngineerだった 6

Searchkit V4 Searchkit V4： Search UI for Elasticsearch with Instantsearch | by Joseph McElroy | Searchkit Blog With Searchkit V4, we’re going back to Searchkit origins that made Searchkit popular in the first place, make it much easier to get started, but still be fully customisable. 作者のブログにあるように、こっちはV4 Search UIが利用しているものとは作りが違うみたいだ 7

Instantsearch？ https://github.com/algolia/instantsearch Algoliaが提供している検索のUIのOSSライブラリ Algoliaをバックエンドに使うのだが。。。 ほかの検索エンジン（MeilisearchやTypesenseなど）もコネク ターを提供している 8

Searchkitの使い方（スクリプトの呼び出し） 詳細はGetting Startedをご覧ください https://www.searchkit.co/docs/getting-started/with-javascript https://www.searchkit.co/docs/getting-started/with-javascript 9

Searchkitの使い方（HTMLタグ） https://www.searchkit.co/docs/getting-started/with-javascript 10

Searchkitの使い方（クライアント作成） https://www.searchkit.co/docs/getting-started/with-javascript 11

Searchkitの使い方（Widgetの追加） https://www.searchkit.co/docs/getting-started/with-javascript 12

Searchkitの使い方（FacetのWidgetの追加） https://www.searchkit.co/docs/getting-started/with-javascript 13

ブログ検索サンプル 14

そのほかにも Esを直接呼ばない方法（https://www.searchkit.co/docs/proxyelasticsearch/why） クエリの変更 （https://www.searchkit.co/docs/components/searchbox#example-adjusting-the-organic-query） knnクエリの利用 （https://www.searchkit.co/docs/components/searchbox#example-vector-search） 15

まとめ Searchkitはちょっと検索画面作ってみるのに便利 Instantsearchの便利なところも使えそう 独自のEsクエリにも置き換え可能 knnクエリも考慮されてる 16