オプションチェーン：nullやundefinedによるエラーを防ぐ

オプションチェーンと配列と関数

オプションチェーンは、JavaScriptとTypeScriptで導入された新しい演算子 (?. と ?.[]) で、プロパティやメソッドが存在しない場合でもエラーを発生させずに値を取得できる便利な機能です。

従来のコードでは、ネストされたオブジェクトのプロパティやメソッドにアクセスする場合、存在チェックが必要でした。

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

// 従来のコード
const city = user?.address?.city; // "Tokyo"

// 存在チェックが必要
if (user && user.address && user.address.city) {
  const city = user.address.city;
}

オプションチェーンを使うと、存在チェックを省略できます。

// オプションチェーン
const city = user?.address?.city; // "Tokyo"

// 存在チェック不要

配列とオプションチェーン

オプションチェーンは、配列にも使用できます。

const numbers = [1, 2, 3];

// 従来のコード
const lastNumber = numbers[numbers.length - 1]; // 3

// 存在チェックが必要
if (numbers.length > 0) {
  const lastNumber = numbers[numbers.length - 1];
}

// オプションチェーン
const lastNumber = numbers?.[numbers.length - 1]; // 3

// 存在チェック不要

関数とオプションチェーン

const user = {
  getName() {
    return "John Doe";
  },
};

// 従来のコード
const name = user?.getName(); // "John Doe"

// 存在チェックが必要
if (user && user.getName) {
  const name = user.getName();
}

// オプションチェーン
const name = user?.getName(); // "John Doe"

// 存在チェック不要

オプションチェーンを使うと、コードを簡潔に書けるだけでなく、nullやundefinedによるエラーを防ぐことができます。

オプションチェーンは、存在チェックを省略できる便利な機能ですが、以下の点に注意する必要があります。

• 存在チェックが必要な場合も、オプションチェーンを使うと意図せずエラーを抑制してしまう可能性があります。
• オプションチェーンは、ネストされたオブジェクトや配列の深い階層にアクセスする場合、コードの見づらくなる可能性があります。

オプションチェーンは、JavaScriptとTypeScriptで配列と関数を操作する際に便利な機能です。コードを簡潔に書けるだけでなく、nullやundefinedによるエラーを防ぐことができます。ただし、注意点も理解した上で使用する必要があります。

オプションチェーンを使って、ネストされたオブジェクトのプロパティにアクセスする

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

// 従来のコード
const city = user?.address?.city; // "Tokyo"

// 存在チェックが必要
if (user && user.address && user.address.city) {
  const city = user.address.city;
}

// オプションチェーン
const city = user?.address?.city; // "Tokyo"

// 存在チェック不要

オプションチェーンを使って、配列の最後の要素を取得する

const numbers = [1, 2, 3];

// 従来のコード
const lastNumber = numbers[numbers.length - 1]; // 3

// 存在チェックが必要
if (numbers.length > 0) {
  const lastNumber = numbers[numbers.length - 1];
}

// オプションチェーン
const lastNumber = numbers?.[numbers.length - 1]; // 3

// 存在チェック不要

オプションチェーンを使って、関数を呼び出す

const user = {
  getName() {
    return "John Doe";
  },
};

// 従来のコード
const name = user?.getName(); // "John Doe"

// 存在チェックが必要
if (user && user.getName) {
  const name = user.getName();
}

// オプションチェーン
const name = user?.getName(); // "John Doe"

// 存在チェック不要

オプションチェーンを使って、nullやundefinedによるエラーを防ぐ

const user = null;

// 従来のコード
const name = user.getName(); // TypeError: Cannot read property 'getName' of null

// オプションチェーン
const name = user?.getName(); // undefined

// エラーが発生しない

従来のコード

オプションチェーンを使う前に、JavaScriptで長年使用されてきた従来のコードを見てみましょう。

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

// 従来のコード
const city = user.address ? user.address.city : undefined;

// 存在チェックが必要
if (user && user.address && user.address.city) {
  const city = user.address.city;
}

このコードは、user.address や user.address.city が存在しない場合、undefined を返します。

エラーハンドリング

オプションチェーンを使わずにエラーハンドリングを行う方法もあります。

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

try {
  const city = user.address.city;
  // ...
} catch (error) {
  // エラー処理
}

null 許容演算子 (??) を使って、デフォルト値を設定することもできます。

const user = {
  address: {
    city: null,
  },
};

// null 許容演算子
const city = user.address?.city ?? "Unknown City"; // "Unknown City"

// デフォルト値を設定

このコードは、user.address.city が null または undefined の場合、デフォルト値 "Unknown City" を返します。

オプションチェーンは便利な機能ですが、必ずしも必要ではありません。コードの規模や複雑性、好みなどに合わせて、適切な方法を選択してください。