Reactで学ぶuseStateの型定義入門！オブジェクトと配列を型安全に管理する方法

1. Reactでオブジェクトや配列をStateにするとは？

1. Reactでオブジェクトや配列をStateにするとは？

ReactのuseStateは、文字や数字だけでなく、オブジェクトや配列も管理できます。オブジェクトは「名前と年齢をひとまとめにする箱」、配列は「同じ形のデータが並んだ箱」と考えると分かりやすいです。

たとえば、ユーザー情報は「名前」「年齢」「メールアドレス」のように、複数の情報をまとめて扱います。このような場合にオブジェクトが向いています。一方、買い物リストやTodoリストのように、同じ形のデータがたくさん並ぶ場合は配列を使います。

TypeScriptでは、これらの形を型定義することで、「この箱にはこういうデータしか入らない」と決められます。これが型安全なState管理です。

2. useStateでオブジェクトを型定義する基本

2. useStateでオブジェクトを型定義する基本

まずはオブジェクトのStateです。オブジェクトは、いくつかの項目をまとめたデータです。TypeScriptでは、その形をtypeで定義することが多いです。

import React, { useState } from "react";

type User = {
  name: string;
  age: number;
};

function App() {
  const [user, setUser] = useState<User>({
    name: "たろう",
    age: 20
  });

  return (
    <div>
      <p>名前：{user.name}</p>
      <p>年齢：{user.age}</p>
    </div>
  );
}

export default App;

この例では、Userという型を作り、「nameは文字」「ageは数字」と決めています。useState<User>と書くことで、「このStateはUser型ですよ」と宣言しています。

もし年齢に文字を入れようとすると、TypeScriptがすぐにエラーを出してくれます。これにより、間違いに早く気づけます。

3. オブジェクトStateを更新するときの考え方

3. オブジェクトStateを更新するときの考え方

オブジェクトのStateを更新するときは、「一部だけを書き換える」ことがよくあります。その場合、元のオブジェクトをコピーしてから変更します。

<button onClick={() => setUser({ ...user, age: user.age + 1 })}>
  年齢を増やす
</button>

ここで使っている「...」はスプレッド構文と呼ばれます。「今の中身を全部コピーして、必要なところだけ変える」という意味です。初心者の方は「コピーしてから修正する」と覚えておくと安心です。

4. useStateで配列を型定義する基本

4. useStateで配列を型定義する基本

次は配列です。配列は、同じ形のデータがいくつも並んだものです。Todoリストや商品一覧などでよく使われます。

TypeScriptでは、「この配列の中には何が入るか」を型で決めます。

import React, { useState } from "react";

type Todo = {
  id: number;
  title: string;
};

function App() {
  const [todos, setTodos] = useState<Todo[]>([]);

  return (
    <div>
      <button
        onClick={() =>
          setTodos([...todos, { id: 1, title: "買い物" }])
        }
      >
        追加
      </button>
      <p>件数：{todos.length}</p>
    </div>
  );
}

export default App;

useState<Todo[]>と書くことで、「この配列にはTodo型のデータだけが入る」と決まります。配列の中身の形がそろうので、後から扱いやすくなります。

5. 空の配列やオブジェクトと型指定の重要性

5. 空の配列やオブジェクトと型指定の重要性

初心者がよくつまずくのが、「最初は空の配列や空のオブジェクト」のStateです。型指定をしないと、TypeScriptが正しく判断できないことがあります。

たとえば空配列だけを書くと、「中身が何の配列か分からない」と判断されることがあります。そこで、useState<型[]>のように、先に型を決めておくことが大切です。

これは、空の箱に「この箱はリンゴ専用」とラベルを貼るようなものです。後から何を入れてもいい状態にしないことで、間違いを防げます。

6. オブジェクトと配列を組み合わせたState

6. オブジェクトと配列を組み合わせたState

実際のReactアプリでは、オブジェクトの中に配列が入ることもよくあります。たとえば「ユーザー情報」と「そのユーザーのTodo一覧」を一緒に持つ場合です。

TypeScriptでは、型を組み合わせることで、複雑なStateでも安全に管理できます。

type UserData = {
  name: string;
  todos: Todo[];
};

このように型を分けて考えると、Stateの設計が分かりやすくなります。ReactでのState管理は、「どんなデータを、どんな形で持つか」を考えることが大切です。

7. 初心者が意識したいポイント

7. 初心者が意識したいポイント

useStateでオブジェクトや配列を型定義するときは、次の点を意識すると理解しやすくなります。

• オブジェクトは「ひとまとまりの情報」
• 配列は「同じ形の情報が並ぶもの」
• 型定義は「箱の説明書」

ReactとTypeScriptを組み合わせることで、画面の見た目だけでなく、データの形まで安全に管理できます。最初は少し難しく感じても、慣れるととても心強い仕組みです。

8. useStateの型定義はReact開発の基礎力

8. useStateの型定義はReact開発の基礎力

useStateでオブジェクトや配列を正しく型定義できるようになると、Reactでできることが一気に広がります。ユーザー情報、一覧表示、入力フォームなど、ほとんどの画面で役立ちます。

型を決めることは、難しい作業ではなく、「この箱には何を入れたいか」を考えることです。React初心者の方は、まず小さなStateから型定義に慣れていくと、自然と理解が深まります。