TypeScriptのオプショナルチェイニング（?.）の基本と応用

TypeScriptのオプショナルチェイニング（?.）は、コードの安全性と可読性を高めるための強力な機能です。従来、オブジェクトのプロパティやメソッドにアクセスする際、対象がnullやundefinedでないことを確認するために、複数の条件分岐が必要でした。しかし、オプショナルチェイニングを利用することで、これらの確認を簡単に行うことができ、コードがすっきりと読みやすくなります。

本記事では、TypeScriptにおけるオプショナルチェイニングの基本的な使い方から、より高度な応用例までを網羅的に解説し、具体的なコード例を通して、実際にどのように活用できるのかを学びます。

オプショナルチェイニングとは

オプショナルチェイニング（?.）は、JavaScriptとTypeScriptにおける新しい演算子で、nullやundefinedであるかどうかを簡単に確認しつつ、オブジェクトのプロパティやメソッドにアクセスできる機能です。通常、オブジェクトが存在しない場合にアクセスしようとするとエラーが発生しますが、オプショナルチェイニングを使用することで、エラーを回避し、安全にアクセスを試みることができます。

具体的には、オブジェクトがnullやundefinedの場合に、そのプロパティやメソッドへのアクセスが無効とみなされ、エラーをスローせずにundefinedを返します。これにより、長い条件分岐を避けながら、エレガントにネストされたオブジェクトのプロパティやメソッドにアクセスすることが可能となります。

オプショナルチェイニングの基本構文

オプショナルチェイニングの基本構文は非常にシンプルで、オブジェクトのプロパティやメソッドにアクセスする際に、通常のドット演算子 (.) の代わりに ?. を使います。以下に、基本的な使い方を紹介します。

プロパティへのアクセス

通常、ネストされたオブジェクトのプロパティにアクセスする際、オブジェクトが存在するか確認しなければなりません。以下の例では、user オブジェクトが存在しない場合、アクセス時にエラーが発生します。

const user = null;
console.log(user.address.street); // TypeError: Cannot read property 'street' of null

オプショナルチェイニングを使用することで、このようなエラーを防ぎます。

const user = null;
console.log(user?.address?.street); // undefined

このように、?. を使うことで、user や address が null または undefined であってもエラーにならず、代わりに undefined が返されます。

メソッドへのアクセス

同様に、メソッドを呼び出す際にもオプショナルチェイニングを利用できます。以下の例では、getUserName メソッドが存在する場合のみ呼び出されます。

const user = {
  getUserName: () => "John Doe"
};

console.log(user?.getUserName?.()); // "John Doe"

もし getUserName が存在しなければ、エラーは発生せず、undefined が返されます。

const user = {};
console.log(user?.getUserName?.()); // undefined

オプショナルチェイニングを使うことで、null や undefined を考慮した安全なコードを書くことができ、エラーチェックのための冗長な条件分岐を省略することが可能です。

`undefined`や`null`への安全なアクセス

オプショナルチェイニングの最も大きな利点の1つは、undefinedやnullに対する安全なアクセスを保証する点です。従来のJavaScriptやTypeScriptでは、オブジェクトのプロパティにアクセスする際、オブジェクトやそのプロパティがundefinedまたはnullであるかをチェックするために、冗長なコードを書く必要がありました。

従来の方法での`null`チェック

以下のように、ネストされたオブジェクトにアクセスする際、各レベルでnullやundefinedを確認しなければならないことがよくあります。

const user = {
  address: null
};

// 従来のチェック方法
if (user && user.address && user.address.street) {
  console.log(user.address.street);
} else {
  console.log("Street not found");
}

このコードでは、userやaddressがnullまたはundefinedかどうかを確認しながら、最終的にstreetにアクセスしていますが、条件が長く複雑になりがちです。

オプショナルチェイニングを使った簡潔な書き方

オプショナルチェイニングを使うことで、上記のチェックを1行で簡潔に記述できます。

const user = {
  address: null
};

console.log(user?.address?.street ?? "Street not found");

このコードでは、userやaddressがnullまたはundefinedであれば、streetのアクセスをせずにundefinedを返し、nullish coalescing（??）演算子を使うことで、undefinedの場合にデフォルトメッセージを表示しています。これにより、コードが非常にシンプルかつ安全になります。

配列へのアクセス

