TypeScriptでのnullish coalescing（??）を使ったnullとundefinedの扱い方を徹底解説

TypeScriptにおいて、null や undefined といった値を適切に扱うことは、エラーの防止やコードの可読性を向上させるために重要です。これを簡潔に実現するための方法が nullish coalescing（??）演算子 です。null や undefined の値を明確に区別し、意図したデフォルト値を設定するためにこの演算子が利用されます。JavaScriptの論理OR演算子（||）と似た機能を持ちながら、微妙な違いによって、意図した動作をより厳密に制御できるこの機能は、特にTypeScriptでの開発において強力なツールとなります。本記事では、nullish coalescingの詳細な解説や実際の使用例を通して、その利点と効果的な使い方について掘り下げていきます。

nullish coalescing演算子とは

nullish coalescing演算子（??）は、JavaScriptおよびTypeScriptで導入された新しい演算子で、nullまたはundefinedに対してのみ反応します。これは、変数がnullまたはundefinedである場合にデフォルト値を提供するためのシンプルかつ明確な方法です。例えば、以下のコードでは、変数valueがnullかundefinedであればデフォルトの値が適用されます。

let value = null;
let result = value ?? 'default value';
console.log(result); // 'default value'

この演算子は、従来使われていた論理OR（||）演算子と似ていますが、重要な違いとして、nullとundefinedのみに反応し、false、0、''（空文字）といった他の「falsy」な値は無視されます。これにより、意図せずにfalseや0をデフォルト値に置き換えてしまうリスクを回避できます。

nullish coalescingと論理OR（||）の違い

nullish coalescing演算子（??）と論理OR演算子（||）は、どちらもデフォルト値を設定するために使用されますが、動作には明確な違いがあります。論理OR演算子は、左側の値が「falsy」（false、0、''、null、undefinedなど）であれば右側の値を返すのに対し、nullish coalescing演算子は、nullやundefinedにのみ反応します。

論理OR（||）の例

let value = 0;
let result = value || 'default';
console.log(result); // 'default'

この例では、valueが0であるにもかかわらず、0が「falsy」であるため、'default'が返されます。

nullish coalescing（??）の例

let value = 0;
let result = value ?? 'default';
console.log(result); // 0

一方、nullish coalescingでは、0はnullでもundefinedでもないため、そのまま0が返されます。

この違いにより、nullish coalescingは、nullやundefinedのみに対応したい場合に非常に有用です。論理OR演算子だと予期せぬデフォルト値が適用されることがあるため、値が0や空文字のような「falsy」な値でもそれをそのまま使用したい場合には、nullish coalescingが適した選択となります。

nullish coalescingの使用例

nullish coalescing演算子（??）は、さまざまな状況で利用でき、特にデフォルト値を指定する際に便利です。ここでは、具体的な使用例を見ていきましょう。

例1: フォームデータの処理

ユーザーがフォームを提出した際、未入力のフィールドに対してデフォルト値を設定する場面でnullish coalescingを使うことができます。

function processForm(data: { name?: string, age?: number }) {
    const name = data.name ?? 'ゲスト';
    const age = data.age ?? 18;
    console.log(`名前: ${name}, 年齢: ${age}`);
}

processForm({ name: '太郎' }); // 名前: 太郎, 年齢: 18
processForm({}); // 名前: ゲスト, 年齢: 18

この例では、nameとageがnullやundefinedであれば、それぞれ’ゲスト’と18がデフォルト値として適用されます。

例2: APIレスポンスのデフォルト値

APIからのレスポンスで、値が欠けている可能性がある場合にもnullish coalescingは有効です。以下の例では、APIが期待する値を返さない場合に備えて、デフォルト値を設定しています。

const response = {
    user: {
        name: 'Jane Doe',
        age: undefined
    }
};

const userName = response.user.name ?? '不明';
const userAge = response.user.age ?? '未設定';

console.log(`ユーザー名: ${userName}, ユーザー年齢: ${userAge}`);
// 出力: ユーザー名: Jane Doe, ユーザー年齢: 未設定

例3: 設定値の適用

アプリケーションの設定オプションにnullish coalescingを使うことで、ユーザーが設定しなかったオプションに対して適切なデフォルト値を提供できます。

