React で MiniSearch を使用する: 高度な検索とフィルタリングが簡単に

第 1 章
MiniSearch とは何ですか?また、JavaScript フィルタリングをどのように強化しますか?

MiniSearch は、小規模から中規模のデータセット内の全文検索用の軽量 JavaScript ライブラリです。データのインデックスを作成し、あいまい一致、前方一致検索、関連性によるランキング、フィールドの重み付けなどの高度な検索機能を可能にします。

ファジー マッチングとは、正確に正しく入力されていなくても、単語または単語の一部を見つけることを意味します。たとえば、「wolf」の代わりに「wlf」と入力した場合でも、あいまい検索では「wolf」を含む結果が見つかります。

前方検索では、何かの先頭にある単語や部分を検索します。したがって、「車」を検索している場合、前方一致検索では「カート」または「炭酸」も検索されます。

miniSearch によって提供されるこれらの機能は、たとえ完璧に入力されていなくても、探しているものを見つけるのに役立ちます。これにより、検索結果がより正確で役立つものになります。

そしてなぜそれが必要なのでしょうか?

それがもたらす最初の利点は、高度な検索機能です:
従来のフィルタリングは通常、正確な値または基本パターンに一致します。 MiniSearch は、より高度なテキスト マッチングを提供します。これらの高度な検索機能は、「back」の代わりに「bak」と入力した場合など、間違いを推測できます。MiniSearch はその意味を認識します。

従来のフィルタリング/検索に勝るもう 1 つの利点は、関連性ランキングです:
MiniSearch は、関連性に基づいて結果をランク付けし、検索を多用するアプリケーションでのユーザー エクスペリエンスを向上させます。これにより、最も関連性の高い結果が最初に表示されます。たとえば、「JavaScript」を検索すると、システムは「JavaScript」に目立つまたは頻繁に言及するドキュメントまたはアイテムを優先し、全体的な検索エクスペリエンスを向上させます。

これで邪魔にならないようになったので、基本的な React.js アプリケーションを作成し、クライアント側で MiniSearch を使用する方法を見てみましょう。

第 2 章
MiniSearch を使用して React アプリをセットアップする方法:

OK、プロジェクトをセットアップしましょう。そして、プロジェクトをセットアップするために、私は常に信頼できる vite を使用するつもりです。私が使用するテキスト エディターまたは IDE は、Visual Studio コード エディターという悪者です。

ターミナルで次のプロンプトを使用して Vite をセットアップします。これらのフォルダーは以前に作成済みであると言わなければなりません:

visual_testing フォルダー内に移動するには:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

building-in-public-slack フォルダー内に移動するには:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

ミニ検索フォルダー内に移動するには:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

フロントエンドフォルダー内に移動するには:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

次に、フロントエンド フォルダー内に Vite をインストールします。フロントエンド フォルダー内に Vite を配置する必要があるためです。

次のコード行でインストールします。

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

次に、選択できるオプションが表示されます。ここでは Javascript と React を使用します。 React はフレームワークとして、JavaScript はバリアントとして機能します。

完了しました。私は次のように迎えられます:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

次に、minisearch パッケージと React-router-dom パッケージをインストールします。ただし、このチュートリアルでは、react-router パッケージは必要ありません:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

次のコードを実行すると、scss もインストールされます:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

さて、これにはバックエンドはありません。代わりに、データを外部のどこかに配置します。詳細については後ほど説明します。

ターミナルで npm run dev を実行して小さなアプリを起動すると、ターミナルで次のような応答が得られます。

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

次のリンク (Ctrl キーを押しながらクリック) をたどる必要があります:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

Ctrl キーを押しながらクリックすると:

Done. Now run:

 npm install
 npm run dev

ブラウザでは次のようなページが表示されます。

第 3 章
App.jsx のクリーニング":

App.jsx は最初は次のようになります:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install minisearch react-router-dom

そして、これが上の写真にある React ロゴと Vite ロゴの原因となっています。ただし、App.jsx の現在のコンテンツを操作したくないので、クリーンアップする必要があります。クリーンアップすると、コンテンツは次のようになります:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass

これにより、ブラウザには空白の画面が残ります。

第 4 章
プロジェクトの準備: モックデータベースの作成:

通常、データベース、スーパーベース、ファイアベースなどからデータを取得する必要があります。あるいはどこかのAPIでも構いません。 json ファイルからデータを取得します。 db.json と呼びます。このファイルは、アプリケーションのルートにある data というフォルダーに保存されます。 db ファイルの内容は次のようになります:

 VITE v5.4.11  ready in 332 ms

 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h + enter to show help

