TypeScriptにおけるオプショナルチェーン

TypeScriptにおけるオプショナルチェーン

この記事ではTypeScriptにおけるオプショナルチェーンについて説明します。

YouTube Video

TypeScriptにおけるオプショナルチェーン

TypeScriptにおけるオプショナルチェーン(Optional Chaining)は、深いネストのオブジェクトや配列のプロパティにアクセスする際に便利な機能です。この機能により、存在しないプロパティにアクセスした際にエラーを防ぎ、簡潔で読みやすいコードを書くことができます。

オプショナルチェーンとは?

オプショナルチェーン(?.)は、オブジェクトのプロパティやメソッドにアクセスする際、プロパティが存在しない場合にundefinedを返す演算子です。これにより、プロパティが存在しないときにエラーをスローせずにコードの実行が続行されます。

例えば、以下のようにネストされたオブジェクトのプロパティにアクセスするとき、通常の方法ではプロパティが存在しない場合にエラーが発生します。

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined
  • この場合、addressが存在しないとエラーが発生します。これを防ぐためにオプショナルチェーンを使うことができます。

オプショナルチェーンを使った例

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined
  • オプショナルチェーンを使うことで、プロパティが存在しない場合でもエラーが発生せず、代わりにundefinedが返されます。

オプショナルチェーンの使い方

オプショナルチェーンは、プロパティアクセス、関数呼び出し、配列アクセスなど様々な場面で使用できます。それぞれの使い方について説明します。

プロパティへのアクセス

オブジェクトのネストされたプロパティに安全にアクセスできます。

 1interface Company {
 2    name: string;
 3    location?: {
 4        city?: string;
 5        country?: string;
 6    };
 7}
 8
 9const company: Company = {
10    name: 'Tech Corp',
11    location: {
12        city: 'New York'
13    }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined

このコードは、オプショナルチェーンを使って company オブジェクトの location プロパティが存在する場合に限り citycountry にアクセスしています。

関数呼び出し

オプショナルチェーンは、関数が存在するかをチェックした上で呼び出すこともできます。

 1interface User {
 2    name?: string;
 3    greet?: () => void;
 4}
 5
 6const user: User = {
 7    name: 'Bob',
 8    // greet is undefined
 9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs

このコードは、greet 関数が存在する場合にのみ実行するために、オプショナルチェーンを使って安全に関数を呼び出しています。関数が未定義でもエラーは発生しません。

配列アクセス

オプショナルチェーンは配列にも適用でき、要素が存在するかどうかを確認できます。

 1interface Team {
 2    members?: string[];
 3}
 4
 5const team: Team = {
 6    members: ['Alice', 'Bob', 'Charlie']
 7};
 8
 9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined

このコードは、team.members が存在する場合に限り配列要素へアクセスし、存在するインデックスではその値を、存在しないインデックスでは undefined を返しています。

オプショナルチェーンとNull合体演算子

オプショナルチェーンはundefinedを返しますが、それだけでは不十分な場合もあります。この場合、TypeScript 3.7で導入されたNull合体演算子??)を併用することで、nullundefinedに対してデフォルト値を設定できます。

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'

オプショナルチェーンと組み合わせて使うことで、さらに柔軟なコードが書けます。

1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

オプショナルチェーンを使う上での注意点

オプショナルチェーンを使う上で、次のような点に注意が必要です。

  • 不必要なオプショナルチェーン

    • 存在が確実なプロパティやメソッドに対してオプショナルチェーンを使用すると、かえってコードが冗長になります。アクセス先が不確実な場合に限り使用するのがベストです。
  • タイプミス

    • オプショナルチェーンを濫用すると、タイプミスによって意図せず誤ったプロパティにアクセスしていることに気づきにくくなることがあります。適切な型チェックを行い、慎重に使用しましょう。

コードまとめ

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice',
11    address: {
12        city: 'Tokyo'
13    }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

まとめ

TypeScriptにおけるオプショナルチェーンは、深いネストのオブジェクトや配列にアクセスする際に、エラーを避けつつ簡潔なコードを提供します。また、Null合体演算子と組み合わせることで、デフォルト値の設定を行い、さらに柔軟なロジックを構築できます。適切に使えば、コードの安全性と可読性を大幅に向上させることができます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video