1. 配列とリスト表示の基本をおさらい

Reactでリストを表示するときは、配列というデータのまとまりを使います。

配列とは、同じ種類の情報を順番に並べた箱のようなものです。買い物リストや、名前の一覧を思い浮かべると理解しやすいです。

Reactでは、この配列の中身を画面に並べることで、リスト表示を実現しています。

2. フィルタリングとは何か

フィルタリングとは、条件に合うものだけを残す操作のことです。

例えば、たくさんある果物の中から、りんごだけを選び出すようなイメージです。

プログラムでは、配列の中身を確認して、必要なものだけを新しい配列として取り出します。

3. filterの考え方をやさしく理解

filterは、配列から条件に合う要素だけを集める仕組みです。

難しい言葉に聞こえますが、「これは残す」「これは除く」と一つずつ確認していくだけです。

Reactでは、 filterとリスト表示を組み合わせることで、動的に表示内容を変えられます。

4. フィルタリングしてリスト表示する基本例


function App() {
  const numbers = [1, 2, 3, 4, 5];

  const evenNumbers = numbers.filter(number => number % 2 === 0);

  return (
    <ul>
      {evenNumbers.map(number => (
        <li key={number}>{number}</li>
      ))}
    </ul>
  );
}

（偶数だけがリストとして表示されます）

この例では、数字の中から偶数だけを選び、それをリストとして表示しています。

5. 文字列を条件で絞り込む例

数字だけでなく、文字の配列もフィルタリングできます。

例えば、名前の中から特定の文字を含むものだけを表示することも可能です。


function App() {
  const names = ["たろう", "はなこ", "じろう", "さくら"];

  const filteredNames = names.filter(name => name.includes("ろう"));

  return (
    <ul>
      {filteredNames.map(name => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

（「ろう」が含まれる名前だけが表示されます）

6. 入力内容でリストを絞り込む考え方

実際の画面では、ユーザーの入力に応じて表示を変えることがよくあります。

入力された文字を条件として、配列をフィルタリングすると、検索のような動きになります。


import React, { useState } from "react";

function App() {
  const [keyword, setKeyword] = useState("");
  const items = ["りんご", "みかん", "ばなな", "ぶどう"];

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

  return (
    <div>
      <input
        value={keyword}
        onChange={e => setKeyword(e.target.value)}
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（入力した文字に合う果物だけが表示されます）