??によるNull合体
すべてのfalsy値ではなく、nullとundefinedの場合だけフォールバックを提供します。
「??によるNull合体」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
Null合体演算子
?? 演算子は、左辺が null または undefined の場合にのみ右辺を返します。それ以外の場合は左辺の値を返します。デフォルト値を指定するための、意図に忠実な方法です。
const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'nullishの場合だけフォールバックする
重要なキーワードは nullish です。右辺が使われるのは、null と undefined の場合だけです。falsyな値を含め、それ以外のすべての値は変更されずにそのまま渡されます。
console.log(0 ?? 99); // 0
console.log('' ?? 'x'); // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'||の問題点
論理ORの || は、nullishな値だけでなく、0、''、false、NaN などあらゆるfalsy値に対してフォールバック値を使います。そのため、0 や空文字列が有効な入力である場合に、バグを生むことがよくあります。
const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0 — correct正しいデフォルト値の指定
0、空文字列、falseを有効な値として保持したい場合は ?? を使ってください。どのfalsy値でも本当にフォールバックさせたい場合に限り、|| を使用します。
function volume(v: number | undefined): number {
return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));関数パラメーターで??を使う
よくあるパターンは、undefined が渡されたときにオプションのパラメーターへデフォルト値を指定しつつ、意味のあるfalsyな入力は保持することです。
function greet(name?: string): string {
return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());??の結果の型
a ?? b の型は、a の型から null | undefined を取り除き、b の型とユニオンにしたものです。a が string | null で、b が string の場合、結果は string になります。
const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());デフォルト値をチェーンする
?? をチェーンして、複数の値の供給元を順番に試すことができます。値がnullishの場合は次の候補へ進み、最初に見つかったnullishでない値が採用されます。
const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);??と演算子の優先順位
?? と || または && は、括弧なしでは混在させられません。TypeScriptでは曖昧さを避けるために括弧が必要です。常に明示的にグループ化してください。
const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);ゼロと未指定を区別する
実際の開発では、よくこの区別が必要になります。温度、スコア、残高の 0 は有効なデータである一方、undefined は「指定されていない」ことを意味する場合です。?? ならこれらを区別できますが、|| では同じものとして扱われます。
function format(temp: number | undefined): string {
return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));オブジェクトのプロパティで??を使う
オプションのプロパティを読み取り、デフォルト値を指定するのは、?? の日常的な使い方です。オプショナルチェーンと自然に組み合わせられるため、次のレッスンで一緒に扱います。
type Opts = { retries?: number };
function run(o: Opts): number {
return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));どちらを選ぶべきか
判断の基準は次のとおりです。0、''、false が保持すべき有効な値なら、?? を使ってください。どのfalsy値でも本当に置き換えたい場合は、|| を使います。デフォルト値に関するバグのほとんどは、習慣的に || を使うことから生じます。
const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty keptクイックチェック
null合体演算子についての理解度を確認しましょう。
まとめ：null合体演算子
??について、次のことを学びました。
- 左辺が
nullまたはundefinedの場合にのみ、フォールバック値を返します。 ||とは異なり、0、''、falseのような有効なfalsy値を保持します。- 結果の型から
null | undefinedを取り除きます。 ||または&&と組み合わせる場合は、括弧が必要です。
次は、?.と??を組み合わせます。
function port(v: number | undefined): number {
return v ?? 8080;
}
console.log(port(0), port(undefined));よくある質問
「??によるNull合体」レッスンは無料ですか？
はい。「??によるNull合体」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「??によるNull合体」で何を学びますか？
すべてのfalsy値ではなく、nullとundefinedの場合だけフォールバックを提供します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「??によるNull合体」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ?.によるオプショナルチェーン
- ??によるNull合体
- ?.と??の組み合わせ
- オプショナルな呼び出しと要素アクセス