function setupConfig(config: { darkMode?: boolean, language?: string }) {
    const darkMode = config.darkMode ?? false;
    const language = config.language ?? 'en';
    console.log(`ダークモード: ${darkMode}, 言語: ${language}`);
}

setupConfig({ darkMode: true }); // ダークモード: true, 言語: en
setupConfig({}); // ダークモード: false, 言語: en

これらの例から、nullish coalescing演算子は、nullやundefinedを明確に扱いたい場合に強力なツールであることがわかります。特に、ユーザー入力やAPIレスポンス、設定値などの動的なデータ処理に役立ちます。

nullとundefinedの違いとTypeScriptでの扱い

TypeScriptにおいて、nullとundefinedは似ているようで異なる概念です。それぞれの違いを理解し、適切に使い分けることで、予期しないエラーを防ぎ、より堅牢なコードを作成することができます。

nullとは

nullは「存在しない値」を明示的に示すために使われます。たとえば、変数が何らかのオブジェクトを参照する予定だが、まだそのオブジェクトが存在しない場合にnullを使用します。つまり、nullは意図的に「値がない」という状態を表すもので、開発者が手動で設定することが一般的です。

let user: string | null = null; 
// userは現在何も参照していない

undefinedとは

一方、undefinedは「値が定義されていない」という意味を持ちます。変数が宣言されたが、まだ値が代入されていない場合にundefinedが自動的に設定されます。つまり、undefinedはJavaScriptのエンジンが自動的に設定する値で、開発者が意図的に設定することは稀です。

let age: number;
console.log(age); // undefined（値が未定義）

TypeScriptでのnullとundefinedの扱い

TypeScriptでは、nullとundefinedは異なる型として扱われますが、基本的にはどちらも許容される可能性のある値です。TypeScriptの設定次第で、nullやundefinedを厳格に扱うことができ、--strictNullChecksフラグを有効にすることで、nullやundefinedの扱いがより明確になります。

let value: string | undefined;
value = undefined; // OK
value = "Hello";   // OK
value = null;      // エラー: 'null' は 'string | undefined' 型に割り当てできません

このように、TypeScriptではnullやundefinedの取り扱いを厳格に設定することで、予期しない値によるバグを減らすことができます。

nullとundefinedの使い分け

実際の開発において、nullは意図的に「値が存在しない」ことを示したい場合に使われるべきです。例えば、オプションの設定やオブジェクトが初期化されていないことを示す際に使用します。一方、undefinedは変数がまだ定義されていないことを示すために使われ、通常は開発者によって明示的に設定されることはありません。

この違いを明確に理解し、適切に使い分けることで、コードの可読性や保守性を向上させることができます。

nullish coalescingとオプショナルチェイニングの併用

TypeScriptでは、nullやundefinedが発生する可能性のあるコードを簡潔に記述できる機能として、nullish coalescing演算子（??） と オプショナルチェイニング演算子（?.） が提供されています。この2つを組み合わせることで、より安全かつ効率的にnullやundefinedを扱うことができます。

オプショナルチェイニング演算子（?.）とは

オプショナルチェイニング演算子は、オブジェクトや配列のプロパティにアクセスする際、プロパティが存在しない場合にエラーを発生させずにundefinedを返す演算子です。これにより、複数のネストされたオブジェクトのプロパティにアクセスする際の安全性が高まります。

const user = {
    profile: {
        name: 'John'
    }
};

console.log(user.profile?.name); // 'John'
console.log(user.address?.city); // undefined（エラーなし）

nullish coalescingとの組み合わせ

nullish coalescing演算子（??）とオプショナルチェイニング（?.）を組み合わせることで、プロパティが存在しない場合にデフォルト値を設定することができます。オプショナルチェイニングによって、存在しないプロパティへのアクセスを安全に行い、その結果がundefinedまたはnullだった場合に、nullish coalescingでデフォルト値を返します。

const user = {
    profile: null
};

const userName = user.profile?.name ?? 'ゲスト';
console.log(userName); // 'ゲスト'

この例では、user.profileがnullであるため、?.によってundefinedが返されます。その後、??によってデフォルト値の'ゲスト'が適用されます。もしオプショナルチェイニングを使わずにプロパティに直接アクセスした場合、エラーが発生しますが、?.を使うことでそれを回避できます。

