LoginSignup
0
0
@Jochun

[React] useStateとは

Posted at

まとめ

useStateとは

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

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

目次

基本構文

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>要素としてレンダリングします。

参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0