JavaScriptには、値が存在しないことを表すための特別な値「null」と「undefined」があります。これらは一見似ているように見えますが、実際には異なる意味を持ち、使い方も異なります。TypeScriptでは、これらの違いをより厳密に扱い、型チェックを通じてコードの安全性を向上させることができます。
本記事では、JavaScriptにおけるnullとundefinedの違いを明確にし、TypeScriptでの型チェックの方法やnull安全性の確保について解説します。コード例や演習を通じて、実際にnullとundefinedを扱う方法を学び、より堅牢なコードを書くための知識を身につけていきましょう。
JavaScriptにおけるnullとundefinedの違い
JavaScriptには、「null」と「undefined」という2つの値が存在しますが、それぞれ異なる意味を持ち、異なる場面で使われます。この違いを正しく理解することが、正確なコーディングとエラーハンドリングにおいて重要です。
undefinedの定義と意味
「undefined」は、変数が宣言されているが、値がまだ割り当てられていない状態を表します。JavaScriptエンジンが自動的に設定するデフォルトの値で、次のような場面で発生します。
- 変数が宣言されたが、初期化されていない場合
- 関数が値を返さない場合
- 存在しないオブジェクトのプロパティにアクセスした場合
let x;
console.log(x); // undefinednullの定義と意味
「null」は、「意図的に」値が存在しないことを表す特殊な値です。開発者が明示的に設定することで、「この変数には値がない」という意味を持たせることができます。nullはJavaScriptオブジェクトの型であり、システム的に「無効」を意味することもあります。
let y = null;
console.log(y); // nullnullとundefinedの主な違い
- 意味の違い: undefinedは「値が未定義」、nullは「意図的に空である」と示します。
- 型の違い:
typeof undefinedは “undefined” ですが、typeof nullは “object” です。 - 使用タイミングの違い: undefinedはシステムによって設定されることが多いのに対し、nullは開発者が意図的に設定します。
このように、nullとundefinedはJavaScriptのコードを理解し、エラーハンドリングを行う際に重要な役割を果たしています。
undefinedの使用場面
「undefined」は、JavaScriptのコードで特定の値がまだ定義されていない状態を表すために使用されます。主に、変数や関数が初期化されていないとき、または明示的な値が割り当てられていないときに自動的に設定されます。以下に、undefinedが使用される典型的なケースを見てみましょう。
変数が初期化されていない場合
変数が宣言されたものの、値がまだ割り当てられていない場合、その変数には自動的にundefinedが設定されます。これは、JavaScriptの動作としてデフォルトで発生します。
let a;
console.log(a); // undefinedこの例では、変数aは宣言されていますが、初期化されていないためundefinedと出力されます。
関数の戻り値がない場合
JavaScriptでは、関数が明示的に値を返さない場合、自動的にundefinedが返されます。これは、値を返さない関数が通常、処理の中断や終了を示すために利用されます。
function doNothing() {}
console.log(doNothing()); // undefinedこの関数は何も返さないため、呼び出したときにundefinedが返されます。
存在しないオブジェクトのプロパティにアクセスする場合
オブジェクトのプロパティにアクセスしようとした際、そのプロパティが存在しない場合もundefinedが返されます。これは、指定されたキーがオブジェクト内に存在しないことを示します。
const obj = { name: "Alice" };
console.log(obj.age); // undefinedこの場合、objにageというプロパティは存在しないため、undefinedが返されます。
関数の引数が渡されなかった場合
関数が定義された際に、引数が指定されていない場合、その引数にはundefinedが自動的に設定されます。これは、関数の柔軟性を高め、必須ではない引数を扱う際に便利です。
function greet(name) {
console.log(`Hello, ${name}`);
}
greet(); // Hello, undefinedこの例では、name引数が渡されなかったため、undefinedとして扱われています。
まとめ
「undefined」は、JavaScriptが自動的に設定するデフォルトの値であり、未定義の変数やプロパティ、関数の戻り値などで頻繁に使用されます。これにより、意図せずにエラーが発生した場合でも、適切なデバッグと対処が可能になります。
nullの使用場面
「null」はJavaScriptにおいて、「意図的に」値が存在しないことを示すために使用される特別な値です。undefinedと異なり、nullは開発者が明示的に設定し、「ここに値がないことが意図されている」ということを示すために使われます。次に、nullが具体的に使用される場面について詳しく見ていきます。
初期化時に値がないことを明示する
変数を宣言するときに、将来的に値を割り当てるが、現在は値がないことを意図的に示す場合、nullを使います。これにより、値が意図的に空であることが明確になります。
let user = null;
console.log(user); // nullこの例では、userという変数には後で値が設定される可能性がありますが、現時点では「値がない」ということを明確にするためにnullが使用されています。
DOM操作で要素が存在しない場合
DOM操作で、指定した要素が存在しない場合にnullが返されることがあります。これは、querySelectorやgetElementByIdのようなメソッドが、対応する要素が見つからなかった場合に返す値です。
const element = document.getElementById('nonexistent');
console.log(element); // nullこの例では、IDが'nonexistent'の要素が存在しないため、getElementByIdはnullを返します。
オブジェクトが空であることを明示する
オブジェクトや配列が最初は空であることを明示する際にも、nullが使われます。例えば、APIのレスポンスを待つ状態や、まだ初期化されていないオブジェクトにnullを設定することで、後でデータが入る予定であることを示せます。
let response = null;
// APIのレスポンスが来たらデータを設定するこの例では、APIからデータが来るまでresponseがnullであることを明示しています。
意図的に値がリセットされる場合
すでに使われている変数やオブジェクトの値を「リセット」して空にしたい場合にも、nullを使います。これにより、変数が再度使われる準備が整ったことを示すことができます。
let sessionData = { userId: 123, token: "abc" };
sessionData = null; // セッションをリセット
console.log(sessionData); // nullこの例では、セッションデータをリセットして、再利用可能な状態にしています。
まとめ
nullは、開発者が意図的に「ここには値が存在しない」ということを明示するために使用されます。初期化やリセット、DOM要素の取得時など、明確な意図を持って使われるため、undefinedとは異なる使い方が求められます。
TypeScriptでのnullとundefinedの型チェック
TypeScriptでは、nullとundefinedは型システムに組み込まれており、これらを正しく扱うために型チェックを行うことができます。JavaScriptと異なり、TypeScriptは静的型付けの言語であるため、nullやundefinedを含む値の取り扱いが厳密になっています。このセクションでは、TypeScriptでのnullとundefinedに対する型チェックの方法について詳しく見ていきましょう。
TypeScriptにおけるnullとundefinedのデフォルト挙動
デフォルトでは、TypeScriptの変数にはnullやundefinedを許可する柔軟性があります。これは、JavaScriptの挙動と互換性を保つためです。つまり、明示的に型を指定しない限り、変数にはnullやundefinedが代入される可能性があります。
let myVar: string;
myVar = null; // エラーなし（strictNullChecksが無効の場合）
myVar = undefined; // エラーなし（strictNullChecksが無効の場合）TypeScriptの型システムは、初期設定ではnullやundefinedを許容します。しかし、より厳密な型チェックを行うために設定を変更することが可能です。
strictNullChecksオプションと型チェック
TypeScriptでは、strictNullChecksというコンパイラオプションを有効にすることで、nullとundefinedの扱いをより厳密に管理できます。このオプションが有効になると、nullやundefinedを許容するかどうかは型によって明示的に指定する必要があります。
strictNullChecksが有効な場合、以下のようにnullやundefinedを型に含めるか、型ガードで対処する必要があります。
let myVar: string;
myVar = null; // エラー: 'null' は 'string' に割り当てできません
myVar = undefined; // エラー: 'undefined' は 'string' に割り当てできませんこれにより、nullやundefinedを扱う際に予期しないエラーやバグを回避しやすくなります。
ユニオン型でのnullとundefinedの扱い
TypeScriptでは、ユニオン型を使用して変数がnullやundefinedを許容することを明示することができます。ユニオン型を使うことで、変数がnullまたはundefinedである可能性を型に反映させ、開発者に安全なコードを求めることができます。
let name: string | null = null;
let age: number | undefined = undefined;
name = "Alice"; // 問題なし
age = 25; // 問題なしこのように、ユニオン型を使用することで、変数がnullまたはundefinedを取る可能性がある場合に、明確にその状況を定義できます。
型ガードを使ったnullとundefinedのチェック
TypeScriptでは、型ガードを使って、変数がnullまたはundefinedかどうかを確認し、安全に操作することができます。型ガードとは、実行時に変数の型をチェックして、それに応じた処理を行うためのテクニックです。
function printName(name: string | null) {
if (name !== null) {
console.log(`Hello, ${name}`);
} else {
console.log("Name is null");
}
}この例では、nameがnullでないことを確認した上で、nameを使用しています。これにより、null値にアクセスしてエラーが発生することを防ぎます。
まとめ
TypeScriptでは、nullとundefinedを厳密に扱うための型チェックが可能です。strictNullChecksオプションを有効にすることで、nullやundefinedが予期せぬ場面で現れることを防ぎ、ユニオン型や型ガードを使って安全にこれらの値を扱うことができます。これにより、コードの堅牢性と安全性が向上します。
TypeScriptのstrictNullChecksオプション
TypeScriptのstrictNullChecksオプションは、コードの安全性と予測可能性を向上させるための重要な設定です。このオプションを有効にすることで、nullやundefinedを厳密に扱い、予期しないバグやエラーを防ぐことができます。以下では、このオプションの働きと、それを利用した安全なコードの書き方について説明します。
strictNullChecksとは
デフォルトでは、TypeScriptの変数はnullやundefinedを許容します。つまり、型がstringやnumberのように定義されていても、暗黙のうちにnullやundefinedが代入できてしまいます。しかし、これでは予期しないエラーが発生するリスクがあります。
strictNullChecksオプションを有効にすると、すべての型においてnullやundefinedを明示的に許可しない限り、代入できなくなります。このオプションは、nullやundefinedによるバグを防ぐための強力なツールです。
let myString: string;
myString = null; // strictNullChecksが有効の場合、エラー
myString = undefined; // strictNullChecksが有効の場合、エラー上記の例では、strictNullChecksが有効になっているため、nullやundefinedがstring型の変数に代入されるとエラーが発生します。
strictNullChecksの有効化方法
TypeScriptでstrictNullChecksを有効にするためには、tsconfig.jsonファイルに次の設定を追加します。
{
"compilerOptions": {
"strictNullChecks": true
}
}この設定を行うと、TypeScriptコンパイラはnullやundefinedを厳密にチェックし、許容されない代入を防ぎます。また、strictという設定を使うことでも、strictNullChecksを含むさまざまな厳密な型チェックが有効になります。
{
"compilerOptions": {
"strict": true
}
}strictオプションを有効にすると、strictNullChecksだけでなく、他の厳密なチェックもすべてオンになります。
strictNullChecksを使った安全な型定義
strictNullChecksが有効な場合、nullやundefinedを許可したい場合は、ユニオン型で明示的に定義する必要があります。これにより、コード中でnullやundefinedが想定外の場面で現れることを防ぎ、安全性が高まります。
let name: string | null = null;
if (name !== null) {
console.log(`Hello, ${name}`);
} else {
console.log("No name provided");
}この例では、nameがnullである可能性をユニオン型で表現しており、コード内で明示的にnullチェックを行っています。
strictNullChecksを使うメリット
strictNullChecksを有効にすることで、以下のようなメリットがあります。
- バグを早期に発見: 型チェックが厳密になるため、開発時に潜在的なエラーを早期に発見できます。
- コードの予測可能性が向上:
nullやundefinedが発生する状況をコントロールできるため、コードがより予測可能になります。 - 保守性が向上: 型チェックが強化されることで、他の開発者がコードを理解しやすくなり、保守が容易になります。
strictNullChecksの注意点
strictNullChecksを有効にすると、古いコードや他のライブラリとの互換性に問題が生じることがあります。そのため、既存のコードベースで導入する際には、段階的な対応やテストが必要です。また、nullやundefinedを許容しない型定義を徹底することで、コードの可読性が多少複雑になる場合もあります。
まとめ
TypeScriptのstrictNullChecksオプションは、nullやundefinedによる予期しないバグを防ぎ、コードの信頼性を向上させるための重要な設定です。このオプションを使うことで、開発者は明示的にnullやundefinedを扱い、より安全で堅牢なコードを書くことができます。
null安全なコードの書き方
TypeScriptでのnullおよびundefinedの厳密な型チェックを導入することで、コードの安全性は向上しますが、実際の開発ではこれらの値に対処しなければならない状況が頻繁に発生します。ここでは、nullやundefinedに安全に対処するための効果的なコーディング手法と設計パターンを紹介します。
型ガードを使用したnullチェック
TypeScriptでは、型ガードを利用して、nullやundefinedを安全に扱うことができます。型ガードは、実行時に値の型を確認し、適切な処理を行うための方法です。これにより、nullやundefinedが存在するかどうかを確認してから、その変数を操作できます。
function getLength(str: string | null): number {
if (str === null) {
return 0; // nullの場合、安全に0を返す
}
return str.length;
}この例では、strがnullである場合に0を返し、それ以外の場合に文字列の長さを返しています。nullのチェックを行うことで、安全に処理を進めることができます。
Optional Chainingを使った安全なプロパティアクセス
Optional Chaining（オプショナルチェイニング）は、TypeScriptが提供する便利な機能で、nullやundefinedの値が途中で出現した場合でも、安全にプロパティにアクセスできるようにする構文です。通常、深いネストのオブジェクトのプロパティにアクセスするときにnullが発生するリスクが高まりますが、Optional Chainingを使用することでエラーを回避できます。
const user = {
name: "Alice",
address: null,
};
console.log(user.address?.city); // undefinedこの例では、addressがnullであるため、cityプロパティにアクセスしようとしてもエラーが発生せず、undefinedが返されます。これにより、複雑なオブジェクト構造でも安全に値を取得できます。
Nullish Coalescingを使ったデフォルト値の設定
Nullish Coalescing（ヌリッシュ・コアレッシング）演算子（??）は、nullやundefinedが出現した場合に、デフォルト値を簡単に設定する方法です。これにより、値が存在しない場合に代わりの値を使用して処理を続けることができます。
let input = null;
let value = input ?? "デフォルト値";
console.log(value); // "デフォルト値"このコードでは、inputがnullなので、valueにはデフォルトの文字列「デフォルト値」が代入されます。Nullish Coalescingは、nullやundefinedに対するエラーハンドリングを簡潔に行うために非常に便利です。
関数のデフォルト引数を使う
関数の引数に対して、デフォルト値を設定することで、nullやundefinedが渡された場合でも、エラーを防ぎつつ意図した処理を行うことができます。これにより、引数が必須でない場合に安全な処理が可能となります。
function greet(name: string = "Guest") {
console.log(`Hello, ${name}`);
}
greet(); // "Hello, Guest"この例では、引数nameが渡されなかった場合（もしくはundefinedが渡された場合）でも、デフォルト値"Guest"が使用されます。
Non-nullアサーション演算子の使用
場合によっては、開発者が「ここでは絶対にnullやundefinedはありえない」と確信している場面があるかもしれません。その際には、TypeScriptのNon-nullアサーション演算子（!）を使用して、コンパイラに対して「この変数は必ず値がある」と明示することができます。
let element = document.getElementById('myElement')!;
element.textContent = "Hello, World!";この例では、getElementByIdがnullを返さないことを確信しているため、Non-nullアサーション演算子を使ってelementにアクセスしています。ただし、この手法は慎重に使用するべきで、誤用するとランタイムエラーの原因になります。
まとめ
TypeScriptでは、nullやundefinedを安全に扱うためにさまざまな機能が提供されています。型ガードやOptional Chaining、Nullish Coalescing、デフォルト引数などを使うことで、nullやundefinedによるエラーを防ぎ、堅牢なコードを書くことができます。これらの手法を駆使して、安全で保守性の高いコードを構築しましょう。
演習問題1：nullとundefinedを扱う関数の作成
ここでは、nullやundefinedを適切に扱う関数を作成する演習を通じて、これまで学んできた知識を実践します。TypeScriptの型チェックと、nullやundefinedを考慮した安全なコードの書き方を実際に試してみましょう。
課題1：安全な名前の表示関数
ユーザーの名前を受け取り、名前が存在すれば挨拶を表示し、名前がnullまたはundefinedであれば「ゲスト」として挨拶を表示する関数を作成してみましょう。この課題では、ユニオン型や型ガードを使ってnullとundefinedを安全に処理します。
function greetUser(name: string | null | undefined): void {
if (name === null || name === undefined) {
console.log("Hello, Guest");
} else {
console.log(`Hello, ${name}`);
}
}
// 使用例
greetUser("Alice"); // "Hello, Alice"
greetUser(null); // "Hello, Guest"
greetUser(undefined); // "Hello, Guest"この例では、nameがnullやundefinedである場合に「ゲスト」として挨拶を行い、それ以外の場合はnameを使用して挨拶を行います。nullやundefinedをユニオン型で定義することで、安全に処理ができるようになります。
課題2：配列の要素を安全に取得する関数
次に、配列から特定のインデックスの要素を取得し、その要素がnullまたはundefinedの場合にはデフォルト値を返す関数を作成します。この課題では、Optional ChainingとNullish Coalescingを使用して実装します。
function getArrayElement<T>(arr: T[], index: number, defaultValue: T): T {
return arr[index] ?? defaultValue;
}
// 使用例
const numbers = [10, 20, 30];
console.log(getArrayElement(numbers, 1, 0)); // 20
console.log(getArrayElement(numbers, 5, 0)); // 0 (存在しないインデックスに対してデフォルト値が返される)この関数は、指定されたインデックスに要素が存在しない場合に、デフォルト値を返すことでundefinedやエラーを回避しています。??演算子（Nullish Coalescing）を使うことで、nullやundefinedを判別し、適切にデフォルト値を返すことができます。
課題3：オブジェクトのネストされたプロパティへの安全なアクセス
オブジェクトのネストされたプロパティにアクセスし、そのプロパティが存在しない場合には安全にundefinedを返す関数を作成しましょう。この課題では、Optional Chainingを使用します。
function getNestedProperty(obj: any, propertyPath: string[]): any {
return propertyPath.reduce((acc, key) => acc?.[key], obj);
}
// 使用例
const user = {
name: "Alice",
address: {
city: "Tokyo",
},
};
console.log(getNestedProperty(user, ["address", "city"])); // "Tokyo"
console.log(getNestedProperty(user, ["address", "country"])); // undefined
console.log(getNestedProperty(user, ["profile", "bio"])); // undefinedこの関数では、propertyPathに従ってネストされたプロパティにアクセスし、途中でnullやundefinedに遭遇した場合でも安全にundefinedを返します。Optional Chainingを使うことで、ネストされたプロパティに安全にアクセスできます。
まとめ
これらの演習問題では、nullやundefinedを考慮した関数の作成を通じて、TypeScriptでの安全なコーディング手法を学びました。ユニオン型や型ガード、Optional Chaining、Nullish Coalescingを使うことで、エラーを未然に防ぎ、堅牢なコードを書くことができます。
TypeScriptのOptional Chaining
TypeScriptのOptional Chaining（オプショナルチェイニング）構文は、nullやundefinedの値が存在する場合でも、安全にオブジェクトのプロパティにアクセスできる便利な方法です。通常、深いネストされたオブジェクトにアクセスする際、プロパティが存在しない場合にエラーが発生するリスクがありますが、Optional Chainingを使用することで、このリスクを回避できます。以下では、Optional Chainingの使い方とその利点について説明します。
Optional Chainingの基本構文
Optional Chainingは、プロパティやメソッドにアクセスする際に、?.という構文を使って行います。この構文を使うことで、プロパティがnullやundefinedであれば自動的にundefinedを返し、エラーを防ぐことができます。
const user = {
name: "Alice",
address: {
city: "Tokyo",
},
};
console.log(user?.address?.city); // "Tokyo"
console.log(user?.profile?.bio); // undefinedこの例では、addressオブジェクトが存在するため、cityプロパティにアクセスして「Tokyo」が返されます。しかし、profileオブジェクトが存在しない場合でも、エラーは発生せず、undefinedが返されます。
メソッドのOptional Chaining
Optional Chainingはプロパティだけでなく、メソッドの呼び出しにも使用できます。もしメソッドが存在しない場合、エラーを回避してundefinedを返すことが可能です。
const user = {
name: "Bob",
greet() {
return `Hello, ${this.name}`;
},
};
console.log(user.greet?.()); // "Hello, Bob"
console.log(user.sayBye?.()); // undefinedこの例では、greetメソッドが存在するため呼び出されますが、sayByeメソッドが存在しない場合でもエラーは発生せず、undefinedが返されます。
配列アクセスでのOptional Chaining
Optional Chainingは、配列に対するアクセスにも使用できます。例えば、配列の要素が存在しない場合にエラーを防ぎたいときに便利です。
const numbers = [1, 2, 3];
console.log(numbers?.[1]); // 2
console.log(numbers?.[5]); // undefinedこの例では、配列numbersの2番目の要素（インデックス1）にアクセスして「2」を返しますが、存在しないインデックスにアクセスしてもエラーが発生せず、undefinedが返されます。
オプショナルチェイニングとNullish Coalescingの併用
Optional Chainingは、Nullish Coalescing（ヌリッシュ・コアレッシング）と組み合わせて使用することで、さらに柔軟な処理が可能です。Optional Chainingによってundefinedが返された場合でも、デフォルト値を設定して処理を続行できます。
const user = {
name: "Charlie",
address: null,
};
const city = user?.address?.city ?? "Unknown";
console.log(city); // "Unknown"この例では、addressがnullなので、?.cityへのアクセスはundefinedを返します。??演算子を使うことで、「Unknown」というデフォルト値を設定し、エラーを回避しつつ適切な処理を行っています。
Optional Chainingの注意点
Optional Chainingは非常に便利ですが、注意点もあります。Optional Chainingを多用することで、コードが読みにくくなったり、過剰に依存することで設計が複雑になる可能性があります。Optional Chainingはエラーハンドリングの補助として活用すべきであり、ロジックの主な処理部分に組み込むことは避けるべきです。
まとめ
TypeScriptのOptional Chainingは、深くネストされたオブジェクトや配列に安全にアクセスするための強力なツールです。nullやundefinedに対するエラーチェックを簡潔に行い、コードをより安全かつ読みやすく保つことができます。また、Nullish Coalescingと組み合わせることで、さらに柔軟なデフォルト値設定が可能です。Optional Chainingを適切に使用し、エラーのない堅牢なコードを作成しましょう。
nullish coalescing (??) の使い方
TypeScriptでは、nullやundefinedを簡単に扱えるための便利な構文として、Nullish Coalescing（ヌリッシュ・コアレッシング）演算子（??）が提供されています。この演算子は、変数の値がnullまたはundefinedである場合に、代わりのデフォルト値を提供するために使われます。ここでは、??演算子の使い方とその利点について詳しく説明します。
Nullish Coalescingの基本構文
Nullish Coalescing演算子は、左側の値がnullまたはundefinedの場合に、右側のデフォルト値を返します。JavaScriptの||演算子と似ていますが、||が「falsy」な値（例: 0 や空文字 ""）をデフォルト値とみなすのに対して、??はnullとundefinedのみに反応します。
let value = null;
let defaultValue = value ?? "デフォルト値";
console.log(defaultValue); // "デフォルト値"この例では、valueがnullなので、??演算子によって右側の"デフォルト値"が返されます。
`??`と`||`の違い
??と||は、似た用途で使われることが多いですが、挙動には明確な違いがあります。||はnullやundefinedに加えて「falsy」（偽）な値もデフォルト値として扱いますが、??はnullとundefinedにのみ反応します。
let num = 0;
let defaultNum = num || 10;
console.log(defaultNum); // 10 (0はfalsyなのでデフォルト値が返る)
defaultNum = num ?? 10;
console.log(defaultNum); // 0 (0はfalsyだがnull/undefinedではないためそのまま返る)この例では、numが0の場合、||演算子は0をfalsyとみなし、デフォルトの10を返します。しかし、??演算子ではnullやundefinedにのみ反応するため、0をそのまま返します。
オブジェクトのプロパティにデフォルト値を設定
Nullish Coalescingは、オブジェクトのプロパティがnullやundefinedの場合に、デフォルト値を設定するのに便利です。特に、外部のAPIから受け取ったデータなど、値がnullやundefinedになる可能性がある場面で役立ちます。
const user = {
name: "Alice",
age: null,
};
let userAge = user.age ?? 30; // nullなのでデフォルトの30が設定される
console.log(userAge); // 30この例では、ageプロパティがnullなので、??演算子を使ってデフォルトの30が代わりに設定されます。
関数の引数にデフォルト値を設定
関数の引数が渡されなかった場合やundefinedが渡された場合に、Nullish Coalescingを使ってデフォルト値を設定することも可能です。これにより、引数の値がnullやundefinedの場合でもエラーを防ぎ、期待した動作を実現できます。
function greet(name: string | null | undefined) {
let displayName = name ?? "Guest";
console.log(`Hello, ${displayName}`);
}
greet("Alice"); // "Hello, Alice"
greet(undefined); // "Hello, Guest"
greet(null); // "Hello, Guest"この例では、引数nameがnullまたはundefinedの場合、デフォルトの「Guest」が表示されます。??演算子を使うことで、コードをより簡潔に記述できます。
Optional Chainingとの併用
Optional Chaining（オプショナルチェイニング）と組み合わせることで、ネストされたプロパティに安全にアクセスしつつ、nullやundefinedの場合にはデフォルト値を設定する処理がさらに強力になります。
const user = {
profile: null,
};
let city = user?.profile?.city ?? "不明な場所";
console.log(city); // "不明な場所"この例では、profileがnullのため、?.cityはundefinedを返しますが、??演算子によりデフォルトの「不明な場所」が返されます。Optional ChainingとNullish Coalescingを組み合わせることで、ネストされたプロパティへの安全なアクセスとデフォルト値の設定が同時に行えます。
まとめ
Nullish Coalescing（??）は、nullやundefinedの値に対してデフォルト値を設定するための強力なツールです。||演算子とは異なり、「falsy」な値ではなく、nullとundefinedのみに反応するため、より精密な値の管理が可能です。また、Optional Chainingとの組み合わせにより、ネストされたプロパティへの安全なアクセスも実現できます。??演算子を使うことで、コードをより安全で簡潔に保ち、エラーを防ぐことができるでしょう。
演習問題2：nullish coalescingとOptional Chainingを実装
この演習では、実際にNullish Coalescing（??）とOptional Chaining（?.）を使って、nullやundefinedに対する安全な操作を行うコードを作成します。これらの演算子を適切に使うことで、エラーを回避しつつ、コードの可読性を向上させる方法を学びます。
課題1：ユーザープロフィールから安全にデータを取得する
以下のオブジェクト構造を基に、ユーザーのプロフィールデータを安全に取得し、もしnullやundefinedの場合はデフォルト値を返す関数を作成しましょう。
const user = {
name: "Alice",
profile: {
age: 30,
address: null,
},
};このオブジェクトを使い、nameとaddress.cityを安全に取得し、もしaddress.cityが存在しない場合は「Unknown City」というデフォルト値を返すようにします。
function getUserInfo(user: { name?: string; profile?: { age?: number; address?: { city?: string } } }) {
const userName = user?.name ?? "Guest";
const userCity = user?.profile?.address?.city ?? "Unknown City";
console.log(`Name: ${userName}`);
console.log(`City: ${userCity}`);
}
// 実行例
getUserInfo(user);
// 出力:
// Name: Alice
// City: Unknown Cityこの関数では、Optional Chainingを使ってプロパティに安全にアクセスし、nullやundefinedの場合にはNullish Coalescingでデフォルト値を返しています。address.cityがnullであるため、「Unknown City」というデフォルト値が表示されます。
課題2：ブログ記事のデータ取得
次に、ブログ記事オブジェクトから安全にデータを取得する関数を作成します。記事にはauthorやcontentといったプロパティがありますが、場合によってはこれらのデータが存在しないことがあります。author.nameが存在しない場合は「匿名」、content.bodyが存在しない場合は「本文なし」と表示するようにします。
const blogPost = {
title: "TypeScriptの基本",
author: null,
content: {
body: "TypeScriptは型安全性を提供するJavaScriptのスーパーセットです。",
},
};
function getBlogPostInfo(post: { title: string; author?: { name?: string }; content?: { body?: string } }) {
const authorName = post?.author?.name ?? "匿名";
const contentBody = post?.content?.body ?? "本文なし";
console.log(`Title: ${post.title}`);
console.log(`Author: ${authorName}`);
console.log(`Content: ${contentBody}`);
}
// 実行例
getBlogPostInfo(blogPost);
// 出力:
// Title: TypeScriptの基本
// Author: 匿名
// Content: TypeScriptは型安全性を提供するJavaScriptのスーパーセットです。この関数では、authorやcontentが存在しない可能性を考慮し、Optional ChainingとNullish Coalescingを組み合わせて安全にデータを取得しています。
課題3：設定データの取得
最後に、設定データからユーザーのテーマ設定を取得する関数を作成します。もしテーマがnullやundefinedの場合は「デフォルトテーマ」が適用されるようにします。
const settings = {
theme: null,
};
function getTheme(settings: { theme?: string }) {
const theme = settings?.theme ?? "デフォルトテーマ";
console.log(`現在のテーマ: ${theme}`);
}
// 実行例
getTheme(settings);
// 出力:
// 現在のテーマ: デフォルトテーマこの例では、themeがnullの場合に「デフォルトテーマ」が返されます。Nullish Coalescingによって、テーマ設定がない場合でも安全にデフォルト値が適用されるようにしています。
まとめ
今回の演習では、nullやundefinedを安全に扱うために、Nullish Coalescing（??）とOptional Chaining（?.）を実践的に使いました。これらの演算子を使うことで、複雑なオブジェクト構造にアクセスする際のエラーを回避し、デフォルト値を提供することが容易になります。これらのテクニックを駆使することで、より堅牢で読みやすいコードを書くことができるでしょう。
まとめ
本記事では、JavaScriptにおけるnullとundefinedの違いを明確にし、それらをTypeScriptで安全に扱うための方法を学びました。strictNullChecksオプションを活用して厳密な型チェックを行い、Optional Chaining（?.）とNullish Coalescing（??）を組み合わせることで、複雑なオブジェクトの操作でも安全にデータを取得できることがわかりました。これらのテクニックを使うことで、nullやundefinedによるエラーを回避し、堅牢なコードを書くことができます。
コメント