オプショナルチェイニングは、配列要素へのアクセスにも役立ちます。以下のように、配列がnullやundefinedの場合でも安全に要素にアクセスできます。

const users = null;

console.log(users?.[0]?.name ?? "User not found"); // "User not found"

配列がnullまたはundefinedであっても、エラーが発生せずにデフォルトの値を返すことができます。これにより、undefinedやnullに関する煩わしいエラーハンドリングが大幅に簡略化されます。

オプショナルチェイニングは、特に大規模で複雑なオブジェクト構造やAPIレスポンスを扱う際に非常に役立ち、安全でエラーの少ないコードを書くことができる強力なツールです。

ネストされたオブジェクトへのアクセス

オプショナルチェイニングの真価は、ネストされたオブジェクトにアクセスする際に発揮されます。複雑なオブジェクト構造や深くネストされたプロパティにアクセスする場合、各レベルでnullやundefinedをチェックする必要があるため、通常の書き方ではコードが長くなり、管理が難しくなります。しかし、オプショナルチェイニングを使うと、これらのチェックを簡潔に行うことができます。

従来のネストされたオブジェクトへのアクセス

ネストされたオブジェクトにアクセスする場合、次のように複数の条件分岐を使う必要がありました。

const user = {
  profile: {
    address: {
      city: "Tokyo"
    }
  }
};

// 従来の書き方
if (user && user.profile && user.profile.address) {
  console.log(user.profile.address.city);
} else {
  console.log("City not found");
}

このような書き方では、各プロパティが存在するかを確認するために、条件分岐がどんどん増えていき、コードが読みにくくなります。

オプショナルチェイニングを使ったネストされたアクセス

オプショナルチェイニングを使用することで、複雑なオブジェクト構造へのアクセスが驚くほど簡潔に記述できます。

const user = {
  profile: {
    address: {
      city: "Tokyo"
    }
  }
};

console.log(user?.profile?.address?.city ?? "City not found");

このコードでは、user、profile、addressのどれかがnullまたはundefinedであっても、エラーは発生せず、代わりにundefinedが返されます。そして、nullish coalescing（??）を使用して、値が存在しない場合にデフォルトメッセージを表示できます。

より複雑なネスト構造への適用例

さらに複雑な構造でも、オプショナルチェイニングを利用すると、シンプルかつ読みやすいコードが実現します。例えば、APIから返されるデータが以下のようにネストされているとします。

const apiResponse = {
  data: {
    user: {
      settings: {
        notifications: {
          email: true
        }
      }
    }
  }
};

// オプショナルチェイニングの適用
const emailNotifications = apiResponse?.data?.user?.settings?.notifications?.email ?? false;

console.log(emailNotifications); // true

ここでは、apiResponseやその内部のプロパティが存在しない場合にエラーを防ぎ、デフォルトでfalseを返すようになっています。

オプショナルチェイニングを使うことで、ネストされたオブジェクト構造を扱う際に、コードがすっきりとし、エラーチェックのための複雑なロジックを避けることができ、コードの可読性と保守性が向上します。

関数呼び出しとオプショナルチェイニング

オプショナルチェイニングは、オブジェクトのプロパティへのアクセスだけでなく、関数の呼び出しにおいても非常に便利です。通常、オブジェクトに定義されているメソッドを呼び出す際、そのメソッドが存在しない場合はエラーが発生します。しかし、オプショナルチェイニングを使用すると、メソッドが存在しない場合でも安全に呼び出しを行い、エラーを防ぐことができます。

従来の関数呼び出しの安全チェック

関数を呼び出す際、まずその関数が存在するかどうかを確認する必要があります。以下のようなコードが典型的です。

const user = {
  getName: () => "John Doe"
};

// メソッドが存在するかを確認してから呼び出す
if (user && typeof user.getName === "function") {
  console.log(user.getName());
} else {
  console.log("Method not available");
}

この方法では、関数が存在しない場合に備えて冗長なチェックを行わなければなりません。

オプショナルチェイニングを使った関数呼び出し

オプショナルチェイニングを使えば、関数が存在しない場合でもエラーが発生しないようにしつつ、簡潔に記述することができます。

const user = {
  getName: () => "John Doe"
};

// オプショナルチェイニングを使って安全に関数を呼び出す
console.log(user?.getName?.() ?? "Method not available"); // "John Doe"

