TypeScriptでの`undefined`と`null`を徹底解説

TypeScriptを学び始めた初心者の方にとって、undefinedとnullの違いは混乱しやすいポイントの一つです。この2つは似ているようで異なる意味を持ち、TypeScriptでコードを書く際にそれぞれ適切に扱う必要があります。本記事では、この2つの違い、TypeScriptにおける特徴、そして実践的な使用例を詳しく解説します。

1. `undefined`と`null`とは？

undefined
変数が値を割り当てられていない場合に自動的に持つ値です。何も設定されていない状態を表します。
```
let x: undefined; // 値は`undefined`のみ
console.log(x); // undefined
```
null
開発者が明示的に「値が空である」と設定する際に使用します。
```
let y: null; // 値は`null`のみ
console.log(y); // null
```

2. `undefined`と`null`の違い

特徴	`undefined`	`null`
意味	値が未定義（未割当）	空である（意固的に値がない）
デフォルト値	変数を宣言したが値を割り当てていない場合の初期値	開発者が明示的に設定する
型	`undefined`	`object`

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

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

3. TypeScriptでの`undefined`と`null`

TypeScriptではundefinedとnullの両方が有効な値ですが、デフォルトの型チェックでは注意が必要です。特に、strictNullChecksを有効にすると、コード内でnullやundefinedをより固く扱うことができます。

let a: string | null;
a = "Hello"; // OK
a = null; // OK

let b: string | undefined;
b = "World"; // OK
b = undefined; // OK

4. `strictNullChecks`オプションとは？

TypeScriptでは、strictNullChecksを有効にすると、undefinedやnullを安全に扱うことが求められます。この設定はエラーを未然に防ぐ強力な方法です。

設定方法（tsconfig.json）

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

エラー例

let c: string | null = null;
console.log(c.length); // Error: Object is possibly 'null'.

if (c !== null) {
  console.log(c.length); // OK
}

5. `undefined`と`null`のチェック方法

比較演算子を使ったチェック

  let value: string | null | undefined = null;
      
  if (value === null) {
    console.log("値はnullです");
  } else if (value === undefined) {
    console.log("値はundefinedです");
  } else {
    console.log("値は:", value);
  }

デフォルト値の設定（||や??を使用）

  let name: string | null | undefined;
  console.log(name || "デフォルト名"); // "デフォルト名"
  console.log(name ?? "デフォルト名"); // "デフォルト名"

6. undefinedとnullの使い分け

undefinedを使うべき場合：
変数が初期化されていない状態を表したいとき。
nullを使うべき場合：
値が空であることを意図的に示したいとき。

7. 結論

undefinedとnullは、それぞれ異なる用途と意味を持つ重要な値です。
TypeScriptで安全なコードを書くには、strictNullChecksを有効にし、nullやundefinedを適切にチェックする習慣をつけましょう。
本記事で紹介した実践的な例を参考に、ミスの少ないコードを書くスキルを磨いてください！