実践例: 設定オブジェクトの安全なアクセス

設定オブジェクトにアクセスする際、すべてのプロパティが定義されているとは限りません。ここでもオプショナルチェイニングとnullish coalescingの組み合わせが役立ちます。

const settings = {
    theme: {
        darkMode: true
    }
};

const darkMode = settings.theme?.darkMode ?? false;
console.log(darkMode); // true

const language = settings.language?.default ?? 'en';
console.log(language); // 'en'（デフォルト値）

この例では、設定オブジェクトの中にtheme.darkModeが存在する場合はその値を取得し、存在しない場合やnullの場合はデフォルトのfalseを返しています。また、settings.language?.defaultが存在しない場合には、'en'というデフォルト言語を適用しています。

メリット

• エラーの防止: オプショナルチェイニングによって、プロパティが存在しない場合でもエラーが発生しません。
• 簡潔なコード: ネストされたオブジェクトのプロパティに安全にアクセスするコードが非常に簡潔になります。
• 柔軟なデフォルト値の設定: nullish coalescingと組み合わせることで、nullやundefinedの場合に適切なデフォルト値を柔軟に設定できます。

このように、オプショナルチェイニングとnullish coalescingを併用することで、特にオブジェクトが複雑な場合でも、安全で読みやすいコードを簡単に書くことができます。

実践：nullish coalescingを使った条件付きレンダリング

nullish coalescing演算子（??）は、条件付きレンダリングを行う際に非常に便利です。特に、Webアプリケーションのフロントエンドで、データが未定義の場合に代替コンテンツを表示する場面などで有効です。ここでは、Reactを例に、nullish coalescingを使った条件付きレンダリングの実践的な方法を紹介します。

Reactでの基本的な条件付きレンダリング

Reactで条件付きレンダリングを行う際、データが存在しない場合や、nullまたはundefinedである場合に代替要素を表示することが一般的です。nullish coalescingを使うことで、この処理が簡潔に記述できます。

以下のコードは、ユーザーのプロフィール情報を表示するコンポーネントです。ユーザー名が存在しない場合に「ゲスト」というデフォルト名を表示します。

import React from 'react';

interface UserProfileProps {
  user: {
    name?: string;
    age?: number;
  };
}

const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
  const userName = user.name ?? 'ゲスト';
  const userAge = user.age ?? '年齢不明';

  return (
    <div>
      <h2>ユーザー名: {userName}</h2>
      <p>年齢: {userAge}</p>
    </div>
  );
};

// 使用例
const user = {
  name: undefined,
  age: 30
};

export const App = () => <UserProfile user={user} />;

解説

この例では、user.nameがundefinedである場合に、nullish coalescing演算子を使用してデフォルトの「ゲスト」という名前を設定しています。同様に、user.ageがnullまたはundefinedであれば「年齢不明」というテキストが表示されます。結果として、ユーザー情報が完全でなくても、アプリケーションはエラーを出さずに代替情報を表示します。

非同期データのレンダリング

非同期で取得されるデータ（例えばAPIからのレスポンス）に対しても、nullish coalescingを活用して安全にデフォルト値を設定し、データの取得中に仮のコンテンツを表示することができます。

import React, { useState, useEffect } from 'react';

const UserProfile = () => {
  const [user, setUser] = useState<{ name?: string; age?: number } | null>(null);

  useEffect(() => {
    // 非同期でデータを取得する（例：API呼び出し）
    setTimeout(() => {
      setUser({ name: 'Alice', age: undefined });
    }, 2000);
  }, []);

  const userName = user?.name ?? 'ゲスト';
  const userAge = user?.age ?? '年齢不明';

  if (!user) {
    return <div>データを読み込み中...</div>;
  }

  return (
    <div>
      <h2>ユーザー名: {userName}</h2>
      <p>年齢: {userAge}</p>
    </div>
  );
};

解説

この例では、useEffectフックを使って非同期でユーザーデータを取得しています。データが取得される前はnullの状態が続くため、「データを読み込み中…」というテキストを一時的に表示します。データが取得された後、nullish coalescingを使って安全にデフォルト値を設定し、ユーザー情報を表示します。