このコードでは、user?.getName?.() とすることで、userオブジェクトやgetNameメソッドがnullやundefinedであるかどうかを確認し、存在する場合にのみ関数を呼び出します。もしuserやgetNameが存在しない場合は、エラーではなくundefinedが返され、??演算子を使ってデフォルトメッセージを表示します。

存在しないメソッドの呼び出し

次に、getNameメソッドが存在しない場合の例を見てみましょう。

const user = {};

// オプショナルチェイニングを使った場合
console.log(user?.getName?.() ?? "Method not available"); // "Method not available"

この場合、userオブジェクトにはgetNameメソッドが存在しませんが、オプショナルチェイニングを使っているため、エラーは発生せず、デフォルトのメッセージが表示されます。

関数の引数を伴う呼び出し

オプショナルチェイニングは、引数を伴う関数呼び出しにも適用できます。たとえば、以下のように引数を渡して関数を呼び出す場合も同様です。

const user = {
  greet: (name: string) => `Hello, ${name}`
};

// オプショナルチェイニングで引数を伴う関数を呼び出す
console.log(user?.greet?.("Alice") ?? "Greet method not available"); // "Hello, Alice"

このように、関数が存在しない場合でもエラーを回避しつつ、簡潔に関数呼び出しを行うことができ、実際のコードでの安全性が大幅に向上します。

オプショナルチェイニングを使えば、関数が存在するかどうかを気にすることなく、エレガントかつ効率的に関数を呼び出すことができるため、コードが非常にシンプルになります。

オプショナルチェイニングと他の演算子との併用

オプショナルチェイニング（?.）は、他の演算子と組み合わせて使用することで、さらに強力なコードを書くことができます。特に、論理演算子やNullish Coalescing演算子（??）と併用することで、コードの柔軟性と安全性が向上します。ここでは、オプショナルチェイニングと他の演算子を組み合わせる方法をいくつか紹介します。

オプショナルチェイニングと論理演算子（`&&`）

オプショナルチェイニングと論理AND演算子（&&）を組み合わせると、特定のプロパティやメソッドが存在する場合にのみ、次の処理を実行する条件付きロジックを簡潔に書けます。

const user = {
  profile: {
    settings: {
      notificationsEnabled: true
    }
  }
};

// 通常の論理AND演算子によるチェック
const notificationsEnabled = user?.profile?.settings?.notificationsEnabled && "Notifications are enabled";

console.log(notificationsEnabled); // "Notifications are enabled"

この例では、notificationsEnabledがtrueである場合のみ、"Notifications are enabled"というメッセージが表示されます。オプショナルチェイニングによって、途中のオブジェクトがnullやundefinedであってもエラーを回避しつつ、論理演算を行うことが可能です。

オプショナルチェイニングとNullish Coalescing（`??`）

Nullish Coalescing（??）は、nullまたはundefinedの場合にデフォルト値を提供する演算子です。オプショナルチェイニングと組み合わせることで、特定のプロパティが存在しない場合に代替値を返すコードをシンプルに記述できます。

const user = {
  profile: null
};

// オプショナルチェイニングとNullish Coalescingの併用
const profileName = user?.profile?.name ?? "Default Name";

console.log(profileName); // "Default Name"

この例では、user.profileやuser.profile.nameがnullまたはundefinedであった場合に、"Default Name"が返されます。??を併用することで、nullやundefinedが発生しても安全にデフォルト値を設定することができます。

オプショナルチェイニングと三項演算子

オプショナルチェイニングは、三項演算子（condition ? trueValue : falseValue）とも組み合わせて使えます。これにより、特定のプロパティが存在するかどうかに基づいて、別々の値を返すロジックを簡潔に実装できます。

const user = {
  profile: {
    age: 25
  }
};

// オプショナルチェイニングと三項演算子の併用
const ageMessage = user?.profile?.age ? `User is ${user.profile.age} years old` : "Age is not available";

console.log(ageMessage); // "User is 25 years old"

このコードでは、user.profile.ageが存在すればその年齢を返し、存在しなければ "Age is not available" というメッセージが表示されます。オプショナルチェイニングによって、ageが存在するかを確認しながら、三項演算子で条件分岐を行います。

オプショナルチェイニングとデフォルトパラメータ

関数の引数に対してオプショナルチェイニングを使用することも可能です。これにより、引数がundefinedまたはnullである場合、デフォルト値を使って処理を続けることができます。

