Webエンジニアの皆さん、こんにちは！突然ですが皆さんのなかにJavaScriptでのデータ検索に悩んでいる方はいませんか？
今回は、Fuse.jsというJS検索ライブラリについて詳しく解説します。
Fuse.jsの概要
Fuse.jsはJavaScriptの軽量なフロントエンド検索ライブラリで、特に不完全なデータやタイポを含むデータに対して、高速かつ柔軟な検索を提供することを目的としています。
主な特徴と利点
- 曖昧検索: タイポやスペルミスがあっても関連する結果を見つけることができます。
- ゼロ依存: 他のライブラリに依存せず、スタンドアロンで動作します。
- JSONデータのサポート: JSON形式のデータを直接検索することができます。
基本的なセットアップ方法
必要なライブラリのインストール
Fuse.jsを使用するには、まずライブラリをインストールする必要があります。
npm install fuse.js最初のFuse.jsインスタンスの作成
こちらは、基本的なFuse.jsの使用方法のサンプルコードです。
const Fuse = require('fuse.js');
const books = [
{ title: "Old Man's War" },
{ title: "The Lock Artist" }
];
const fuse = new Fuse(books, { keys: ['title'] });
const result = fuse.search('Old Man');
console.log(result); // [{ title: "Old Man's War" }]実践的な使い方
JSONデータの検索
Fuse.jsは、JSONデータの検索をサポートしています。こちらのコードを使用すると、JSONデータを直接検索することができます。
const users = [
{ name: "John Doe", age: 25 },
{ name: "Jane Smith", age: 30 }
];
const fuse = new Fuse(users, { keys: ['name'] });
const result = fuse.search('Jane');
console.log(result); // [{ name: "Jane Smith", age: 30 }]曖昧検索の活用方法
曖昧検索は、Fuse.jsの強力な機能の一つです。ユーザーがタイポをしても、関連する結果を返すことができます。
const products = [
{ name: "Laptop" },
{ name: "Desktop" }
];
const fuse = new Fuse(products, { keys: ['name'] });
const result = fuse.search('Laptopp');
console.log(result); // [{ name: "Laptop" }]応用的な使い方
カスタム検索関数の作成
Fuse.jsでは、カスタム検索関数を作成することも可能です。
これによって、独自の検索ロジックを実装することができます。
const Fuse = require('fuse.js');
const data = [
{ text: "short" },
{ text: "much longer text" }
];
const customSearch = {
search: function(pattern) {
const regex = new RegExp(pattern, 'i');
return (item) => {
if (item.text.length > 10) {
return regex.test(item.text);
}
return false;
};
}
};
const fuse = new Fuse(data, { keys: ['text'], getFn: customSearch.search });
const result = fuse.search('longer');
console.log(result); // [{ text: "much longer text" }]
大量のデータに対する最適化
プロジェクトで大量のデータを扱う場合、検索のパフォーマンスを最適化するための設定が必要です。
Fuse.jsのオプションを調整すれば、高速な検索を実現できます。
const Fuse = require('fuse.js');
// 仮の大量のデータ
const largeData = Array.from({ length: 10000 }, (_, i) => ({ name: `Item ${i}` }));
const options = {
keys: ['name'],
threshold: 0.2, // 一致のしきい値を下げて厳格な検索を行う
minMatchCharLength: 3 // 3文字以上のクエリでのみ検索を行う
};
const fuse = new Fuse(largeData, options);
const result = fuse.search('Item 500');
console.log(result[0]); // { name: "Item 500" }
すべてのオプションをサンプルコードで解説！
Basic Options
isCaseSensitive
このオプションは、検索が大文字と小文字を区別するかどうかを制御します。デフォルトではfalseですが、trueに設定すると、検索はケースセンシティブになります。
利用シーン: ユーザー名や固有名詞など、大文字と小文字の区別が重要な場合に有用です。
const options = {
isCaseSensitive: true
};isCaseSensitive
使用シーン: 検索結果の精度を評価する必要がある場合に使用します。例えば、検索結果をユーザーに表示する際に、どの程度マッチしているかを示したい場合です。
const options = {
includeScore: true
};includeMatches
使用シーン: 検索結果内でどの部分がマッチしたかをユーザーに示す場合に使用します。例えば、検索キーワードをハイライトするために使われます。
const options = {
includeMatches: true
};minMatchCharLength
使用シーン: あまりにも短いマッチを除外したい場合に使用します。例えば、1文字や2文字の検索結果を無視したい場合です。
const options = {
minMatchCharLength: 2
};shouldSort
使用シーン: 検索結果をスコア順にソートする必要がある場合に使用します。これは、最も関連性の高い結果を最初に表示するために役立ちます。
const options = {
shouldSort: true
};findAllMatches
使用シーン: 検索パターンに完全に一致するものだけでなく、部分的に一致するすべての結果を見つけたい場合に使用します。
const options = {
findAllMatches: true
};
keys
使用シーン: オブジェクトの特定のキーだけを検索対象にする場合に使用します。例えば、書籍のデータでタイトルと著者名のみを検索対象にしたい場合です。
const options = {
keys: ["title", "author"]
};Fuzzy Matching Options
location
使用シーン: 検索パターンがテキスト内の特定の位置に近いと予想される場合に使用します。例えば、検索ワードが文書の始めにあると予想される場合に便利です。
const options = {
location: 0
};threshold
使用シーン: 検索結果の精度を調整する必要がある場合に使用します。低い値はより正確なマッチを、高い値はより広範なマッチを意味します。
const options = {
threshold: 0.6
};distance
使用シーン: マッチがlocationからどのくらい離れていてもよいかを設定する場合に使用します。低い値はより厳密な位置のマッチを、高い値はより柔軟な位置のマッチを意味します。
const options = {
distance: 100
};ignoreLocation
使用シーン: 検索パターンの位置を無視し、テキスト全体でのマッチを許容する場合に使用します。これは、位置に関わらずマッチするすべての結果を見つけたい場合に便利です。
const options = {
ignoreLocation: true
};Advanced Options
useExtendedSearch
使用シーン: Unix風の拡張検索コマンドを使用したい場合に適しています。これにより、より複雑な検索パターン（例えば、ワイルドカードや論理演算子を使用した検索）をサポートします。
const options = {
useExtendedSearch: true
};
getFn
使用シーン: オブジェクトから値を取得する独自の方法を定義したい場合に使用します。これは、特殊なデータ構造を持つオブジェクトで有用です。
const options = {
getFn: (obj, path) => obj[path]
};sortFn
使用シーン: 検索結果のソート方法をカスタマイズしたい場合に使用します。これにより、デフォルトのスコア順以外のソート基準を設定できます。
const options = {
sortFn: (a, b) => a.score - b.score
};ignoreFieldNorm
使用シーン: フィールドの長さがスコア計算に影響しないようにしたい場合に使用します。例えば、長いテキストと短いテキストが同等に扱われるようにします。
const options = {
ignoreFieldNorm: true
};fieldNormWeight
使用シーン: フィールド長ノルムがスコアに与える影響の度合いを調整したい場合に使用します。これにより、フィールドの長さが検索結果に与える重みを細かく調整できます。
const options = {
fieldNormWeight: 1.5
};まとめ
Fuse.jsは、Webエンジニアの皆さんにとって非常に有用なJS検索ライブラリです。
曖昧検索やJSONデータの検索など、多彩な機能を持つこのライブラリを活用することで、ユーザーフレンドリーな検索機能を実装することができます。
今後もFuse.jsのアップデートに注目して、さらに高度な検索機能の実装に挑戦してみましょう。