そうだ！あなたの家の男はゲーマーです。そして、お知らせしたいのですが、私はこれらのタイトルをプレイしたくてたまらないのです。
それでは、ファイルをざっと見てみましょう。

このファイルには、ブログ エントリの配列を含む JSON オブジェクトが含まれています。各オブジェクトはビデオ ゲームを表し、次のフィールドがあります:

title: ビデオ ゲームの名前。

テキスト: ゲームの簡単な説明。

著者: ブログエントリを書いた人。

id: 各ブログ投稿の一意の識別子。例: "1"、"2"、"3"

第 5 章
JSON サーバーを使用したモック バックエンドのセットアップ:

データベースを起動して実行するには、ターミナルに移動する必要があります。ターミナルで別のポートを開いて、ターミナルで次のコマンドを実行できます:

http://localhost:5173/

得られる応答は次のとおりです:

http://localhost:5173/

これは、模擬サーバー/データベースが動作する準備ができていることを意味します。

第 6 章
フロントエンドの構築: BlogList コンポーネントの作成:

よし！次に、src フォルダー内に移動し、そこにコンポーネント フォルダーを作成します。コンポーネント フォルダー内に、ブログという名前の別のフォルダーを作成します。 blog フォルダー内に、blog-list という名前の別のフォルダーを作成します。そして、この blog-list フォルダー内に 2 つのファイルを作成します。 BlogList.jsx と BlogList.module.scss。後者についてはここでは触れません。

次に、BlogList コンポーネントを次のように設定します。

PS C:\Users\vawkei\Documents> cd .\visual_testing\

第 7 章
React でのルーティング: App.jsx での BlogList のレンダリング:

BlogList の基本構造を構築したので、画面/ブラウザ上でレンダリングできるように、それを App.jsx に接続する必要があります。そのためには、App.jsx ファイルを調べて、次のコードを書き出してみましょう:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

ここでは役に立たないので、レイアウトについては触れませんでした。

次に、main.jsx で、次のようにブラウザ ルーターを設定します。

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

これらすべてを適切に配置すると、App.jsx で起こったことはすべてブラウザ/画面に表示されるようになります。

第 8 章
ブログリスト.jsx に戻る:
BlogList.jsx でのブログの設定と状態の読み込み

ここでは、操作するいくつかの状態を作成し、localhost:8000 で実行されているローカル サーバーからブログ データを取得します。

最初に作成するステートはブログ用です。アプリのレンダリング時には空の配列として開始され、後でモック サーバーからブログ データを受信したときに更新されます。

次に作成する 2 番目のステートはロード用です。データがまだロードされているかどうかを追跡します。 false として開始され、データのフェッチ中に true に設定できます。

すっごく:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

第 9 章
取得したデータの表示:
Jsx のビルド:

まず、jsx コンポーネントをビルドします。そのために、以下のリターン部分にこれを書きます:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

第 10 章
取得したデータの表示:
useEffect の登場です:

これはあまり役に立ちません。コンソールでデータを取得しているにもかかわらず、画面に表示されません。そして、これを画面に表示するには、react の悪者の 1 つである useEffect の助けが必要です。

useEffect とは何ですか?
NetNin​​ja によると、「このフックは、コンポーネントがレンダリングされるたびに関数を実行します。コンポーネントは最初にロードされたときに最初にレンダリングされ、状態が変化したときにも実行されることを覚えておいてください。これは DOM を再レンダリングするため、更新できるようになります」ブラウザ内のその状態 (変更された状態)。

すっごく
先ほど fetchBlogs に書いた関数を useEffect:
に置きます。

PS C:\Users\vawkei\Documents> cd .\visual_testing\

映画『インセプション』のように見えますか? 落ち着いてください。すぐに説明します。映画『オーメン』ではありませんが、オー！男性諸君！こちらはメルン{M.E.R.N}のクリストファー・ノーランです。???

次に、Jsx でこれをコーディングします。

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

第 12 章
MiniSearch を使用するとどのように見えるか:

OK、これで画面上にブログをレンダリングできるようになりました。では、MiniSearch を使ってみましょう。コード全体は次のようになります:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

このコードは、全文検索を有効にするために MiniSearch の新しいインスタンスを作成します。その動作は次のとおりです:

fields: データ内のどのフィールド (タイトル、作成者、テキスト) を検索用にインデックス付けするかを指定します。

storeFields: 検索結果にどのフィールドが含まれるかを定義します。これらのフィールドは、簡単に取得できるよう、インデックス付きデータと一緒に保存されます。

