TypeScriptでnull・undefinedを型ガードするテクニックを徹底解説！初心者でも理解できる安全なコードの書き方
生徒
「TypeScriptで値がnullかundefinedかを判定して安全に使う方法ってありますか？」
先生
「もちろんありますよ。TypeScriptには型ガードという仕組みがあって、nullやundefinedを安全に判定できます。」
生徒
「型ガードってどういうものですか？難しそうです…。」
先生
「心配しなくて大丈夫です。まずはnullとundefinedの違いからゆっくり見ていきましょう。」
1. nullとundefinedとは？初心者にもわかるTypeScriptの基本
TypeScriptでは、値が存在しない状態を表すためにnullとundefinedという特別な値を使います。どちらも「何も入っていない」という意味ですが、少しだけ違いがあります。
undefined：変数を宣言しただけで値がまだ入っていない状態を表します。
null：開発者が「ここには値が無い」と明示的に設定した状態を表します。
プログラムでは、この2つが混ざることでエラーが起きやすくなります。特に初心者の方がよく遭遇するのが「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を完全に排除する
TypeScriptでは、単純に判定するだけでなく、その後のコードで型が絞り込まれる点が便利です。これを型ガードによる絞り込みと呼びます。
次のように書くと、if文の中ではnameがstringであるとTypeScriptが判断してくれます。
function greet(name: string | null) {
if (name) {
console.log(`こんにちは、${name}さん`);
}
}
ここでのif (name)は、null・undefined・空文字などをまとめて判定する「真偽値チェック」です。初心者向けには分かりやすいですが、空文字も除外されてしまう点には注意が必要です。
4. 明確な意図を持ってチェックするための厳密な型ガード
「空文字や0は許容したいけれどnullとundefinedだけ排除したい」というケースでは、厳密に比較する必要があります。
function check(value: string | number | null | undefined) {
if (value !== null && value !== undefined) {
console.log("値が存在します:", value);
}
}
!==（厳密な比較）を使うことで、意図した値だけを確実に判定できます。大規模開発ではこのような正確な判定がよく使われます。
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（?.）で安全にアクセスする方法
TypeScriptでは、プロパティを読み取る際にnullチェックを書かなくてもすむoptional chaining（オプショナルチェイニング）が使えます。
const user = {
name: "太郎",
address: null
};
console.log(user.address?.city);
?.を使うと、addressがnullでもエラーにならず、undefinedを返します。初心者にも扱いやすく、最近のTypeScriptでは非常に人気のある書き方です。
7. null合体演算子（??）でデフォルト値を入れる
nullまたはundefinedの場合にだけ、代わりの値を設定したい場面も多いです。そんなときはnull合体演算子（??）を使います。
let input: string | null = null;
let message = input ?? "デフォルトメッセージ";
console.log(message);
この書き方は、「値がnullかundefinedなら、この値を使ってね」という意味になります。JavaScript初心者にも直感的で扱いやすい構文です。
