TypeScriptでnull・undefinedを正しく扱う方法を初心者向けにやさしく解説！

1. nullとundefinedとは？

1. nullとundefinedとは？

nullとundefinedは、どちらも“値がない”ことを意味しますが、役割が少し違います。

• null：「値が存在しない」と、開発者が明示的に設定する状態。
• undefined：「まだ値が設定されていない」ことを、JavaScriptやTypeScriptが自動で判断した状態。

たとえば、変数を定義したけれど、まだ何も代入していない場合、その変数の中身はundefinedになります。

2. 実際に試してみよう！

2. 実際に試してみよう！

まずは、nullとundefinedの基本的な違いを確認してみましょう。

let a;
console.log(a); // undefined

let b = null;
console.log(b); // null

undefined
null

aは値が代入されていないのでundefined、bは自分でnullを入れたのでnullになります。

3. nullやundefinedを安全に扱うには？

3. nullやundefinedを安全に扱うには？

値がnullやundefinedかもしれない変数をそのまま使うと、エラーになることがあります。

そのためには、事前にif文などでチェックする方法が大切です。

let name: string | null = null;

if (name !== null) {
    console.log("名前は " + name + " です");
} else {
    console.log("名前が設定されていません");
}

名前が設定されていません

このように、nullの可能性がある場合にはチェックを入れておくと、安全に使えます。

4. TypeScriptでの型指定に注意しよう

4. TypeScriptでの型指定に注意しよう

TypeScriptでは、nullやundefinedを許すかどうかを型で指定できます。

以下のように、| nullや| undefinedを使って明示的に指定します。

let age: number | undefined;
age = 25; // OK
age = undefined; // OK
age = null; // エラー（undefinedしか許可していないため）

nullも許可したい場合は、number | null | undefinedと書く必要があります。

5. null合体演算子（??）を使おう

5. null合体演算子（??）を使おう

??（null合体演算子）を使うと、値がnullまたはundefinedのときに、代わりの値を使うことができます。

let userName: string | null = null;
let displayName = userName ?? "ゲスト";
console.log(displayName);

ゲスト

??は、「nullかundefinedなら右側の値を使う」という便利な書き方です。

6. optional chaining（オプショナルチェーン）も便利！

6. optional chaining（オプショナルチェーン）も便利！

オプショナルチェーン（?.）を使うと、undefinedやnullを安全に扱いながら、プロパティにアクセスできます。

let user: { name?: string } = {};
console.log(user.name?.toUpperCase()); // undefined でもエラーにならない

undefined

このように、?.を使うことで、存在しないプロパティにアクセスしてもプログラムが止まらずにすみます。

7. nullとundefinedの違いはどう覚える？

7. nullとundefinedの違いはどう覚える？

初心者の方は、nullは「自分で空にした」、undefinedは「まだ何もしてない」というイメージで覚えると分かりやすいです。

そして、TypeScriptでは型として明示的に| nullや| undefinedを付けることで、安全に扱うことができます。

まとめ

まとめ

TypeScriptで最初に戸惑いやすい部分として、「値が存在しない状態」をあらわすnullとundefinedの違いがあります。記事全体をふりかえってみると、この二つを正しく理解することで、プログラムの安全性や読みやすさがぐっと高まり、複雑なデータ構造や条件分岐を扱うときにも迷いが少なくなるという大きな利点に気づけます。とくに、初心者の段階では「なんとなく似ているから同じように扱ってしまう」という状況がおこりやすいですが、それぞれの役割や意味を意識することで、エラーを避けやすくなり、正しい型設計ができるようになります。 nullは「明示的に空にする」、undefinedは「まだ値が設定されていない」状態をあらわすという根本的な考え方をおさえておけば、型指定のときにも自然と判断しやすくなります。さらに、TypeScriptでは型に| nullや| undefinedを加えてゆるやかに表現することができ、必要に応じて安全性を高めることが可能です。記事の中でも紹介したように、条件分岐をつけることでエラーを防ぎ、値が存在しない場合の動作をあらかじめ決めておくことで、実際のアプリケーションでも予期せぬトラブルをへらすことができます。 また、近年のJavaScriptやTypeScriptにおいて、null合体演算子（??）やoptional chaining（?.）といった便利な構文が追加されたことで、null・undefinedの取り扱いはさらにやさしくなっています。とくにオプショナルチェーンは、深い階層のオブジェクトを扱うときに威力を発揮し、「もしあれば処理する、なければ止まらない」という自然な書き方ができるため、実務でも多く使われています。 以下には、今回の内容を総合的に復習できるサンプルプログラムをまとめてあります。同じタグ構成で書いているので、記事の流れの中でそのまま理解を深められるはずです。

null・undefinedの取り扱い復習サンプル

class UserStatus {
    name: string | null;
    age: number | undefined;
    memo?: string;

    constructor(name: string | null, age?: number) {
        this.name = name;
        this.age = age;
    }

    showInfo() {
        const safeName = this.name ?? "ななし";
        const safeAge = this.age ?? -1;

        console.log("なまえ:", safeName);
        console.log("ねんれい:", safeAge);

        console.log("めも:", this.memo?.toUpperCase() ?? "めもなし");
    }
}

let userA = new UserStatus(null, 20);
userA.memo = undefined;
userA.showInfo();

let userB = new UserStatus("たろう");
userB.memo = "よろしくお願いします";
userB.showInfo();

このサンプルの中では、nullやundefinedを意識しながら「代わりの値を使う」「存在すれば処理する」という実際的なテクニックがふんだんに盛り込まれています。とくに、??による“あんしん値”の指定や、?.による安全なプロパティアクセスは、アプリケーション開発でも多用されるとても重要な知識です。こういった書き方が身につけば、型による安全性と柔軟性をバランスよく活かしたTypeScriptらしいコードが書けるようになるでしょう。 nullとundefinedを正しく理解しておくことで、条件分岐の取り扱い方が明快になり、読みやすいコードの作成にも繋がります。型情報を正確に書く習慣が身につけば、後からコードを読む自分も、チームの仲間も迷わなくなります。TypeScriptを扱ううえで欠かせない土台となる部分なので、学んだ内容をしっかり身につけておくと、より高度な型や複雑なデータ構造を扱う際にも大きな力となるでしょう。 それでは最後に、記事のポイントを振り返るため、生徒と先生の会話形式でまとめていきます。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

TypeScriptでnullとundefinedの違いは何ですか？

TypeScriptでは、nullは「開発者が明示的に空と設定した状態」、undefinedは「まだ何も値が設定されていない状態」を表します。どちらも値がないことを示しますが、意味と使い方が異なります。