次にこれ:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

このコードは、ページのレンダリング後に miniSearch によってインデックス付けされたドキュメントの総数を示します。

さて、さらに先に進みましょう。ページがレンダリングされ、レンダリング時のブログの状態は最初は空です。私たちのコードでは、これが礼儀であることがわかります。

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

その後、fetchBlogs 関数を使用してデータを取得します。そこには実際にデータがあり、次のコードを検索することでデータがあることがわかります。

Done. Now run:

 npm install
 npm run dev

このコードは次のとおりです:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install minisearch react-router-dom

これは、以前にインデックス付けされたすべての項目を削除するために使用されます。これは、新しいデータのインデックスを再作成する必要がある場合、または現在の検索インデックスをクリアする必要がある場合に便利です。私たちは白紙の状態にしたいので、これを使用します。

次にこれ:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass

miniSearch.addAll(data) メソッドは、データ配列内のすべての項目を MiniSearch インデックスに追加します。

データを取得した後、次のコードを実行してブログを更新します。

 VITE v5.4.11  ready in 332 ms

 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h + enter to show help

ブログの状態を更新すると、空のブログ配列がデータで埋められます。

その過程で、次のコードを使用して、miniSearch インスタンスをクリーンアップして、新しいデータにインデックスを付ける余地を与えます。

http://localhost:5173/

そして、次のコードを実行して、受信したデータをそれに追加します:

http://localhost:5173/

これらすべてが行われたため、miniSearch インスタンスにデータがロードされるはずです。はい、そのとおりです。このコード行をチェックアウトすると:

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
           {" "}
      <div>
               {" "}
        <a href="https://vite.dev" target="_blank">
                    <img src={viteLogo} className="logo" alt="Vite logo" />     
           {" "}
        </a>
                <a href="https://react.dev" target="_blank">
                   {" "}
          <img src={reactLogo} className="logo react" alt="React logo" />     
           {" "}
        </a>     {" "}
      </div>
            <h1>Vite + React</h1>      <div className="card">
               {" "}
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}       {" "}
        </button>
                <p>
          Edit <code>src/App.jsx</code> and save to test HMR        {" "}
        </p>     {" "}
      </div>      <p className="read-the-docs">Click on the Vite and React logos to learn more       </p>
    </>
  );
}
export default App;

そこにインデックス付けされたデータがあることを示しています。ただし、ページを再レンダリングすると、miniSearch がリセットされるため、データが失われます。このことは、次のコードのおかげでわかります:

function App() {
  return <>     </>;
}

export default App;

以下を見てください。これは、レンダリング時にコードを実行したときの console.log の実際の内容です。

{
 "blogs": [
 {
 "title": "Wolfenstein",
 "text": "Wolfenstein is a groundbreaking video game series that pioneered the first-person shooter genre. Debuting in 1981, it gained fame with Wolfenstein 3D (1992), placing players in World War II as an Allied spy battling Nazis. Known for its intense gameplay, alternate history, and stealth-action elements, the series continues to evolve with modern reboots and thrilling narratives.",
 "author": "voke",
 "id": "1"
 },
 {
 "title": "Bioshock",
 "text": "BioShock is a critically acclaimed video game series blending first-person shooting with deep storytelling. Set in dystopian worlds like the underwater city of Rapture and floating Columbia, it explores themes of power, morality, and free will. Known for its immersive environments, philosophical depth, and plasmid abilities, BioShock redefined narrative-driven gaming since its debut in 2007.",
 "author": "ese",
 "id": "2"
 },
 {
 "id": "3550",
 "author": "jite",
 "title": "Doom",
 "text": "Doom is a legendary first-person shooter series that revolutionized gaming with its 1993 debut. Players battle demons from Hell across Mars and Earth, armed with iconic weapons like the shotgun and BFG. Known for its fast-paced action, heavy metal soundtrack, and gory visuals, Doom remains a cornerstone of the FPS genre and a cultural phenomenon."
 }
 ]
}

第十四章
解決策: useRef:

レンダリングごとに miniSearch がリセットされるのを防ぐために、レンダリング間で同じインスタンスが保持されるように、miniSearch を useRef に移動します。その方法は次のとおりです:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

このコード ブロックは、useRef を使用して、MiniSearch の単一インスタンスがレンダリング間で持続することを保証します。 miniSearchRef は、MiniSearch インスタンスを作成して保存します。

この useRef コードがあれば、家に帰って乾いているはずです。

