Reactのfilterメソッドを使った動的リスト作成の徹底解説

const newArray = array.filter(callback(element, index, array));

const filteredItems = items.filter(item => item.isActive);

const newArray = array.filter(callback(element, index, array));

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 30 }
];
const adults = people.filter(person => person.age >= 18);
console.log(adults);
// [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 }]

import React, { useState } from 'react';

const DynamicList = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

  // 検索条件に一致するアイテムだけを抽出
  const filteredItems = items.filter(item =>
    item.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <h2>動的リストの作成</h2>
      <input
        type="text"
        placeholder="検索..."
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default DynamicList;

import React, { useState } from 'react';

const SearchableList = () => {
  // 初期データと検索キーワードの状態を定義
  const [searchTerm, setSearchTerm] = useState('');
  const [items] = useState([
    'React',
    'Angular',
    'Vue',
    'Svelte',
    'Ember'
  ]);

  // 入力に基づいてリストをフィルタリング
  const filteredItems = items.filter(item =>
    item.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <h2>検索機能付き動的リスト</h2>
      <input
        type="text"
        placeholder="フレームワークを検索..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      {filteredItems.length > 0 ? (
        <ul>
          {filteredItems.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      ) : (
        <p>該当するアイテムが見つかりません。</p>
      )}
    </div>
  );
};

export default SearchableList;

import React, { useState, useMemo } from 'react';

const OptimizedList = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [items] = useState([...Array(10000).keys()].map(i => `Item ${i + 1}`));

  const filteredItems = useMemo(() => {
    return items.filter(item => item.toLowerCase().includes(searchTerm.toLowerCase()));
  }, [searchTerm, items]);

  return (
    <div>
      <h2>パフォーマンス最適化されたリスト</h2>
      <input
        type="text"
        placeholder="検索..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default OptimizedList;

import React, { useState } from 'react';
import { FixedSizeList as List } from 'react-window';

const VirtualizedList = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [items] = useState([...Array(10000).keys()].map(i => `Item ${i + 1}`));

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

  return (
    <div>
      <h2>仮想化によるリスト最適化</h2>
      <input
        type="text"
        placeholder="検索..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <List
        height={400}
        itemCount={filteredItems.length}
        itemSize={35}
        width={300}
      >
        {({ index, style }) => (
          <div style={style}>{filteredItems[index]}</div>
        )}
      </List>
    </div>
  );
};

export default VirtualizedList;

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

const items = data || []; // dataがnullやundefinedの場合でも安全
const filteredItems = items.filter(item => item.isActive);

const filteredItems = items.filter(item => item && item.isActive);

console.log(items);
const filteredItems = items.filter(item => {
  console.log(item);
  return item.isActive;
});

const filteredItems = items.filter(item => {
  console.log(`Item: ${item}, Condition: ${item.isActive}`);
  return item.isActive;
});

const [items, setItems] = useState([]);

MyComponent.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      isActive: PropTypes.bool.isRequired
    })
  )
};

const filteredItems = (items || []).filter(item => item && item.isActive);

import React, { useState } from 'react';

const MultiFilterList = () => {
  const [filters, setFilters] = useState({
    category: '',
    priceRange: 'all',
    inStock: false,
  });

  const [products] = useState([
    { name: 'Apple', category: 'Fruit', price: 1, inStock: true },
    { name: 'Carrot', category: 'Vegetable', price: 2, inStock: true },
    { name: 'Steak', category: 'Meat', price: 10, inStock: false },
    { name: 'Milk', category: 'Dairy', price: 3, inStock: true },
    { name: 'Cheese', category: 'Dairy', price: 5, inStock: false },
  ]);

  const filteredProducts = products.filter(product => {
    // カテゴリフィルタ
    if (filters.category && product.category !== filters.category) {
      return false;
    }
    // 価格帯フィルタ
    if (filters.priceRange !== 'all') {
      if (filters.priceRange === 'low' && product.price > 5) return false;
      if (filters.priceRange === 'high' && product.price <= 5) return false;
    }
    // 在庫フィルタ
    if (filters.inStock && !product.inStock) {
      return false;
    }
    return true;
  });

  return (
    <div>
      <h2>多条件フィルタリング</h2>
      <div>
        <label>
          カテゴリ:
          <select
            value={filters.category}
            onChange={e => setFilters({ ...filters, category: e.target.value })}
          >
            <option value="">すべて</option>
            <option value="Fruit">果物</option>
            <option value="Vegetable">野菜</option>
            <option value="Meat">肉</option>
            <option value="Dairy">乳製品</option>
          </select>
        </label>
        <label>
          価格帯:
          <select
            value={filters.priceRange}
            onChange={e =>
              setFilters({ ...filters, priceRange: e.target.value })
            }
          >
            <option value="all">すべて</option>
            <option value="low">5ドル以下</option>
            <option value="high">5ドル以上</option>
          </select>
        </label>
        <label>
          <input
            type="checkbox"
            checked={filters.inStock}
            onChange={e =>
              setFilters({ ...filters, inStock: e.target.checked })
            }
          />
          在庫のみ
        </label>
      </div>
      <ul>
        {filteredProducts.length > 0 ? (
          filteredProducts.map((product, index) => (
            <li key={index}>{product.name}</li>
          ))
        ) : (
          <p>該当する商品がありません。</p>
        )}
      </ul>
    </div>
  );
};

export default MultiFilterList;