基本的な使い方

まずはFuse.jsに対して、検索データを引数として渡して、インスタンス化します。

インスタンス化する際に引数は2個指定することができます。

第1引数は、検索をする対象データを指定できます。

第2引数は、検索時の詳細設定を指定できます。

例えば、keyオプションに検索時に使いたいデータのキーを指定することができます。

指定する場合は、配列内に文字列で指定します。

カンマ区切りすれば複数指定することができます。

new Fuse(searchTargetList, {
  key: ["title", "content"],
 })

他にもオプションが複数ありますが、代表的なものを3個紹介します。

threshold
- 0から1の間の数字を指定します。
- 数字が大きなれば、あいまいな検索が可能になります。
- 例えば、0.3くらいを指定すると厳格な一致が必要になりますが、0.8くらいを指定するとあいまいな検索を実施することができます。デフォルトは0.6です。
- 検索スコアと呼ばれるものです。
location
- 検索対象のどの位置に対して、検索を行うか指定できます。
- defaultは0です。この場合先頭付近を指定しています。
- 例えば、300文字のブログ記事の中盤付近で検索クエリに合致する文字列等が含まれているかを検索対象としたい場合は、locationに対して150を指定する必要があります。
distance
- locationで指定された位置からどれだけ離れた位置まで検索を行うかを指定します。
- defaultは100です。
- 300文字で構成されるブログ記事の全てを検索対象としたい場合は、distanceを300にする必要があります。
- ただし、distanceを大きく設定すると検索スコアが高くなり、不正確な情報として取り扱われることがあります。

Next.jsでFuse.jsを使って検索機能を実装する

今回実装する検索機能について

今回実装するNext.jsでの検索機能の実装はブログ記事の検索機能を想定しています。

まずSSG等でAPIから取得したブログ記事のデータを使ってFuse.jsのインスタンス化を行います。

後はインスタンスにキーワードを渡せば、該当するデータを戻り値として返してくれます。

Fuse.jsをインストールする

$ npm install --save fuse.js

データをインデックスする

まずはデータとオプションを指定して、Fuse.jsをインスタンス化します。

今回は、SSGで取得したデータを使います。

Next.jsで実装するFuse.jsを利用した検索機能

目次