TypeScript のNullとUndefined

Volardev 編集部 April 29, 2026

TypeScriptには、null や undefined の値を処理するための強力なシステムが備わっています。

デフォルトでは null および undefined のハンドリングは無効化されていますが、strictNullChecks 設定を true にすることで有効にできます。
※このページ以降の内容は、すべて strictNullChecks が有効であることを前提としています。

1. NullとUndefinedの型 (Types)

null と undefined はプリミティブ型（Primitive Types）であり、string などの他の型と同様に使用できます。

例：基本的な型指定

let value: string | undefined | null = null;
value = 'こんにちは';
value = undefined;

strictNullChecks が有効な場合、TypeScriptは型に明示的に undefined が追加されていない限り、値が正しく設定されていることを要求します。

2. オプショナルチェイニング (Optional Chaining)

オプショナルチェイニングは、TypeScriptのnullハンドリングと非常に相性が良いJavaScriptの機能です。
コンパクトな構文を使用して、存在するかもしれないし存在しないかもしれないオブジェクトのプロパティにアクセスできます。
プロパティにアクセスする際、?. 演算子を使用します。

例：Optional Chainingの活用

interface House {
  sqft: number; // 平米数
  yard?: {      // 庭（オプション）
    sqft: number;
  };
}

function printYardSize(house: House) {
  const yardSize = house.yard?.sqft;
  if (yardSize === undefined) {
    console.log('庭はありません');
  } else {
    console.log(`庭の広さは ${yardSize} 平米です`);
  }
}

let home: House = {
  sqft: 500
};

printYardSize(home); // 「庭はありません」と出力されます

3. Null合体演算子 (Nullish Coalescing)

Null合体演算子もまた、TypeScriptのnullハンドリングと親和性の高いJavaScriptの機能です。
null または undefined を扱う際に、特化したフォールバック（代替値）を持つ式を書くことができます。
これは、他の「falsy（偽値）」な値が発生し得るが、それらが有効な値として扱われるべき場合に便利です。
式の中で ?? 演算子を使用して記述します。

例：Nullish Coalescingの活用

function printMileage(mileage: number | null | undefined) {
  // mileageがnullまたはundefinedのときのみ '利用不可' を表示
  console.log(`走行距離: ${mileage ?? '利用不可'}`);
}

printMileage(null); // 「走行距離: 利用不可」と出力
printMileage(0);    // 「走行距離: 0」と出力（0は有効な値として扱われる）

4. 非nullアサーション (Null Assertion)

TypeScriptの推論システムは完璧ではありません。値が null や undefined である可能性をあえて無視した方が合理的な場面もあります。
簡単な方法はキャスト（Casting）を使用することですが、TypeScriptは便利なショートカットとして ! 演算子を提供しています。

例：非nullアサーションの使用

function getValue(): string | undefined {
  return 'こんにちは';
}

let value = getValue();
// プロパティアクセスの直後に ! を付けることで、null/undefinedではないと断言する
console.log('値の長さ: ' + value!.length);

キャストと同様に、これはアンセーフ（不安全）な操作になる可能性があるため、注意して使用する必要があります。

5. 配列の境界チェック (Array Bounds Handling)

strictNullChecks が有効であっても、デフォルトでTypeScriptは配列へのアクセスが undefined を返すことはないものと想定します（配列の型自体に undefined が含まれている場合を除きます）。
この挙動を変更するには、コンフィグ設定の noUncheckedIndexedAccess を使用します。

例：配列アクセス時の型安全性の向上

let array: number[] = [1, 2, 3];
let value = array[0]; 
// `noUncheckedIndexedAccess` を有効にすると、この value の型は `number | undefined` になります