TypeScriptでのundefinedとnullを徹底解説：違いと実践的な使い方

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を適切にチェックする習慣をつけましょう。
• 本記事で紹介した実践的な例を参考に、ミスの少ないコードを書くスキルを磨いてください！