TypeScriptにおけるNull合体演算子
この記事ではTypeScriptにおけるNull合体演算子について説明します。
YouTube Video
TypeScriptにおけるNull合体演算子
TypeScriptにおけるNull合体演算子（Nullish Coalescing Operator）??は、JavaScriptの短絡評価と似ていますが、より明確にnullまたはundefinedの場合にのみフォールバック値を提供するための演算子です。この演算子を使用することで、値が null または undefined であるかどうかを確認し、必要に応じてデフォルト値を簡単に設定できます。
Null合体演算子(Nullish Coalescing Operator, ??)は、左辺の値が null または undefined である場合にのみ、右辺の値を返します。これにより、false や空文字列、数値の 0 といった値はそのまま評価されます。これが従来の論理OR演算子(||)との大きな違いです。この演算子は、TypeScript 3.7で導入されました。
基本構文
基本構文は次のようになります。
1let result = value ?? defaultValue;valueは、nullまたはundefinedかどうかを確認する対象です。defaultValueは、valueがnullまたはundefinedの場合に返される値です。
使用例
1function getUserName(userName: string | null | undefined): string {
2 return userName ?? "Default User";
3}
4
5console.log(getUserName("Alice")); // Output: Alice
6console.log(getUserName(null)); // Output: Default User
7console.log(getUserName(undefined)); // Output: Default User
ここで、関数 getUserName では、userName が null または undefined であれば "Default User" を返し、それ以外の場合は userName の値をそのまま返します。
論理OR演算子との違い
Null合体演算子と論理OR演算子には重要な違いがあります。論理OR演算子は、false, 0, ""（空文字列）といった値も null や undefined と同様に「falsy」とみなします。一方、Null合体演算子はあくまで null および undefined のみをフォールバックの対象にします。
論理OR演算子の例
1function getUserAge(age: number | null | undefined): number {
2 return age || 18; // `0` also applies the default value
3}
4
5console.log(getUserAge(25)); // Output: 25
6console.log(getUserAge(0)); // Output: 18
7console.log(getUserAge(null)); // Output: 18
- このように、論理OR演算子は
0の場合もデフォルト値の18が返されます。
Null合体演算子の例
1function getUserAge(age: number | null | undefined): number {
2 return age ?? 18; // `0` does not apply the default value
3}
4
5console.log(getUserAge(25)); // Output: 25
6console.log(getUserAge(0)); // Output: 0
7console.log(getUserAge(null)); // Output: 18
-
一方、Null合体演算子は
0の場合もそのままの値が返されます。 -
論理OR演算子とNull合体演算子の使い分けは、
0や空文字列が許容されるかどうかに依存します。たとえば、ユーザーの年齢が0の場合でもそのまま使いたいなら、Null合体演算子を使う必要があります。
型との組み合わせ
TypeScriptの型安全性を活かして、Null合体演算子と併用することで、コードの堅牢性を高めることができます。次の例では、特定のプロパティが null または undefined の場合にデフォルト値を使用しています。
1interface User {
2 name: string;
3 age?: number | null;
4}
5
6function displayUserInfo(user: User): string {
7 const userName: string = user.name;
8 const userAge: number = user.age ?? 18;
9 return `Name: ${userName}, Age: ${userAge}`;
10}
11
12const user1: User = { name: "John", age: null };
13const user2: User = { name: "Doe" };
14
15console.log(displayUserInfo(user1)); // Output: Name: John, Age: 18
16console.log(displayUserInfo(user2)); // Output: Name: Doe, Age: 18
- インターフェース
Userでは、ageプロパティに、number、null、undefinedが許されるため、Null合体演算子を用いて、デフォルト値として18が設定されるようにしています。 - 一方、
nameプロパティには、stringのみ許されるため、そのままの値を利用しています。
まとめ
- Null合体演算子は、
nullまたはundefinedの場合にのみデフォルト値を設定するのに役立ちます。従来の論理OR演算子とは異なり、falseや0、空文字列などを「falsy」として扱わず、それらの値を保持する場合に特に有効です。また、TypeScriptの型システムと組み合わせることで、より堅牢で読みやすいコードを作成できます。 - Null合体演算子を効果的に活用することで、デフォルト値を設定するロジックを簡潔に記述しつつ、無駄な
nullチェックを減らすことが可能です。
TypeScriptにおけるNull合体代入演算子
Null合体代入演算子（??=）は、TypeScriptにおいて比較的新しく導入された演算子で、変数がnullまたはundefinedである場合にのみ代入を行うための便利な方法です。ここでは、この演算子がどのように動作するのか、どのような場面で有効か、使用例をコードとともに解説します。
Null合体代入演算子とは
Null合体代入演算子は、Null合体演算子に基づいた代入演算子です。この演算子は、変数がnullまたはundefinedである場合にのみ、新しい値を代入するために使用されます。
1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null,
3 // so the new value is assigned
4
5console.log(variable); // Output: "Default Value"
この演算子を使用することで、より簡潔に「変数が未定義またはnullならば代入」という処理を記述することができます。
従来の代入方法との比較
Null合体代入演算子を使わずに同様の処理を行う場合、if文や三項演算子を使う必要がありました。従来の代入方法と比較してみましょう。
従来の方法
if文を使うと以下のように記述できます。
1let variable: string | null | undefined = null;
2if (variable === null || variable === undefined) {
3 variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"
三項演算子を使った方法
また、三項演算子を使うと以下のように記述できます。
1let variable: string | null | undefined = undefined;
2variable = variable != null ? variable : "Default Value";
3// != null checks for both null and undefined
4// (intentional loose equality comparison)
5
6console.log(variable); // Output: "Default Value"
Null合体代入演算子を使った簡潔な方法
一方、Null合体代入演算子を使うと以下のように記述できます。
1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"
このように、Null合体代入演算子は、他の代入方法と比べて非常にシンプルで読みやすく、コードの可読性が向上します。
??=の具体的な使用例
Null合体代入演算子は、オブジェクトのプロパティの初期化やデフォルト値の設定など、さまざまな場面で便利です。以下に具体的な例を紹介します。
オブジェクトプロパティの初期化
1interface Config {
2 theme?: string;
3 language?: string;
4}
5
6let config: Config = {};
7config.theme ??= "light"; // Set the default "light" theme if none is specified
8config.language ??= "en"; // Set the default "en" language if none is specified
9
10console.log(config); // Output: { theme: "light", language: "en" }
配列の初期化
1let numbers: number[] | null = null;
2numbers ??= []; // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]
関数の引数にデフォルト値を設定
1function greet(name?: string) {
2 name ??= "Guest"; // Set name to "Guest" if it is undefined or null
3 console.log(`Hello, ${name}!`);
4}
5
6greet(); // Output: "Hello, Guest!"
7greet("Alice"); // Output: "Hello, Alice!"
注意点と制約
Null合体代入演算子は非常に便利ですが、いくつかの注意点があります。
nullとundefinedのみが対象です。
1let str: string | null = "";
2str ??= "Default";
3console.log(str); // Output: "" (remains an empty string)
4
5let num: number | undefined = 0;
6num ??= 100;
7console.log(num); // Output: 0 (remains 0)
- この演算子は、
nullまたはundefinedの場合にのみ代入を行います。例えば、空文字列（""）や0、falseといった値は対象になりません。
他の演算子との併用には注意が必要です。
1let value: string | null = null;
2
3// Targets not only "null" and "undefined" but also falsy values
4value ||= "Default";
5console.log(value); // Output: "Default"
6
7value = "";
8// An empty string is also targeted
9value ||= "Default";
10console.log(value); // Output: "Default"
11
12value = null;
13// Targets only null or undefined
14value ??= "Default";
15console.log(value); // Output: "Default"
- Null合体代入演算子は他の演算子と一緒に使う場合、意図しない結果を生むことがあります。特に論理OR代入演算子との違いを理解しておく必要があります。
参考コード
1let config: { theme?: string; language?: string } = {};
2
3// Use Nullish Coalescing Assignment to set default values
4config.theme ??= "light";
5config.language ??= "en";
6
7console.log(config); // Output: { theme: "light", language: "en" }
8
9let list: number[] | null = null;
10list ??= [];
11list.push(42);
12
13console.log(list); // Output: [42]
- Null合体代入演算子を使うことで、無駄なコードを省き、よりスムーズでエレガントなTypeScriptコードを作成できるようになります。
まとめ
Null合体代入演算子（??=）は、TypeScriptにおけるシンプルかつ効率的な代入処理の一つです。特に、nullまたはundefinedのチェックを行いながらデフォルト値を設定する場面で非常に役立ちます。従来のif文や三項演算子と比較して、コードが簡潔で可読性が高くなります。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。