初期値はundefined, null, ""（空文字）どれを使うべき？

初期値には undefined、null、""（空文字）のどれを使うべきか？それぞれの違いについて、疑問を持ったので調べてみました。

それぞれの意味と違い

値	意味	よく使われる場面
undefined	変数がまだ定義されていない状態	optionalな値、未初期化状態
null	値が意図的に存在しないことを示す	取得待ちのデータ、削除済みなど
""	値は存在しているが中身が空である文字列	入力フォームの初期値、空白入力

ケース別の推奨初期値

1. 入力フォームの初期値 → ""（空文字）

Reactのフォームコンポーネントでは、値は基本的に string を使う前提で作られているため、
初期値には ""（空文字）を使うのがベストです。

const [form, setForm] = useState({
  name: "",
  email: "",
  comment: ""
});

理由：

• Reactではフォームは "controlled component" として扱われる
• value={null} や value={undefined} を使うとエラーや警告の原因になる

2. APIなどのデータ取得前 → null

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

useEffect(() => {
  fetchUser().then(setUser);
}, []);

理由：

• null は「まだ値が存在しないが、意図的にそれを示したい」ときに使う
• 読み込み中／取得失敗の状態管理に便利

3. オプショナルな値や未初期化の値 → undefined

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

let temp: string | undefined = undefined;

理由：

• TypeScriptで optional property を設計する際によく使われる
• 設定されるかどうかわからない値に使う

Reactフォームではなぜ "" を使うべきなのか？

<input value={form.name} onChange={handleChange} />

Reactでは value に null や undefined を渡すと、
「uncontrolled → controlled」エラーが発生する可能性があります。
そのため、フォームの値は明確に文字列（空でもOK）として制御する必要があります。

TypeScriptでの型定義例

type FormState = {
  name: string;
  age: string;
  comment: string;
};

const [form, setForm] = useState<FormState>({
  name: "",
  age: "",
  comment: "",
});

API送信時に数値などに変換すればOK：

const handleSubmit = () => {
  const payload = {
    ...form,
    age: Number(form.age),
  };
};

まとめ：使い分けの指針

値	使うべき場面
""	入力欄の初期値、form状態
null	データ未取得、意図的に空を示したい時
undefined	オプショナルな設計、初期化されていない値

SPAにおけるフォーム処理では、基本は "" を使い、データの状態管理には null、型的に省略可能な箇所には undefined を使う、というのが実務的な判断です。

これを意識することで、ReactやTypeScriptのエラーに悩まされず、堅牢なコードを書くことができます。