[React] useState

まとめ

useStateとは

useStateは、コンポーネントにstate変数を追加するためのReactフックです。
※React

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

目次

• 基本構文
• 活用例1：useStateのみ
• 活用例2：useStateとfilterメソッド
• 活用例3：useStateとfilterメソッドとindexOfメソッド

基本構文

JavaScript

const [state, setState] = useState(initialState);

解説

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

活用例1：useStateのみ

以下のコードは、ボタンをクリックするとカウントが増加するシンプルなカウンターを実装しています。

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メソッド]

以下のコードは、リストの中から特定の条件を満たすアイテムをフィルタリングする機能です。ここでは、入力された文字列に基づいてリストをフィルタリングします。

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. インポートと初期化

   JavaScript

   import React, { useState } from 'react';
   

   • ReactとuseStateフックをインポートします。

2. コンポーネントの定義

   JavaScript

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

   • FilterListコンポーネントを定義します。
   • itemsstateをuseStateを使って初期化します。これはフィルタリング対象のアイテムのリストです。
   • filterTextstateをuseStateを使って初期化します。これはユーザーが入力するフィルタテキストです。

3. フィルタリングロジック

   JavaScript

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

   • items配列に対してfilterメソッドを適用し、filterTextに基づいてアイテムをフィルタリングします。
   • item.toLowerCase().includes(filterText.toLowerCase())で、大文字小文字を区別せずに一致するアイテムを探します。

4. レンダリング

   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が呼ばれてfilterTextstateが更新されます。
   • filteredItemsをmapメソッドでリストに変換し、<li>要素としてレンダリングします。

活用例3：useStateとfilterメソッドとindexOfメソッド

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

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. インポートと初期化

   JavaScript

   import React, { useState } from 'react';
   

   • ReactとuseStateフックをインポートします。

2. コンポーネントの定義

   JavaScript

   function UniqueList() {
     const [items, setItems] = useState(['user1', 'user2', 'user2', 'user3', 'user4', 'user5', 'user5', 'user5', 'user5']);
   

   • UniqueListコンポーネントを定義します。
   • itemsstateをuseStateを使って初期化します。これは重複を含むアイテムのリストです。

3. フィルタリングロジック

   JavaScript

   const uniqueItems = items.filter((item, index, array) => array.indexOf(item) === index);
   

   • items配列に対してfilterメソッドを適用し、重複するアイテムを取り除きます。
   • array.indexOf(item) === indexで、配列内でそのアイテムが最初に出現するインデックスと現在のインデックスが同じである場合にのみアイテムを含めます。これにより、重複を排除します。

4. レンダリング

   JavaScript

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

   • uniqueItemsをmapメソッドでリストに変換し、<li>要素としてレンダリングします。

参考リンク

• React
• 初心者でもわかるReactHookのuseStateを使い方