メリット

1. エラー回避: データがnullやundefinedの場合でも、エラーが発生せず、ユーザーに適切なメッセージを表示できます。
2. コードの簡潔化: if文を多用せず、nullish coalescingを使うことでコードがシンプルになります。
3. 柔軟な代替コンテンツの表示: デフォルト値を設定することで、UIの一貫性が保たれ、予期しない動作を防げます。

nullish coalescingを使用することで、条件付きレンダリングがより直感的でエラーの少ないコードとなります。特に、動的なデータに対して安全かつ簡潔にデフォルト値を設定できるため、Reactなどのフロントエンド開発で大いに役立ちます。

nullish coalescingの注意点とトラブルシューティング

nullish coalescing（??）は非常に便利な機能ですが、いくつかの注意点や誤った使い方により、予期せぬ挙動を引き起こす可能性があります。ここでは、nullish coalescingを使用する際の注意点と、それに関連するトラブルシューティングについて解説します。

注意点1: null と undefined 以外の「falsy」値

nullish coalescingは、nullやundefinedにのみ反応するという特徴を持っています。これは、論理OR（||）演算子とは異なり、他の「falsy」な値（例：false、0、''）はそのまま返されるため、デフォルト値が設定されないことがあります。意図的にこれらの値を使いたい場合は問題ありませんが、falseや0もデフォルト値に切り替えたい場合には、nullish coalescingは適していません。

let value = 0;
let result = value ?? 'default value';
console.log(result); // 0 (デフォルト値が設定されない)

トラブルシューティング1: 0 や false の扱い

デフォルト値を使用したいのに、0やfalseなどの「falsy」な値を期待している場合、論理OR（||）を使用するか、状況に応じて条件式を工夫する必要があります。

let value = 0;
let result = value || 'default value'; // デフォルト値 'default value' が設定される
console.log(result); // 'default value'

注意点2: 演算子の優先順位

nullish coalescing演算子の優先順位は他の演算子とは異なります。たとえば、論理AND（&&）や論理OR（||）と組み合わせる場合、適切にグループ化しないと予期しない動作を引き起こすことがあります。nullish coalescingと他の演算子を組み合わせる場合は、常に括弧を使って明示的に順序を指定することが推奨されます。

let result = null ?? false || 'default';
// resultは 'default' となる（優先順位による）

正しくは、括弧で優先順位を明示する必要があります。

let result = (null ?? false) || 'default';
// resultは false となる

トラブルシューティング2: 括弧の使い忘れによるバグ

複数の演算子を組み合わせる場合は、括弧を適切に使用して演算子の順序を明確にしましょう。特にnullish coalescingを他の論理演算子と併用する際に、意図した通りに動作するよう、必ず優先順位を確認してください。

注意点3: nullish coalescingと厳格等価演算子

nullish coalescing演算子は、nullやundefinedにだけ反応しますが、これらを区別せずに扱います。例えば、undefinedをnullとして処理する場合は問題ありませんが、これらを厳密に区別する必要がある場合は、別途条件を追加してチェックする必要があります。

let value: null | undefined | string = undefined;
if (value === undefined) {
  // undefinedの場合の処理
} else if (value === null) {
  // nullの場合の処理
}

トラブルシューティング3: nullとundefinedの区別が必要な場合

nullish coalescingは、nullとundefinedを一括して扱うため、これらを区別したい場合には追加の条件を用いる必要があります。特に、APIレスポンスの検証やフォームバリデーションなど、これらの値を区別して処理する場合は、===（厳密等価演算子）を使用して明示的に確認してください。

結論

nullish coalescing演算子は、nullやundefinedを効率的に処理する強力なツールですが、使用する際は以下のポイントに注意が必要です。

• 0やfalseといった「falsy」な値にはデフォルト値が適用されない。
• 演算子の優先順位に注意し、必要に応じて括弧を使用する。
• nullとundefinedを厳密に区別する必要がある場合、追加の条件を使用する。

これらの点に注意すれば、nullish coalescingを使って柔軟かつ効率的なデフォルト値設定が可能になり、コードの堅牢性が向上します。

