React で色フィルタアプリを構築する

はじめに

このプロジェクトでは、React を使って色フィルタアプリケーションを構築する方法を学びます。このアプリケーションでは、ユーザーが探している色の名前を入力することで、色のリストをフィルタできます。このプロジェクトを通じて、React における状態管理、イベントハンドリング、条件付きレンダリングの仕組みを理解することができます。

👀 プレビュー

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

React プロジェクトをセットアップして依存関係を管理する方法
リアルタイムの色フィルタ機能を実装する方法
CSS を使ってアプリケーションをスタイリッシュにする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

React プロジェクトをセットアップして依存関係をインストールする
React における状態管理を利用してデータをフィルタする
ユーザー入力イベントを処理して UI を適切に更新する
CSS を使って React アプリケーションをスタイリッシュにする

プロジェクトのセットアップ

このステップでは、プロジェクトをセットアップして必要な依存関係をインストールする方法を学びます。

コードエディタを開き、プロジェクトディレクトリに移動します。

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

次に、ターミナルで npm install コマンドを使用して依存関係をダウンロードし、依存関係のダウンロードが完了するまで待った後、npm start コマンドを使用してプロジェクトを起動します。

プロジェクトが正常に起動したら、「Web 8080」をクリックしてブラウザでプレビューします。

✨ 解答を確認して練習

色フィルタを実装する

このステップでは、色フィルタ機能を実装します。

コードエディタで App.js ファイルを開きます。
このファイルで必要な依存関係をインポートします。
```
import React, { useState } from "react";
```
const App = () => {} の中に、フィルタされた色のリストを格納するための状態変数を追加します。
```
const [filteredList, setFilteredList] = useState(colors);
```

ユーザーの入力に基づいて色のリストをフィルタする handleOnChange 関数を実装します。

const handleOnChange = (e) => {
  const value = e.target.value;
  if (!value) {
    setFilteredList(colors);
  }

  const filtered = colors.filter((c) =>
    c.name.toUpperCase().includes(value.toUpperCase())
  );
  setFilteredList(filtered);
};

入力フィールドとフィルタされた色のリストをレンダリングします。

return (
  <div className="app">
    <input
      className="filter-input"
      type="text"
      name="filter"
      placeholder="Enter a colour name to see filtered results"
      onChange={handleOnChange}
    />
    <div className="list">
      {filteredList.map((c) => {
        return (
          <div
            className="list-item"
            key={c.name}
            style={{ backgroundColor: c.hex }}
          >
            {c.name}
          </div>
        );
      })}
    </div>
  </div>
);

const App = () => {} 内の完全なコードは以下の通りです。

const App = () => {
  const [filteredList, setFilteredList] = useState(colors);

  const handleOnChange = (e) => {
    const value = e.target.value;
    if (!value) {
      setFilteredList(colors);
    }

    const filtered = colors.filter((c) =>
      c.name.toUpperCase().includes(value.toUpperCase())
    );
    setFilteredList(filtered);
  };

  return (
    <div className="app">
      <input
        className="filter-input"
        type="text"
        name="filter"
        placeholder="Enter a colour name to see filtered results"
        onChange={handleOnChange}
      />
      <div className="list">
        {filteredList.map((c) => {
          return (
            <div
              className="list-item"
              key={c.name}
              style={{ backgroundColor: c.hex }}
            >
              {c.name}
            </div>
          );
        })}
      </div>
    </div>
  );
};

App.js ファイルを保存します。これで、ユーザーが入力フィールドに入力すると、アプリケーションは色のリストをリアルタイムでフィルタします。