TypeScriptでnull・undefinedを型ガードするテクニックを徹底解説！初心者でも理解できる安全なコードの書き方

1. nullとundefinedとは？初心者にもわかるTypeScriptの基本

1. nullとundefinedとは？初心者にもわかるTypeScriptの基本

TypeScriptでは、値が存在しない状態を表すためにnullとundefinedという特別な値を使います。どちらも「何も入っていない」という意味ですが、少しだけ違いがあります。

undefined：変数を宣言しただけで値がまだ入っていない状態を表します。

null：開発者が「ここには値が無い」と明示的に設定した状態を表します。

プログラムでは、この2つが混ざることでエラーが起きやすくなります。特に初心者の方がよく遭遇するのが「undefinedのプロパティを読み取ろうとしてエラーになる」ケースです。これを防ぐために型ガードが重要になります。

2. TypeScriptでnull・undefinedを安全に判定する基本の型ガード

2. TypeScriptでnull・undefinedを安全に判定する基本の型ガード

TypeScriptでは、nullやundefinedが入る可能性がある変数をそのまま使うと、エラーになる危険があります。そこでよく使われるのがtypeofや!=を使った型ガードです。

たとえば次のように書くと、変数nameがnullでもundefinedでもないことを保証できます。

function printName(name: string | null | undefined) {
    if (name != null) {
        console.log(`名前は${name}です`);
    }
}

ここでのname != nullは、JavaScriptの特徴でnullとundefinedの両方をまとめて判定できる便利な書き方です。

3. 型ガードを使ってnull・undefinedを完全に排除する

3. 型ガードを使ってnull・undefinedを完全に排除する

TypeScriptでは、単純に判定するだけでなく、その後のコードで型が絞り込まれる点が便利です。これを型ガードによる絞り込みと呼びます。

次のように書くと、if文の中ではnameがstringであるとTypeScriptが判断してくれます。

function greet(name: string | null) {
    if (name) {
        console.log(`こんにちは、${name}さん`);
    }
}

ここでのif (name)は、null・undefined・空文字などをまとめて判定する「真偽値チェック」です。初心者向けには分かりやすいですが、空文字も除外されてしまう点には注意が必要です。

4. 明確な意図を持ってチェックするための厳密な型ガード

4. 明確な意図を持ってチェックするための厳密な型ガード

「空文字や0は許容したいけれどnullとundefinedだけ排除したい」というケースでは、厳密に比較する必要があります。

function check(value: string | number | null | undefined) {
    if (value !== null && value !== undefined) {
        console.log("値が存在します:", value);
    }
}

!==（厳密な比較）を使うことで、意図した値だけを確実に判定できます。大規模開発ではこのような正確な判定がよく使われます。

5. カスタム型ガードでnullチェックを便利にする

5. カスタム型ガードでnullチェックを便利にする

繰り返しnullチェックを書くのが面倒な場合は、カスタム型ガードを作成することでコードをすっきり書けます。

function isNotNull<T>(value: T | null | undefined): value is T {
    return value !== null && value !== undefined;
}

function showMessage(msg: string | null | undefined) {
    if (isNotNull(msg)) {
        console.log(msg);
    }
}

このように型ガードを作ると、if文の中ではmsgがstringとして扱われるため、とても安全に使えるようになります。

6. optional chaining（?.）で安全にアクセスする方法

6. optional chaining（?.）で安全にアクセスする方法

TypeScriptでは、プロパティを読み取る際にnullチェックを書かなくてもすむoptional chaining（オプショナルチェイニング）が使えます。

const user = {
    name: "太郎",
    address: null
};

console.log(user.address?.city);

?.を使うと、addressがnullでもエラーにならず、undefinedを返します。初心者にも扱いやすく、最近のTypeScriptでは非常に人気のある書き方です。

7. null合体演算子（??）でデフォルト値を入れる

7. null合体演算子（??）でデフォルト値を入れる

nullまたはundefinedの場合にだけ、代わりの値を設定したい場面も多いです。そんなときはnull合体演算子（??）を使います。

let input: string | null = null;
let message = input ?? "デフォルトメッセージ";
console.log(message);

この書き方は、「値がnullかundefinedなら、この値を使ってね」という意味になります。JavaScript初心者にも直感的で扱いやすい構文です。

まとめ

まとめ

TypeScriptでnullやundefinedを安全に扱う方法として、型ガードやオプショナルチェイニング、null合体演算子などを学びました。型ガードを使うことで、変数の値がnullやundefinedでないことを確実に判定でき、その後の処理を安心して書くことができます。簡単なif (value != null)やif (value)のチェックから、厳密比較の!== null && !== undefined、さらにはカスタム型ガードを作る方法まで紹介しました。これにより、繰り返しnullチェックを書く手間が減り、コード全体が読みやすく安全になります。

オプショナルチェイニング（?.）を使うと、ネストしたオブジェクトのプロパティにアクセスする際に、途中の値がnullでもundefinedでも安全に処理できるようになります。さらに、null合体演算子（??）を活用することで、値が存在しない場合にデフォルト値を簡単に設定できるため、エラーの発生を防ぎながら直感的なコードを書くことができます。

例えばフォーム入力やAPIレスポンスの値を扱うとき、nullやundefinedの判定を適切に行うことで、ユーザーに不正な値を表示したり、アプリが落ちるリスクを減らすことができます。以下のように型ガードやオプショナルチェイニング、null合体演算子を組み合わせると、非常に安全で読みやすいコードになります。

サンプルコード：型ガードとオプショナルチェイニングの併用

// カスタム型ガードでnull/undefinedを除外
function isDefined<T>(value: T | null | undefined): value is T {
    return value !== null && value !== undefined;
}

const user = {
    name: "花子",
    profile: null
};

// 型ガードを使って安全にアクセス
if (isDefined(user.profile)) {
    console.log(user.profile.bio);
}

// optional chainingで簡単にアクセス
console.log(user.profile?.bio);

// null合体演算子でデフォルト値を設定
const bioMessage = user.profile?.bio ?? "プロフィール情報はありません";
console.log(bioMessage);

このように書くことで、user.profileがnullでもundefinedでもコードが止まらず、安全にデフォルト値を設定したりプロパティを参照することができます。型ガードやオプショナルチェイニング、null合体演算子を組み合わせると、初心者でも安全で読みやすいTypeScriptコードを書けるようになります。