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

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

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

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

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

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

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

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

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

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

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

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

visual_testing フォルダー內(nèi)に移動するには:

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

building-in-public-slack フォルダー內(nèi)に移動するには:

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

ミニ検索フォルダー內(nèi)に移動するには:

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

フロントエンドフォルダー內(nèi)に移動するには:

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

次に、フロントエンド フォルダー內(nèi)に Vite をインストールします。フロントエンド フォルダー內(nèi)に 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\

次のコードを?qū)g行すると、scss もインストールされます:

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

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

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

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 の現(xiàn)在のコンテンツを操作したくないので、クリーンアップする必要があります。クリーンアップすると、コンテンツは次のようになります:

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

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

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

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

 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 サーバーを使用したモック バックエンドのセットアップ:

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

http://localhost:5173/

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

http://localhost:5173/

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

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

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

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

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

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

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

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

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

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

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

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

第 8 章
ブログリスト.jsx に戻る:
BlogList.jsx でのブログの設(shè)定と狀態(tài)の読み込み

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

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

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

すっごく:

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 によると、「このフックは、コンポーネントがレンダリングされるたびに関數(shù)を?qū)g行します。コンポーネントは最初にロードされたときに最初にレンダリングされ、狀態(tài)が変化したときにも実行されることを覚えておいてください。これは DOM を再レンダリングするため、更新できるようになります」ブラウザ內(nèi)のその狀態(tài) (変更された狀態(tài))。

すっごく
先ほど fetchBlogs に書いた関數(shù)を 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: データ內(nèi)のどのフィールド (タイトル、作成者、テキスト) を検索用にインデックス付けするかを指定します。

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

次にこれ:

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

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

さて、さらに先に進(jìn)みましょう。ページがレンダリングされ、レンダリング時のブログの狀態(tài)は最初は空です。私たちのコードでは、これが禮儀であることがわかります。

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

?

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

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

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

次にこれ:

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

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

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

 VITE v5.4.11 ?ready in 332 ms

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

ブログの狀態(tài)を更新すると、空のブログ配列がデータで埋められます。

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

http://localhost:5173/

そして、次のコードを?qū)g行して、受信したデータをそれに追加します:

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;

以下を見てください。これは、レンダリング時にコードを?qū)g行したときの console.log の実際の內(nèi)容です。

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

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

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

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

handleSearch 関數(shù)の説明:

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

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

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

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

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

  // ブログの狀態(tài)が満たされているかどうかを確認(rèn)します
  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("検索結(jié)果:", 検索結(jié)果);
    setResults(検索結(jié)果);
  };

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

  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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173282557470183.jpg" class="lazy" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"></p>

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

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

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

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

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


          </div>

            
        

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