他のJavaScript言語機能との組み合わせ

nullish coalescing（??）は、他のJavaScriptの言語機能と組み合わせることで、さらに強力で柔軟なコードを実現できます。ここでは、nullish coalescingが他のJavaScript機能とどのように連携できるかをいくつかの例で紹介します。

1. 論理AND（&&）との組み合わせ

nullish coalescingを論理AND（&&）と組み合わせることで、特定の条件が満たされている場合にのみ、nullish coalescingの評価が行われるようにできます。これは、特定の条件下でのみデフォルト値を設定したいときに便利です。

const user = { active: true, name: null };

// ユーザーがアクティブな場合にのみ名前を取得
const displayName = user.active && (user.name ?? 'ゲスト');
console.log(displayName); // 'ゲスト'

この例では、user.activeがtrueである場合にのみ、user.nameが評価され、nullの場合にはデフォルトの’ゲスト’が返されます。これにより、論理条件を加えた柔軟な処理が可能になります。

2. テンプレートリテラルとの組み合わせ

テンプレートリテラルは、文字列を簡単に操作できる強力な機能ですが、nullish coalescingを組み合わせることで、欠落したデータを安全に扱いながら文字列を生成することができます。

const user = { firstName: 'John', lastName: null };

const fullName = `${user.firstName ?? '不明'} ${user.lastName ?? '不明'}`;
console.log(fullName); // 'John 不明'

このように、nullish coalescingを使ってnullやundefinedに対してデフォルトの文字列を設定することで、動的なコンテンツ生成が簡単に行えます。

3. 配列のデフォルト値設定

nullish coalescingは、配列に対しても適用できます。例えば、データが欠落している場合にデフォルトの空配列を設定することで、エラーを回避しつつ柔軟な操作が可能です。

const data = { items: null };

// nullまたはundefinedの場合、空の配列を使用
const items = data.items ?? [];
console.log(items.length); // 0

この例では、data.itemsがnullまたはundefinedであれば空の配列が代わりに使われるため、itemsの操作時にエラーが発生するリスクを回避できます。

4. 関数との組み合わせ

関数のパラメータに対しても、nullish coalescingを使うことでデフォルト値を柔軟に設定できます。これにより、関数呼び出し時に値が渡されなかった場合でも安全に処理が進められます。

function greet(name?: string) {
  const displayName = name ?? 'ゲスト';
  console.log(`こんにちは、${displayName}さん！`);
}

greet(); // こんにちは、ゲストさん！
greet('Alice'); // こんにちは、Aliceさん！

このように、関数のパラメータが渡されなかった場合にデフォルト値を適用することで、より堅牢なコードが書けます。

5. 短絡評価との併用

nullish coalescingは短絡評価（評価の早期終了）と相性が良く、複数の条件を組み合わせた複雑なロジックでも簡潔に記述できます。

const user = { active: false, settings: null };

// ユーザーがアクティブで、設定がある場合にのみ設定を取得
const userSettings = user.active && (user.settings ?? 'デフォルト設定');
console.log(userSettings); // false

この例では、user.activeがfalseであれば、その時点で評価が終了し、user.settingsは評価されません。これにより、複雑な条件付き処理を簡単に記述できます。

まとめ

nullish coalescingは、他のJavaScriptの機能と組み合わせることで、さまざまな状況に対応できる柔軟なコードを作成できます。論理ANDやテンプレートリテラル、配列や関数のデフォルト値設定など、さまざまなシーンでの併用によって、コードの可読性や安全性が向上します。

TypeScriptプロジェクトにおけるnullish coalescingの利便性

TypeScriptの大規模プロジェクトにおいて、nullish coalescing（??） 演算子は、コードの安全性と可読性を向上させるために欠かせないツールです。複雑なデータ構造や動的な入力を扱う場合、nullやundefinedが頻繁に現れるため、それらを適切に処理することが必要です。ここでは、nullish coalescingがTypeScriptプロジェクトにおいてどのように利便性を提供するかを具体的に解説します。

1. 大規模コードベースにおけるデフォルト値の簡便な管理

大規模プロジェクトでは、多数の変数やオプションを扱う必要があり、各種設定やパラメータにデフォルト値を適用する場面が頻繁にあります。nullish coalescingを利用することで、これらのデフォルト値を簡単に管理でき、コードが大幅に簡潔化されます。

