[React] useState

# まとめ

#### `useState`とは
> `useState`は、コンポーネントに`state`変数を追加するためのReactフックです。
※[React](https://ja.react.dev/reference/react/useState)

`useState`は、Reactの関数コンポーネントで状態（state）を管理するためのフックです。`useState`を使用することで、状態変数を作成し、その状態を更新する関数を提供します。

# 目次
- [基本構文](#基本構文)
- [活用例1：`useState`のみ](#活用例1：`useState`のみ)
- [活用例2：`useState`と`filter`メソッド](#活用例2：`useState`と`filter`メソッド)
- [活用例3：`useState`と`filter`メソッドと`indexOf`メソッド](#活用例3：`useState`と`filter`メソッドと`indexOf`メソッド)
 
# 基本構文
~~~JS:JavaScript
const [state, setState] = useState(initialState);
~~~

### 解説
- `state`：現在のstateの値を保持します。
- `setState`：stateを更新するための関数（set関数）です。`state`を別の値に更新し、再レンダリングすることができます。
- `initialState`：stateの初期値です。

# 活用例1：`useState`のみ
以下のコードは、ボタンをクリックするとカウントが増加するシンプルなカウンターを実装しています。

~~~JS:JavaScript
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count:{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;
~~~

# 活用例2：`useState`と`filter`メソッド]
以下のコードは、リストの中から特定の条件を満たすアイテムをフィルタリングする機能です。ここでは、入力された文字列に基づいてリストをフィルタリングします。

~~~JS:JavaScript
import React, { useState } from 'react';

function FilterList() {
  const [items, setItems] = useState(['Apple', 'Banana', 'Cherry', 'Date']);
  const [filterText, setFilterText] = useState('');

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

  return (
    <div>
      <input 
        type="text" 
        value={filterText} 
        onChange={(e) => setFilterText(e.target.value)} 
        placeholder="Filter items"
      />
      <ul>
        {filteredItems.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

export default FilterList;
~~~

### 処理の流れ
1. インポートと初期化
    ~~~JS:JavaScript
    import React, { useState } from 'react';
    ~~~
    - `React`と`useState`フックをインポートします。
    
1. コンポーネントの定義
    ~~~JS:JavaScript
   function FilterList() {
       const [items, setItems] = useState(['Apple', 'Banana', 'Cherry', 'Date']);
       const [filterText, setFilterText] = useState('');
    ~~~
    - `FilterList`コンポーネントを定義します。
    - `items`stateを`useState`を使って初期化します。これはフィルタリング対象のアイテムのリストです。
    - `filterText`stateを`useState`を使って初期化します。これはユーザーが入力するフィルタテキストです。

1. フィルタリングロジック
    ~~~JS:JavaScript
    const filteredItems = items.filter(item => item.toLowerCase().includes(filterText.toLowerCase()));
    ~~~
    - `items`配列に対して`filter`メソッドを適用し、`filterText`に基づいてアイテムをフィルタリングします。
    - `item.toLowerCase().includes(filterText.toLowerCase())`で、大文字小文字を区別せずに一致するアイテムを探します。
    
1. レンダリング
    ~~~JS:JavaScript
    return (
      <div>
        <input 
          type="text" 
          value={filterText} 
          onChange={(e) => setFilterText(e.target.value)} 
          placeholder="Filter items"
        />
        <ul>
          {filteredItems.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>
    );
    ~~~
    - `input`要素をレンダリングします。ユーザーがテキストを入力すると、`onChange`イベントが発生し、`setFilterText`が呼ばれて`filterText`stateが更新されます。
    - `filteredItems`を`map`メソッドでリストに変換し、`<li>`要素としてレンダリングします。

# 活用例3：`useState`と`filter`メソッドと`indexOf`メソッド
以下のコードは、`useState`と`filter`メソッドと`indexOf`メソッドを組み合わせて重複を取り除く機能です。ここでは、リスト内の重複するアイテムを取り除いて表示します。

~~~JS:JavaScripr
import React, { useState } from 'react';

function UniqueList() {
  const [items, setItems] = useState(['user1', 'user2', 'user2', 'user3', 'user4', 'user5', 'user5', 'user5', 'user5']);
  
  const uniqueItems = items.filter((item, index, array) => array.indexOf(item) === index);

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

export default UniqueList;
~~~

### 処理の流れ
1. インポートと初期化
    ~~~JS:JavaScript
    import React, { useState } from 'react';
    ~~~
    - `React`と`useState`フックをインポートします。
    
1. コンポーネントの定義
    ~~~JS:JavaScript
    function UniqueList() {
      const [items, setItems] = useState(['user1', 'user2', 'user2', 'user3', 'user4', 'user5', 'user5', 'user5', 'user5']);
    ~~~
    - `UniqueList`コンポーネントを定義します。
    - `items`stateを`useState`を使って初期化します。これは重複を含むアイテムのリストです。

1. フィルタリングロジック
    ~~~JS:JavaScript
    const uniqueItems = items.filter((item, index, array) => array.indexOf(item) === index);
    ~~~
    - `items`配列に対して`filter`メソッドを適用し、重複するアイテムを取り除きます。
    - `array.indexOf(item) === index`で、配列内でそのアイテムが最初に出現するインデックスと現在のインデックスが同じである場合にのみアイテムを含めます。これにより、重複を排除します。
    
1. レンダリング
    ~~~JS:JavaScript
    return (
      <div>
        <ul>
          {uniqueItems.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>
    );
    ~~~
    - `uniqueItems`を`map`メソッドでリストに変換し、`<li>`要素としてレンダリングします。

# 参考リンク
- [React](https://ja.react.dev/reference/react/useState)
- [初心者でもわかるReactHookのuseStateを使い方](https://reffect.co.jp/react/react-hook-usestate-understand)