プログラミング技術

本サイトはプロモーションが含まれています。

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

usestateの使い方
初心者さん
useStateの使い方を知りたい。配列やオブジェクトでも使えるのかな?

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

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

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

  1. useStateとは
  2. useStateの使い方
  3. 配列・オブジェクトでの使い方

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

この記事を書いた人

くろめがね

特別何か持っているわけではない普通の人が未経験からエンジニアに転職し、10年以上経験を積みフリーランスエンジニアになり、単価80万〜140万の案件に参画し稼げるように。プログラミングを始めた頃は、「プログラミング向いていないかも」、「自分のスキルレベル低い」と感じ悩んだ経験がある。

  • 元プログラミングスクール運営企業の社員のためプログラミングの学習に詳しい
  • 自分と同じように悩んでいる初心者へのアドバイスが得意。

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と合わせて使ってみると理解が進みます。

-プログラミング技術