function greet(user?: { name?: string }) {
  const userName = user?.name ?? "Guest";
  console.log(`Hello, ${userName}!`);
}

greet(); // "Hello, Guest!"
greet({ name: "Alice" }); // "Hello, Alice!"

このように、userやuser.nameが存在しない場合でも、オプショナルチェイニングと??を組み合わせることで、エラーを防ぎつつデフォルト値を指定できます。

まとめ

オプショナルチェイニングは、他の演算子と組み合わせることで、より柔軟かつ安全なコードを書くことができます。論理AND演算子やNullish Coalescing、三項演算子と併用することで、エラーチェックやデフォルト値の設定が簡単になり、複雑なロジックを簡潔に実装できるため、より可読性の高いコードが実現します。

オプショナルチェイニングの実用例

オプショナルチェイニングは、TypeScriptやJavaScriptのコードベースで頻繁に利用されるシーンが数多くあります。特に、APIからのレスポンスや外部サービスからのデータが不確定である場合、オプショナルチェイニングを活用することで、エラーを防ぎ、柔軟にデータを扱うことができます。ここでは、実際のプロジェクトでオプショナルチェイニングがどのように役立つか、具体的な例を紹介します。

APIレスポンスデータの安全なアクセス

フロントエンド開発では、サーバーからのAPIレスポンスが必ずしも期待通りの形式で返ってくるとは限りません。時には、プロパティがnullやundefinedになっている場合もあります。オプショナルチェイニングを使えば、このようなケースでも安全にデータを処理することができます。

const apiResponse = {
  user: {
    profile: null // プロファイル情報が存在しない場合
  }
};

// オプショナルチェイニングを使った安全なデータアクセス
const userProfile = apiResponse?.user?.profile?.name ?? "プロフィールが存在しません";

console.log(userProfile); // "プロフィールが存在しません"

この例では、apiResponse.user.profile.nameがnullである場合でも、エラーが発生せず、代わりにデフォルトメッセージが表示されます。APIレスポンスの形式が予期しないものでも、オプショナルチェイニングを使うことでエラーハンドリングが容易になります。

ユーザー設定の読み込み

大規模なアプリケーションでは、ユーザーの設定データが複数のネストされたプロパティを持つことがよくあります。しかし、すべての設定が常に存在するとは限りません。このような場合、オプショナルチェイニングは設定データの安全な読み込みに役立ちます。

const userSettings = {
  notifications: {
    email: {
      enabled: true
    }
  }
};

// 設定データを安全に読み込む
const emailNotificationsEnabled = userSettings?.notifications?.email?.enabled ?? false;

console.log(emailNotificationsEnabled); // true

このコードでは、notifications.email.enabledが存在しない場合、エラーではなくfalseを返すように設定しています。設定データが部分的にしか提供されない場合にも、オプショナルチェイニングは安全なアクセスを保証します。

フォームデータの取り扱い

フォームからのデータ入力も、全ての項目が入力されるとは限りません。ユーザーが一部の項目を空白のまま送信した場合、そのプロパティが存在しないことが原因でエラーが発生する可能性があります。オプショナルチェイニングを利用することで、これらの不完全なデータにも安全にアクセスできます。

const formData = {
  contact: {
    email: null // ユーザーがメールアドレスを入力しなかった場合
  }
};

// メールアドレスを安全に取り扱う
const emailAddress = formData?.contact?.email ?? "メールアドレスが未入力です";

console.log(emailAddress); // "メールアドレスが未入力です"

この例では、メールアドレスが入力されていない場合、nullを返すのではなく、デフォルトメッセージを表示することで、アプリケーションがエラーなく動作します。

ユーザー操作の条件付き実行

時には、ユーザーが特定のアクションを実行したかどうかに応じて処理を行う必要があります。オプショナルチェイニングを使うと、オブジェクトやメソッドが存在するかどうかを確認しつつ、条件付きで処理を行うことができます。

const userActions = {
  save: () => console.log("保存しました")
};

// 存在する場合のみ関数を呼び出す
userActions?.save?.(); // "保存しました"

この例では、saveメソッドが存在する場合にのみ関数が呼び出されます。存在しない場合でもエラーが発生せず、安全に次の処理を実行できます。

データ解析や処理ロジックにおける使用