interface Config {
  retryCount?: number;
  timeout?: number;
}

function initialize(config: Config) {
  const retryCount = config.retryCount ?? 3; // デフォルトは3回リトライ
  const timeout = config.timeout ?? 1000;    // デフォルトは1秒

  console.log(`Retry count: ${retryCount}, Timeout: ${timeout}ms`);
}

このように、設定オブジェクトのプロパティが未定義の場合にデフォルト値を設定することで、コードの安全性が高まり、設定値が欠如している際の問題を未然に防げます。

2. APIレスポンスの安全な処理

大規模なWebアプリケーションでは、APIからのレスポンスデータがnullやundefinedを含むことがよくあります。特に、外部APIを利用する場合、期待するデータが欠けている可能性に備える必要があります。nullish coalescingを使えば、レスポンスに対して安全にデフォルト値を設定でき、予期しないエラーを防ぐことができます。

async function fetchUserProfile(): Promise<{ name?: string, age?: number }> {
  // APIレスポンス
  return { name: null, age: undefined };
}

async function showUserProfile() {
  const userProfile = await fetchUserProfile();
  const userName = userProfile.name ?? 'ゲスト';
  const userAge = userProfile.age ?? '未設定';

  console.log(`ユーザー名: ${userName}, 年齢: ${userAge}`);
}

showUserProfile(); 
// 出力: ユーザー名: ゲスト, 年齢: 未設定

APIレスポンスに対して安全にデフォルト値を設定できることで、コード全体の堅牢性が向上し、ユーザー体験が途切れなくなります。

3. フォールバックの明確化

nullish coalescingを利用することで、nullやundefinedが発生した際のフォールバック（代替）値を明示的にコードに記述できます。これにより、プロジェクト全体で一貫したエラーハンドリングやフォールバック戦略を採用しやすくなります。

function getConnectionString(env?: string): string {
  return env ?? 'デフォルト接続文字列';
}

const connectionString = getConnectionString(process.env.DATABASE_URL);
console.log(`接続文字列: ${connectionString}`);

このように、環境変数や設定の不備に対して、安全かつ一貫したデフォルト値を提供することができます。

4. コードの簡潔化と可読性向上

nullish coalescingを使用することで、冗長なif文や複雑な条件式が不要になり、コードの可読性が向上します。特に大規模なコードベースでは、nullやundefinedをチェックするコードが繰り返されることが多いため、これを効率的に処理できるnullish coalescingは非常に便利です。

// 冗長な例
const name = user.name !== undefined && user.name !== null ? user.name : 'ゲスト';

// 簡潔な例
const name = user.name ?? 'ゲスト';

このように、条件付きの値設定をシンプルに記述できるため、開発者がコードを理解しやすくなり、バグのリスクも軽減されます。

5. テストコードの簡略化

nullish coalescingはテストコードでも威力を発揮します。特定のテストケースでnullやundefinedの状況を意図的にシミュレーションし、フォールバックロジックをテストすることが容易になります。

function getDiscount(price?: number): number {
  return price ?? 100; // デフォルトの割引額は100
}

// テストケース
console.log(getDiscount(200));  // 200
console.log(getDiscount(undefined)); // 100

このように、undefinedやnullのケースを明確に扱うことで、テストケースを整理しやすくなり、テストの網羅性も向上します。

まとめ

nullish coalescingは、TypeScriptプロジェクトにおいて多くの利便性を提供します。特に、大規模なプロジェクトでは、複雑なデータの処理や設定値の管理、APIレスポンスの処理など、多くの場面で役立ちます。コードの簡潔化や安全性向上に寄与し、堅牢なプロジェクトを構築するための重要なツールとなります。

演習問題：nullish coalescingの実践的な応用

ここでは、nullish coalescing（??）演算子の理解を深めるための演習問題を用意しました。これらの問題を通して、nullish coalescingの使い方や、その応用方法を実践的に学んでいきましょう。コードを実際に書きながら解いてみてください。

問題1: ユーザープロファイルの表示

