先生と生徒の会話形式で理解しよう

生徒

「ReactのStateって、最初の値を入れますよね。でもnullとかundefinedって何なんですか？」

先生

「Stateの初期値はとても大切です。nullやundefinedは『まだ中身がない』ことを表すためによく使われます。」

生徒

「どっちも空っぽみたいに見えるんですが、使い分ける理由があるんですか？」

先生

「あります。ReactとTypeScriptでは意味が少し違うので、正しく使うとエラーを防げます。順番に説明しますね。」

1. ReactのState初期値とは何か？

ReactのState（ステート）は、画面の中で変わる情報を保存する場所です。useStateを使うとき、必ず最初の値を設定します。これを初期値と呼びます。

たとえば、最初に表示するメッセージ、カウンターの開始数、チェックボックスの初期状態などが初期値です。Reactは、この初期値を元に画面を表示し、Stateが変わるたびに画面を更新します。

TypeScriptを使う場合、この初期値は「Stateの型を決める重要なヒント」になります。どんな値を最初に入れるかで、あとから扱える値の種類が決まるため、とても重要です。

2. nullとundefinedの基本的な意味

JavaScriptやTypeScriptには、nullとundefinedという「何もない」ことを表す値があります。一見似ていますが、意味は少し違います。

nullは「意図的に何も入れていない」という状態です。たとえば、「ユーザー情報は、まだ設定していません」と明確に表したいときに使います。

undefinedは「まだ決まっていない」「存在しない」状態を表します。変数を作っただけで値を入れていない場合などに、自動的に使われます。

例え：空のコップがある場合がnull、そもそもコップが机に置かれていない状態がundefined、というイメージです。

3. useStateでnullを初期値にする場合

Reactでは、「あとでデータが入るState」を表現するために、nullを初期値として使うことがよくあります。特に、API通信でデータを取得する前の状態などで使われます。


import React, { useState } from "react";

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

function App() {
  const [user, setUser] = useState<User | null>(null);

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

export default App;

（最初は「ユーザー情報はまだありません」と表示されます）

このように、nullを初期値にする場合は、union型を使って「Userかnull」と型を指定します。これにより、「まだデータがない状態」と「データがある状態」を安全に扱えます。

4. nullを使うときに必要なチェック

nullを使う場合、そのまま値を使おうとするとエラーになる可能性があります。たとえば、userがnullのままなのに、user.nameを使おうとすると問題が起きます。

そこでReactでは、条件分岐を使って「nullではないこと」を確認してから表示します。これをnullチェックと呼びます。

TypeScriptは、このチェックがないと警告を出してくれるため、初心者でも安全なコードを書きやすくなります。

5. useStateでundefinedを初期値にする場合

useStateでは、undefinedを初期値として使うこともできます。ただし、初心者にはあまりおすすめされません。

理由は、undefinedは「意図的に空なのか」「ただ設定を忘れたのか」が分かりにくいからです。ReactのState管理では、状態をはっきりさせることが大切です。


const [message, setMessage] = useState<string | undefined>(undefined);

このような書き方もできますが、「まだ未設定」という意味を明確にしたい場合は、nullを使った方が分かりやすいケースが多いです。

6. 初期値を具体的な値にするという考え方

すべてのStateでnullやundefinedを使う必要はありません。最初から意味のある値を入れられる場合は、その方がシンプルです。

たとえば、文字列なら空文字、配列なら空配列、数値なら0などです。これにより、nullチェックが不要になり、コードが読みやすくなります。


const [todos, setTodos] = useState<string[]>([]);

（最初は空のリストとして扱えます）

このように、「空でも意味が通じる状態」は、具体的な初期値を使うのがおすすめです。

7. 初心者が混乱しやすいポイント

初心者がよく混乱するのは、「nullとundefinedのどちらを使えばいいか」という点です。基本的な考え方は次の通りです。

意図的に空の状態を表したい → null
そもそも存在しない状態 → undefined
最初から使えるなら具体的な値を入れる

ReactとTypeScriptでは、意図をはっきりさせることがとても大切です。そのため、nullを使う場面の方が多くなります。

8. State初期値の設計がReactを安定させる

Stateの初期値をどうするかは、Reactアプリ全体の安定性に大きく関わります。初期値があいまいだと、画面表示の条件分岐が増え、バグの原因になります。

「最初は何もないのか」「空でも使えるのか」を考えたうえで、null・undefined・具体的な値を選ぶことが大切です。

TypeScriptと一緒に使うことで、こうした設計ミスを早い段階で防げます。Stateの初期値は、型安全なReact開発の土台になります。

Reactで理解するStateの初期値とnull・undefinedの扱い方！型安全なState管理を初心者向けに解説