例えば、データ解析やログ処理の際、存在するデータだけを処理したい場合にも、オプショナルチェイニングは非常に有用です。データが欠落している部分をエラーなくスキップでき、効率的に処理を進められます。

const logs = {
  error: {
    message: "システムエラー"
  }
};

// エラーメッセージがある場合のみ表示
const errorMessage = logs?.error?.message ?? "エラーは発生していません";

console.log(errorMessage); // "システムエラー"

このように、オプショナルチェイニングは実際のプロジェクトにおける不確定要素を安全に処理し、コードを簡潔に保ちながら予期しないエラーを回避する強力なツールです。特に、外部からのデータや動的に変わるデータ構造を扱う際にその真価を発揮します。

エラーハンドリングとの連携

オプショナルチェイニングは、エラーハンドリングにおいても大変有効です。特に、nullやundefinedが原因で発生するエラーを未然に防ぐことで、より堅牢なアプリケーションを作ることができます。また、オプショナルチェイニングは、他のエラーハンドリングメカニズムと連携することで、効果的なエラーハンドリングのフローを実現します。

従来のエラーハンドリング

オプショナルチェイニングが導入される前は、オブジェクトや関数がnullやundefinedであるかをチェックし、その存在を確認する冗長なコードが必要でした。たとえば、次のような例です。

const user = {
  profile: null
};

// エラーハンドリングを伴うチェック
if (user && user.profile && user.profile.name) {
  console.log(user.profile.name);
} else {
  console.error("ユーザープロファイルが見つかりません");
}

このコードは、nullやundefinedが原因でアクセスエラーが発生しないように事前に確認を行いますが、複数のチェックが必要で冗長です。

オプショナルチェイニングを使ったエラーハンドリングの改善

オプショナルチェイニングを使うことで、上記の冗長なエラーハンドリングを大幅に簡略化できます。nullやundefinedが発生してもエラーをスローせず、安全にundefinedを返します。これにより、コードの可読性が向上し、意図したエラー処理がシンプルに記述できるようになります。

const user = {
  profile: null
};

// オプショナルチェイニングを使ったシンプルなエラーハンドリング
const userName = user?.profile?.name ?? "ユーザープロファイルが見つかりません";
console.log(userName);

このコードでは、プロパティが存在しない場合でもエラーを発生させることなく処理が進行し、??演算子でデフォルトのエラーメッセージを表示しています。エラーハンドリングのロジックがシンプルかつ直感的です。

関数呼び出し時のエラーハンドリング

関数呼び出しにおいても、オプショナルチェイニングを活用することで、存在しないメソッドに対する呼び出しを安全に処理できます。以下の例では、関数が存在しない場合でもエラーハンドリングを容易に行えます。

const api = {
  fetchData: null // APIが未定義の場合
};

// 関数が存在するかを確認しつつ安全に呼び出す
const result = api?.fetchData?.() ?? "データを取得できません";
console.log(result); // "データを取得できません"

ここでは、fetchData関数が存在しない場合にエラーをスローする代わりに、undefinedを返し、デフォルトメッセージを表示します。これにより、不要なエラーハンドリングのための冗長なコードが不要となり、実行時の安全性が高まります。

Try-Catchとの併用

場合によっては、try-catch構文を使ったエラーハンドリングとオプショナルチェイニングを組み合わせることで、さらに強力なエラーハンドリングが可能です。たとえば、APIレスポンスを解析し、例外が発生する場合にはキャッチしつつ、オプショナルチェイニングで安全にデータにアクセスするケースです。

const apiResponse = null;

try {
  const userName = apiResponse?.user?.name ?? "ユーザーが見つかりません";
  console.log(userName);
} catch (error) {
  console.error("予期せぬエラーが発生しました", error);
}

このように、オプショナルチェイニングはAPIレスポンスがnullである場合にエラーを防ぎ、安全にundefinedを返しつつ、try-catchで予期せぬエラーに対処する構造を簡潔に作れます。

外部ライブラリとの連携

外部ライブラリを使用する際、ライブラリが返すデータ構造が不確定であることがあります。オプショナルチェイニングを使えば、ライブラリのオブジェクトやプロパティに安全にアクセスできます。

import { getUser } from 'external-library'; 

const user = getUser();

// 外部ライブラリのデータを安全に扱う
const email = user?.profile?.email ?? "メールアドレスが見つかりません";
console.log(email);

