JSであいまい検索ができるFuse.jsの使い方

Javascript だけであいまい検索が実装できるFuse.jsの使い方メモです。
インストール後、3 ステップで使うことができます。

私はこのライブラリをEye Catch Maker（アイキャッチメーカー）のアイコン検索機能に使っています。

インストール

CDN か npm でインストールすることができます。

CDN でインストールする場合は、html の<head>に以下を記述します。
3.3.1の部分はバージョンなのでリリース一覧を見て適宜変更します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.3.1/fuse.min.js"></script>

nmp で最新の Fuse.js をインストールする場合は、以下のコマンドを打ちます。

$ npm install fuse.js

3 ステップで実行

(1) 検索対象データの用意

検索対象データを以下のような配列形式で用意します。

var list = [
  {
    "name": "angry",
    "term": [
      "disapprove",
      "emoticon",
      "face",
      "mad",
      "upset"
    ]
  },
  {
    "name": "frown",
    "term": [
      "disapprove",
      "emoticon",
      "face",
      "rating",
      "sad"
    ]
  },
  //略...
];

(2) オプション設定

検索を実行する時のオプション設定を行います。
何度か検索を試しながら、最適なオプションの設定値を決めていくと良いと思います。

var options = {
  threshold: 0.3,
  keys: [
    "name",
    "term"
  ]
};

(3) 検索実行！

var fuse = new Fuse(list, options);
var result = fuse.search("sad"); //検索クエリ
console.log(result); // 検索結果がコンソールに表示されます

オプションの種類

caseSensitive

trueかfalseを設定します。
有効にすると、大文字と小文字が区別されます。

includeScore

trueかfalseを設定します。
有効にすると、検索クエリと検索結果がどれくらい一致したかのスコアが、それぞれの検索結果に0.0〜1.0の値で併記されます。

一致度が高いほど0.0に近くなります。
この検索スコアは、オプションのshouldSortやthresholdを設定する時に参考になるので、設定値のチューニングを行う時にも設定しておくと良いと思います。

includeMatches

trueかfalseを設定します。
有効にすると、検索クエリと一致したのが検索対象文字列のどの位置か、それぞれの検索結果に併記されます。

この値もチューニング時の参考になります。
また、UI 上で一致箇所をハイライトするのにも使えます。

minMatchCharLength

0以上の整数を設定します。
includeMatchesを設定した場合に使用します。
一致した文字列が、ここで設定した文字数を超える検索結果のみ返されるようになります。

shouldSort

trueかfalseを設定します。
有効にした場合、検索結果は検索スコアによってソートされます。

tokenize

trueかfalseを設定します。
有効にした場合、文字列が分解（tokenize）され、個々の単語と文字列全体の両方から検索スコアが算出されます。

threshold、distance、locationは無視されます。

matchAllTokens

trueかfalseを設定します。
tokenizeが有効な時のみ動作します。
有効にした場合、個々の単語すべてに一致するもののみが検索されます。

findAllMatches

trueかfalseを設定します。
有効にした場合、完全に一致する文字列が見つかっても、検索対象の最後まで検索が行われます。

id

検索対象データ内の任意のキーを設定します。
指定した場合、ここで指定したキーのみが検索結果に返されます。

keys

検索対象データ内の任意のキーを設定します。
ここで指定したキーのデータが検索対象になります

指定しないと検索対象データが無いことになってしまうので、普通は必ず 1 つ以上指定する必要があります。

location

0以上の整数を設定します。
検索クエリが、検索対象文字列の何文字目に一致するはずかの場所を指定します。

threshold

0.0〜1.0を設定します。
検索スコアのしきい値です。

値を大きくするほど、条件が緩くなり、沢山の結果が返ってきます。

distance

0以上の整数を設定します。
locationで設定した位置からの距離を指定します。

0を指定した場合は、locationで設定した位置ぴったりのものが検索されます。
thresholdを0.8にして、distance を1000を指定した場合は、locationで設定した位置から 800 字以内に一致するものが検索されます。

maxPatternLength

0以上の整数を設定します。
検索クエリの最大長です。

デフォルトは32です。
maxPatternLengthを超える検索クエリを入力すると、エラーが返されます。
検索クエリが長いほど、動作が重くなるので、適切な値を設定する必要があります

まとめ

以上です。
間違っていたらすみません（教えてください）。
英語ができる人は公式ページのドキュメントを見た方が話が早いと思います。

Fuse.js めっちゃ便利！

今回のテストコードはこちら