次のユーザーオブジェクトがあり、name、age、cityが必須プロパティです。しかし、これらの値がnullまたはundefinedの場合は、デフォルト値を表示したいと考えています。nullish coalescingを使って、欠落したプロパティに対して適切なデフォルト値を設定してください。

const user = {
  name: null,
  age: undefined,
  city: "東京"
};

// 以下のコードを修正して、nameが'ゲスト'、ageが'不明'、cityがそのまま表示されるようにしてください。
const userName = user.name ?? 'ゲスト';
const userAge = user.age ?? '不明';
const userCity = user.city ?? '不明';

console.log(`名前: ${userName}, 年齢: ${userAge}, 都市: ${userCity}`);
// 出力: 名前: ゲスト, 年齢: 不明, 都市: 東京

問題2: APIレスポンスのデフォルト設定

APIから次のようなレスポンスが返されることを想定します。レスポンスのstatusとmessageプロパティがnullまたはundefinedの場合、デフォルトの"success"と"操作が完了しました"を表示するようにしてください。

const apiResponse = {
  status: undefined,
  message: null
};

// nullish coalescingを使ってデフォルト値を設定してください。
const status = apiResponse.status ?? 'success';
const message = apiResponse.message ?? '操作が完了しました';

console.log(`ステータス: ${status}, メッセージ: ${message}`);
// 出力: ステータス: success, メッセージ: 操作が完了しました

問題3: 設定オブジェクトの適用

アプリケーションの設定オブジェクトが次のように定義されています。設定オブジェクトにはdarkMode、language、autoSaveというプロパティがありますが、いずれもユーザーの設定によっては存在しない可能性があります。これらのプロパティが欠如している場合、デフォルトのfalse、'en'、trueを使用するようにしてください。

const appSettings = {
  darkMode: undefined,
  language: null,
  autoSave: undefined
};

// nullish coalescingを使ってデフォルト値を設定してください。
const darkMode = appSettings.darkMode ?? false;
const language = appSettings.language ?? 'en';
const autoSave = appSettings.autoSave ?? true;

console.log(`ダークモード: ${darkMode}, 言語: ${language}, 自動保存: ${autoSave}`);
// 出力: ダークモード: false, 言語: en, 自動保存: true

問題4: ネストされたオブジェクトのデフォルト設定

次のようにネストされた設定オブジェクトがあり、ユーザーのtheme設定が含まれています。しかし、ユーザーがtheme設定をしていない場合は、デフォルトの'light'テーマを使用します。nullish coalescingを使って、themeプロパティがnullまたはundefinedの場合にデフォルト値を適用してください。

const userSettings = {
  appearance: {
    theme: null
  }
};

// nullish coalescingを使ってデフォルト値を設定してください。
const theme = userSettings.appearance.theme ?? 'light';

console.log(`テーマ: ${theme}`);
// 出力: テーマ: light

問題5: オプショナルチェイニングとの組み合わせ

次に、オプショナルチェイニングとnullish coalescingを組み合わせた問題です。ユーザーオブジェクトに対して、profileやその中のbioが存在しない場合はデフォルトのプロフィール情報を表示するようにしてください。

const userProfile = {
  profile: null
};

// オプショナルチェイニングとnullish coalescingを使ってデフォルトのプロフィール情報を表示してください。
const bio = userProfile.profile?.bio ?? 'プロフィール情報がありません';

console.log(`バイオ: ${bio}`);
// 出力: バイオ: プロフィール情報がありません

まとめ

これらの演習問題を通して、nullish coalescingの基本的な使い方から、オプショナルチェイニングとの組み合わせまで幅広く学ぶことができました。これらの問題を解くことで、nullやundefinedを安全に扱うスキルを実践的に身につけられるでしょう。

まとめ

本記事では、TypeScriptにおけるnullish coalescing（??）の使い方について詳しく解説しました。この演算子は、nullやundefinedを効率的に処理し、デフォルト値を設定する場面で非常に有用です。また、論理OR演算子との違い、オプショナルチェイニングとの併用、実際の使用例や応用方法を通じて、nullish coalescingの強力さと利便性を学びました。大規模なTypeScriptプロジェクトでも、エラーを減らし、コードをシンプルかつ安全に保つために、この演算子を活用しましょう。