TypeScriptでStateを型定義する方法を徹底解説！初心者でもわかるReactとTypeScript入門

1. Stateとは何かを理解しよう

1. Stateとは何かを理解しよう

State（ステート）とは、Reactコンポーネントの中で変化する値を管理する仕組みです。例えば「カウンターアプリ」でボタンを押すたびに数字が増えるとき、その数字を保存しているのがStateです。

TypeScriptを使わない場合は、Stateにどんな値でも入ってしまうため、思わぬエラーの原因になります。型を決めておけば「このStateは数字しか入らない」といったルールを守れるので、安全にプログラムを書けます。

2. 基本的なStateの型定義

2. 基本的なStateの型定義

まずは数字をカウントするStateを型定義してみましょう。

import React, { useState } from "react";

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
};

export default Counter;

useState<number>と書くことで、このStateは数字型だけを受け取ると定義しています。文字列を入れようとするとエラーになります。

3. 文字列のStateを型定義する

3. 文字列のStateを型定義する

次に文字列を扱うStateを見てみましょう。

const Message: React.FC = () => {
  const [text, setText] = useState<string>("こんにちは！");

  return (
    <div>
      <h1>{text}</h1>
      <button onClick={() => setText("変更されました！")}>更新</button>
    </div>
  );
};

この場合はstring型なので、数字を入れようとするとエラーになります。

4. オブジェクトのStateを型定義する

4. オブジェクトのStateを型定義する

実際のアプリでは、Stateに複数のデータをまとめたオブジェクトを持たせることが多いです。その場合は型を別で定義すると分かりやすいです。

type User = {
  id: number;
  name: string;
  isStudent: boolean;
};

const UserInfo: React.FC = () => {
  const [user, setUser] = useState<User>({
    id: 1,
    name: "花子",
    isStudent: true,
  });

  return (
    <div>
      <p>ID: {user.id}</p>
      <p>名前: {user.name}</p>
      <p>学生: {user.isStudent ? "はい" : "いいえ"}</p>
    </div>
  );
};

オブジェクトの型を定義することで、誤って存在しないプロパティを参照することを防げます。

5. Stateをnullやundefinedで扱う場合

5. Stateをnullやundefinedで扱う場合

Stateが最初は空で、あとから値が入る場合もあります。その場合は| nullを使って型を定義します。

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

const Profile: React.FC = () => {
  const [user, setUser] = useState<User | null>(null);

  return (
    <div>
      {user ? <p>{user.name}さん</p> : <p>ユーザー情報はありません</p>}
    </div>
  );
};

このように型を工夫すれば、「まだ値がない場合」と「値がある場合」を明確に書けます。

6. Stateを配列で扱う場合

6. Stateを配列で扱う場合

配列をStateにすることもよくあります。TypeScriptでは配列の中身の型を指定します。

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([]);

  return (
    <div>
      <button onClick={() => setTodos([...todos, "新しいタスク"])}>
        追加
      </button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
};

string[]と書くことで、「文字列の配列だけが入る」と定義しています。

7. 型定義をするメリットを理解しよう

7. 型定義をするメリットを理解しよう

Stateを型定義することで以下のメリットがあります。

• 誤った値を入れようとするとすぐにエラーで気づける
• エディタが補完してくれるので開発がスムーズになる
• 他の人がコードを読むときにStateの中身が一目で分かる

初心者にとっても「間違えてエラーが出る」ことを事前に防げるため、学習がスムーズになります。

まとめ

まとめ

今回の記事では、React開発において欠かせない「TypeScriptによるStateの型定義」について詳しく解説してきました。ReactのuseStateフックは非常に強力ですが、JavaScriptのままではデータの型が曖昧になりがちです。そこでTypeScriptを導入し、ジェネリクス（< >）を使って型を明示することで、開発効率とコードの安全性を劇的に向上させることができます。

学習のポイント振り返り

Stateの型定義をマスターするための重要なポイントを改めて整理しましょう。

• 基本型の指定： useState<number>やuseState<string>のように、単純な値にはプリミティブ型を指定します。
• オブジェクトとインターフェース： 複数の属性を持つデータは、typeやinterfaceを使って構造を定義します。これにより、存在しないプロパティへのアクセスを未然に防げます。
• 初期値が空の場合： useState<User | null>(null)のようにUnion型を活用することで、API通信待ちの状態などを安全に表現できます。
• 配列の管理： string[]やTodoItem[]のように定義し、不変性（イミュータビリティ）を保ちながらスプレッド構文などで更新します。

実践的な応用サンプル：フォーム入力の管理

最後に、これまでの知識を応用して、複数の入力項目を持つフォームのState管理をTypeScriptで実装してみましょう。実務でも非常によく使うパターンです。

import React, { useState } from "react";

// フォームデータの型定義
type RegistrationForm = {
  username: string;
  email: string;
  age: number | "";
};

const Registration: React.FC = () => {
  // 初期値をオブジェクトで設定
  const [formData, setFormData] = useState<RegistrationForm>({
    username: "",
    email: "",
    age: "",
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: name === "age" ? (value === "" ? "" : Number(value)) : value,
    });
  };

  return (
    

      
ユーザー登録フォーム
      

        ユーザー名
        
      
      

        メールアドレス
        
      
      
プレビュー: {formData.username} ({formData.email})
    
  );
};

export default Registration;

このように、TypeScriptを使うことで「今、Stateの中には何が入っているのか」を常に把握できるようになります。最初は定義の手間を感じるかもしれませんが、エラーメッセージが親切になり、VSCodeなどのエディタによる自動補完が効くようになるため、結果として開発スピードは向上します。ReactとTypeScriptの組み合わせは、現代のフロントエンド開発における標準です。ぜひ今回の内容を自身のプロジェクトに取り入れて、堅牢なアプリケーション作りを目指してください。