useStateの使い方。配列・オブジェクト[Reactの学習]

初心者さん

useStateの使い方を知りたい。配列やオブジェクトでも使えるのかな？

このような疑問をお持ちの方に向けて書いています。

React HookはReact16.8から追加された比較的新しい機能で関数コンポーネントで使われます。関数コンポーネントが主流になってきたので使い方を理解しておきましょう。

▼この記事では以下の点について解説していきます。

Reactの学習を始めた方は、最後までご覧ください。

useStateはどんな機能？

useStateがどのような機能を持つのか、どのように使うのか解説していきます。

useStateとは

useStateは、関数コンポーネントで状態の管理をするための機能です。「状態の管理」って言われても最初は、何？となるでしょう。

useStateは、この2点を行う機能と理解しておくだけで大丈夫です。

useStateの基本構文

useStateは以下のように書きます。useStateを使うためにインポートします。

useStateを使うと「状態」をstateで保持し、setStateという関数で更新できるようになります。0は初期値になります。

JavaScriptの分割代入と似ていますが、setStateは関数なので若干違いますね。

// useStateをインポートする
import React, { useState } from "react";

// useStateを宣言する
const [state, setState] = useState(0);

useStateを使ってみる

実際に数値、オブジェクト、配列などをuseStateを使い状態管理してみます。

変数の状態管理

公式にあるコードです。カウントアップとカウントダウンするやつですね。setCountでは、現在の値（prevCount）を受け取ることができる。

const App: React.FC = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  )
}

オブジェクトをuseStateで状態管理する

オブジェクトはちょっとだけ注意点があります。

サンプルコードは、inputのフォームから年齢のみ更新するというものです。

inputの値を変更すると、ageのみ更新されます。setUserした時に見慣れない記述があります。...userと書くとuserというオブジェクトにageをいい感じでマージしてくれます。

このあたりはJavaScriptなので、「スプレッド演算子」とかで検索してみてください。

const App: React.FC = () => {
  type User = {
    name: String,
    age: number
  }
  const [user, setUser] = useState<User>({name: 'たかはし', age: 20})

  return (
    <>
      <input type="text" value={user.age} onChange={event => setUser({...user, age: parseInt(event.target.value)})} />
      <p>name: {user.name}</p>
      <p>age: {user.age}</p>
    </>
  )
}

配列をuseStateで状態管理する

useStateを使って配列も管理できます。ちょっとあまり実在しない機能ですが、usersの配列にユーザーを追加していくといったものです。

オブジェクトの時と同様にスプレッド演算子で追加しています。マージしないとユーザーが上書きされてしまうので注意です。

  type User = {
    id: number,
    name: String, 
    age: number
  }
  const [users, setUser] = useState<User[]>([{id: 1, name: '名前1', age: 20}])

  const addUser = () => {
    setUser([...users, {id: users.length + 1, name: `名前${users.length + 1}`, age: users[users.length - 1].age + 1}])
  }

  return (
    <>
      <button onClick={addUser}>ユーザーを追加</button>
      <ol>
        {users.map(user => (
          <li key={user.id}>ユーザーID: {user.id} , 名前: {user.name} , 年齢: {user.age}</li>
          ))}
      </ol>
    </>
  )

useStateの使い方まとめ

今回は、React HooksのuseStateについて解説しました。

useStateを理解すると、コンポーネント内で状態管理ができますね。他のReact Hooksと合わせて使ってみると理解が進みます。