この例では、外部ライブラリが返すデータがnullやundefinedであっても、エラーをスローせずにデフォルトのメッセージを表示できます。

まとめ

オプショナルチェイニングを利用することで、エラーハンドリングのコードが大幅に簡素化されます。nullやundefinedによるエラーを未然に防ぎつつ、try-catchや??演算子との連携によって、より堅牢で安全なコードを書くことが可能です。

TypeScript 3.7でのオプショナルチェイニングの導入背景

オプショナルチェイニング（?.）は、TypeScript 3.7で導入された機能で、これによってコードの可読性や保守性が大幅に向上しました。この機能は、JavaScriptコミュニティやTypeScript開発者から長く求められていたものであり、コードの簡略化と安全なアクセス方法が重要視された結果として追加されました。ここでは、オプショナルチェイニングが導入された背景とその目的について説明します。

従来の課題：冗長な`null`チェック

TypeScriptのオプショナルチェイニングが導入される前、開発者はオブジェクトのプロパティやメソッドにアクセスするたびに、nullやundefinedの確認を行う必要がありました。これにより、コードが非常に冗長で、可読性が低下する原因となっていました。

たとえば、ネストされたオブジェクトにアクセスする際のコードは次のようになります。

const user = {
  profile: {
    address: null
  }
};

// `null`や`undefined`のチェックが冗長
if (user && user.profile && user.profile.address) {
  console.log(user.profile.address.city);
} else {
  console.log("住所情報がありません");
}

このように、ネストされたプロパティにアクセスするたびに、存在確認のための複数の条件分岐が必要でした。これがコードの複雑化やバグの原因となっていたのです。

オプショナルチェイニングの誕生：コードのシンプル化

オプショナルチェイニングの導入によって、上記の冗長なnullチェックが劇的に簡略化されました。以下のように、コードは非常にシンプルで直感的なものに変わります。

const user = {
  profile: {
    address: null
  }
};

// オプショナルチェイニングを使って簡略化
const city = user?.profile?.address?.city ?? "住所情報がありません";
console.log(city); // "住所情報がありません"

オプショナルチェイニングによって、ネストされたオブジェクトにアクセスする際に必要なnullチェックが自動的に行われるため、コードの冗長さが解消され、可読性と保守性が向上しました。これにより、開発者はより安全でエレガントなコードを記述できるようになりました。

TypeScript 3.7の他の改善とともに導入された理由

TypeScript 3.7は、オプショナルチェイニング以外にも、Nullish Coalescing（??）やアサーション関数など、より強力な型安全性や柔軟性を提供する機能を導入しました。これらの機能は、開発者がエラーの少ないコードを書けるようにすることを目的としており、オプショナルチェイニングもその一環として追加されました。

特に、大規模なアプリケーションや複雑なオブジェクト構造を扱う場面で、オプショナルチェイニングは多くの冗長なチェックやバグを防ぎ、開発効率を高めます。

JavaScriptへの波及効果

TypeScriptのオプショナルチェイニングが成功を収めたことで、この機能はJavaScriptにも波及しました。ECMAScriptの提案（ES11/ES2020）として正式に採用され、JavaScript自体でもオプショナルチェイニングがサポートされるようになりました。これにより、TypeScriptだけでなく、純粋なJavaScriptでも同様に安全なプロパティアクセスが可能となり、開発者コミュニティに広く受け入れられています。

導入された背景のまとめ

オプショナルチェイニングが導入された背景には、次のような課題がありました：

• 冗長なnullやundefinedのチェックが頻発し、コードが複雑化していた。
• 大規模なコードベースでのネストされたオブジェクトへの安全なアクセスが困難だった。
• 開発者の生産性を向上させ、エラーハンドリングをシンプルにする必要があった。

オプショナルチェイニングは、これらの課題を解決するためにTypeScript 3.7で導入され、さらにJavaScript全体にも広がることで、コードの可読性と安全性を飛躍的に向上させました。

演習問題：オプショナルチェイニングを使ったコード

ここでは、オプショナルチェイニングの理解を深めるための演習問題を用意しました。これらの問題を通じて、オプショナルチェイニングを実際にどのように使うかを練習し、実用的なシナリオに適応できるようにしましょう。

問題1: APIレスポンスの安全な処理

以下のAPIレスポンスを安全に処理し、usernameが存在する場合はその名前を、存在しない場合は "ユーザー名が見つかりません" と表示するコードを書いてください。