handleSearch 関数の説明:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

handleSearch 関数はユーザーが入力したものをすべて受け取り、ユーザーの入力で状態クエリを更新します。 (イベント.ターゲット.値)。入力が空の場合、結果の状態がクリアされ、それ以降の処理が停止されます。次に、miniSearch を使用して、あいまい一致 (わずかな不一致は許容) でインデックス付きデータを検索します。次に、結果の状態を更新します。

第 15 章
最終コード:
したがって、BlogList の最終コードは次のようになります:

import { useEffect, useRef, useState } from "react";
「./BlogList.module.scss」からクラスをインポートします。
MiniSearch を「minisearch」からインポートします。

const ブログリスト = () => {
  // ブログと isLoading 状態を作成します。
  const [ブログ, setBlogs] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  // クエリと結果の状態を作成します。
  const [クエリ、setQuery] = useState("");
  const [結果、setResults] = useState([]);

  // ブログの状態が満たされているかどうかを確認します
  console.log(ブログ);

  const miniSearchRef = useRef(
    新しいミニサーチ({
      field: ["title", "author", "text"], // 検索対象のフィールド
      storeFields: ["title", "author", "text"], // 返されるフィールド
    })
  );
  const miniSearch = miniSearchRef.current;
  console.log("レンダリング後にインデックスされたブログ:", miniSearch.documentCount);

  // モックデータベースからブログを取得します:
  const fetchBlogs = async () => {
    setIsLoading(true);

    試す {
      const 応答 = await fetch("http://localhost:8000/blogs");

      if (!response.ok) {
        新しい Error() をスローします。
      }

      const data = 応答を待ちます.json();
      コンソール.ログ(データ);

      miniSearch.removeAll();

      miniSearch.addAll(データ);
      console.log("インデックスされたブログ:", miniSearch.documentCount);

      setブログ(データ);
    } キャッチ (エラー) {
      constメッセージ =
        エラーインスタンス エラー? error.message : "何か問題が発生しました";
      console.log(メッセージ);
    } ついに {
      setIsLoading(false);
    }
  };

  // 検索機能:
  const handleSearch = (イベント) => {
    setQuery(event.target.value);

    if (event.target.value.trim() === "") {
      setResults([])を返します;
    }

    console.log(event.target.value);

    const searchResults = miniSearch.search(event.target.value, { fuzzy: 0.5 });
    console.log("検索結果:", 検索結果);
    setResults(検索結果);
  };

  // 結果やブログを条件付きで表示または検索します
  const displayPosts = results.length > 0 ?結果 : ブログ;

  useEffect(() => {
    fetchブログ();
  }、[]);

  戻る （
    <div>
            <h2>ブログリスト</h2>
      {isLoading && <p>Loading...</p>} {" "}
      <div className={classes.search}>
               {" "}
        <input placeholder="search" value={query} onChange={handleSearch} />     {" "}
      </div>
            <div className={classes.blogs}>
        {displayPosts.map((ブログ) => {
          // {blogs.map((ブログ) => {
          戻る （
            <div key="{ブログ.id}" classname="{classes.blog}">



<p><strong>第十六章</strong><br>
<strong>テストしてみる:</strong><br>
ここで「wolfenst」と入力すると、次のように表示されます:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173282557470183.jpg" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"></p>

<p>フィルタリングする前に、私が完全に綴るのを待たなかったことがわかります。</p>

<p><em>批判的に入力してみましょう:</em></p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173282557528617.jpg" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"><br>
「批判的」はタイトルの名前ではありませんが、テキストを検索し、「批判的」という単語が含まれるすべてのコンテンツを抽出します。そして、批判的な内容が盛り込まれた唯一のコンテンツは Bioshock であると言っても過言ではありません。</p>

<p><strong>最終的な考え</strong><br>
この MiniSearch の旅にお付き合いいただき、ありがとうございます。お時間と辛抱強くお時間を割いていただき、誠にありがとうございます。このガイドが、Reactjs プロジェクトに MiniSearch を効果的に統合する方法をナビゲートし、理解するのに役立つことを願っています。</p>

<p><strong>著者について</strong><br>
Voke Bernard は、情熱的で意欲的な M.E.R.N 開発者であり、動的な React.js および Express.js アプリケーションの構築を専門としています。彼は常に新しいプロジェクトでのコラボレーションを検討しています。彼と一緒に働くことに興味があれば、お気軽にご連絡ください。</p>


          </div>

            
        

以上がReact で MiniSearch を使用する: 高度な検索とフィルタリングが簡単にの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。