Ai Entertainment Gaming Space Tech

Latest:

Wormholes vs Blac..5 Best Movies to ..How to Move Your ..How to Fully Dele..

ReactJSで簡単なフィルター検索バーを作る方法

本記事の日本語版は、いくつかの翻訳方法を組み合わせて作成しています。 できる限り英語版の内容やニュアンスに近づけるよう努めていますが、私たちはまだ日本語を学習中のため、不自然な表現や誤りが含まれている場合があります。ご理解とご支援に感謝いたします。

**フィルター検索バー（Filter Search Bar）**は、モダンなWebアプリケーションで最もよく使われる便利な機能のひとつです。 商品リスト、ブログ、ダッシュボードなど、どんなアプリでも動的に検索・フィルターができると、ユーザー体験が大きく向上します。

この記事では、Reactを使ってシンプルで効率的なフィルター検索バーを作る方法を、ステップごとに解説します。

学べること

  • Reactでリストを保存・表示する方法
  • 検索バーでユーザー入力を取得する方法
  • 入力内容に応じてリストを動的にフィルタリングする方法

ステップ1：Reactアプリをセットアップする

まだReactプロジェクトを作っていない場合は、ViteまたはCreate React Appを使って新規プロジェクトを作成しましょう。

Viteを使う場合（おすすめ）

npm create vite@latest filter-search -- --template react
cd filter-search
npm install
npm run dev

Create React Appを使う場合

npx create-react-app filter-search
cd filter-search
npm start

ステップ2：表示するリストを作成する

App.jsx（または App.js）に、まずは表示用のシンプルな配列を定義します。

const items = [
  "Apple",
  "Banana",
  "Cherry",
  "Grape",
  "Mango",
  "Orange",
  "Strawberry",
];

ステップ3：検索クエリ用のStateを追加する

ReactのuseStateフックを使って、検索バーの入力値を管理します。

import { useState } from "react";

function App() {
  const items = [
    "Apple",
    "Banana",
    "Cherry",
    "Grape",
    "Mango",
    "Orange",
    "Strawberry",
  ];

  const [searchTerm, setSearchTerm] = useState("");

  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h1>Fruit Search 🍓</h1>
      <input
        type="text"
        placeholder="Search fruits..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{
          padding: "10px",
          width: "250px",
          borderRadius: "8px",
          border: "1px solid #ccc",
        }}
      />
    </div>
  );
}

export default App;

ステップ4：動的にアイテムをフィルターする

ユーザーの入力内容に基づいて配列をフィルターしましょう。 JavaScriptのfilter()とincludes()メソッドを使います。

const filteredItems = items.filter((item) =>
  item.toLowerCase().includes(searchTerm.toLowerCase())
);

フィルターした結果をリストで表示します。

<ul>
  {filteredItems.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

完成コード（ここまでの全体）

import { useState } from "react";

function App() {
  const items = [
    "Apple",
    "Banana",
    "Cherry",
    "Grape",
    "Mango",
    "Orange",
    "Strawberry",
  ];

  const [searchTerm, setSearchTerm] = useState("");

  const filteredItems = items.filter((item) =>
    item.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h1>Fruit Search 🍓</h1>
      <input
        type="text"
        placeholder="Search fruits..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{
          padding: "10px",
          width: "250px",
          borderRadius: "8px",
          border: "1px solid #ccc",
        }}
      />

      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

ステップ5：ちょっとした改善（オプション）

より使いやすくするために、次のような改善を加えてみましょう。

  • 一致する項目がないときにメッセージを表示
  • 検索語をハイライト表示
  • アニメーションや入力のデバウンス（遅延処理）を追加

例：

{filteredItems.length > 0 ? (
  <ul>
    {filteredItems.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
) : (
  <p>No items found 😢</p>
)}

ボーナス：オブジェクトデータをフィルターする場合

データが配列ではなく、オブジェクトの配列の場合も簡単に応用できます。

const products = [
  { id: 1, name: "MacBook Pro", category: "Laptop" },
  { id: 2, name: "iPhone 14", category: "Phone" },
  { id: 3, name: "AirPods Pro", category: "Audio" },
];

const filteredProducts = products.filter((product) =>
  product.name.toLowerCase().includes(searchTerm.toLowerCase())
);

表示するには：

<ul>
  {filteredProducts.map((p) => (
    <li key={p.id}>
      {p.name} — <em>{p.category}</em>
    </li>
  ))}
</ul>

まとめ（TL;DR）

  1. データを配列で保持する
  2. useStateで検索入力を管理
  3. .filter()と.includes()でフィルター処理
  4. フィルターしたリストを動的に表示

これで、ReactJSで動的なフィルター検索バーを完成させることができました！ 🎉

小規模データにはこの方法で十分ですが、大規模データやAPI連携を行う場合は次のような工夫を検討してください：

  • lodash.debounceなどを使って入力処理を遅延させる
  • サーバーサイドでフィルタリングを行い、パフォーマンスを最適化する

この投稿を共有する:

← ルート化とジェイルブレイクはどうなったのでしょうか?
Gitの基本コマンド：開発者が知っておくべき必須ガイド →

© 2025 MOCHiiDEVS