const apiResponse = {
  data: {
    user: {
      profile: {
        username: "Alice"
      }
    }
  }
};

// ここにコードを書いてください
const username = apiResponse?.data?.user?.profile?.username ?? "ユーザー名が見つかりません";
console.log(username);

答え：
上記のコードでは、apiResponse?.data?.user?.profile?.username でオプショナルチェイニングを使い、各プロパティが存在するかどうかをチェックしています。存在しない場合には、デフォルトのメッセージ "ユーザー名が見つかりません" が表示されます。

問題2: ネストされたオブジェクトへの安全なアクセス

次のようなネストされたオブジェクトがあります。user.address.cityにアクセスして、都市名が存在する場合はその名前を表示し、存在しない場合は "都市名がありません" と表示するコードを書いてください。

const user = {
  name: "John",
  address: null
};

// ここにコードを書いてください
const city = user?.address?.city ?? "都市名がありません";
console.log(city);

答え：
オプショナルチェイニングを使い、user?.address?.city と書くことで、addressがnullでもエラーを発生させずに安全にアクセスできます。結果として、cityが存在しない場合には "都市名がありません" が表示されます。

問題3: 存在しないメソッドの呼び出し

次のオブジェクトには、getEmailメソッドが存在するかもしれません。存在する場合はそのメソッドを呼び出し、メールアドレスを表示し、存在しない場合は "メールアドレスが見つかりません" と表示するコードを書いてください。

const contact = {
  getEmail: null
};

// ここにコードを書いてください
const email = contact?.getEmail?.() ?? "メールアドレスが見つかりません";
console.log(email);

答え：
contact?.getEmail?.() とオプショナルチェイニングを使うことで、getEmailがnullであっても関数呼び出しが安全に行われ、デフォルトのメッセージ "メールアドレスが見つかりません" が表示されます。

問題4: 配列へのオプショナルチェイニングの適用

次の配列データがあります。配列の最初の要素のnameプロパティにアクセスし、存在しない場合は "名前が見つかりません" と表示するコードを書いてください。

const users = [
  { name: "Bob" },
  null
];

// ここにコードを書いてください
const firstUserName = users?.[0]?.name ?? "名前が見つかりません";
console.log(firstUserName);

答え：
users?.[0]?.name で配列の最初の要素のnameにアクセスしています。もし要素が存在しない場合や、nameプロパティが存在しない場合には、"名前が見つかりません" と表示されます。

問題5: 関数の引数にオプショナルチェイニングを使用

次のgreet関数は、ユーザーオブジェクトのnameプロパティに基づいて挨拶を表示しますが、nameがない場合は "ゲスト" として扱います。関数の引数として渡されたオブジェクトにオプショナルチェイニングを使って、適切なメッセージを表示するコードを書いてください。

function greet(user?: { name?: string }) {
  // ここにコードを書いてください
  const userName = user?.name ?? "ゲスト";
  console.log(`こんにちは、${userName}さん！`);
}

// 実行例
greet(); // こんにちは、ゲストさん！
greet({ name: "Alice" }); // こんにちは、Aliceさん！

答え：
user?.name ?? "ゲスト" でオプショナルチェイニングを使い、userやnameがnullまたはundefinedの場合には "ゲスト" を表示します。結果として、greet() が呼び出されたときに、ユーザー名が存在すればその名前が、なければ "ゲスト" と表示されます。

まとめ

これらの演習問題を通して、オプショナルチェイニングの基本的な使い方と、その強力さを理解できたと思います。オプショナルチェイニングは、nullやundefinedが含まれる可能性があるデータに対して安全にアクセスできる方法を提供し、コードの可読性と保守性を大きく向上させます。

まとめ

TypeScriptのオプショナルチェイニング（?.）は、nullやundefinedによるエラーを未然に防ぎ、ネストされたオブジェクトや関数の安全なアクセスを可能にする非常に便利な機能です。本記事では、その基本構文から、実際のプロジェクトでの使用例、他の演算子との組み合わせ、エラーハンドリングとの連携、さらには演習問題を通して具体的な使い方を学びました。

オプショナルチェイニングを活用することで、コードがよりシンプルで読みやすくなり、冗長なチェックが不要となり、開発効率を向上させます。これを適切に利用することで、安全で保守性の高いコードを書くことができるでしょう。