TypeScriptで配列要素のundefined値を安全に扱う：オプション型、nullish coalescing演算子、ガード付き型アサーションの使い分け

2024-05-23

TypeScriptにおける配列要素へのアクセスと潜在的なundefined値の問題

TypeScriptは、静的型付け言語であるため、コンパイル時に型の整合性をチェックし、潜在的なエラーを防ぐことができます。しかし、配列要素へのアクセスに関しては、意図せぬundefined値による問題が発生する可能性があります。

問題点

TypeScriptの配列は、0から始まるインデックスを使って要素にアクセスできます。例えば、以下のようなコードで配列の最初の要素を取得します。

const numbers: number[] = [1, 2, 3];
const firstNumber = numbers[0];

しかし、このコードは一見問題ないように見えても、実は潜在的な問題を抱えています。それは、numbers 配列が空の場合、numbers[0] は undefined になる可能性があるということです。

コンパイルエラーにならない理由

TypeScriptは、静的型付け言語であるにもかかわらず、このコードでコンパイルエラーを出力しません。なぜなら、コンパイラはnumbers が配列型であることしか確認できず、その配列が空かどうかまでは確認できないからです。

ランタイムエラーの可能性

そのため、このコードを実行すると、numbers が空の場合にランタイムエラーが発生する可能性があります。これは、undefined 値を数値型変数 firstNumber に代入しようとしているためです。

解決策

この問題を解決するには、以下のいずれかの方法で、配列要素にアクセスする前に、その要素が undefined でないことを確認する必要があります。

if 文を使用する

最も単純な方法は、if 文を使用して、配列要素が undefined でないかどうかをチェックすることです。

const numbers: number[] = [1, 2, 3];

if (numbers[0] !== undefined) {
  const firstNumber = numbers[0];
  // firstNumber は number 型であることが保証される
} else {
  // numbers[0] は undefined である
}

オプション型を使用する

TypeScript 4.0以降では、オプション型を使用して、配列要素が undefined である可能性を明示的に表現できます。

const numbers: number[] | undefined = [1, 2, 3];
const firstNumber = numbers[0]; // firstNumber は number | undefined 型である

この場合、firstNumber は number または undefined のいずれかの値となります。そのため、firstNumber を使用する前に、undefined チェックを行う必要があります。

nullish coalescing演算子を使用する

TypeScript 3.8以降では、nullish coalescing演算子 (??) を使用して、undefined または null の値をデフォルト値に置き換えることができます。

const numbers: number[] | undefined = [1, 2, 3];
const firstNumber = numbers[0] ?? 0; // firstNumber は number 型である

この場合、numbers[0] が undefined または null の場合は、firstNumber は 0 に設定されます。

TypeScriptにおける配列要素へのアクセスは、undefined 値の可能性を考慮する必要があります。上記で紹介した解決策を参考に、適切な方法で配列要素にアクセスするようにしましょう。

補足

上記の例では、配列の最初の要素 (numbers[0]) を使用していますが、他のインデックスについても同様の問題が発生する可能性があります。
TypeScriptには、Array.prototype.at() や Array.prototype.optionalAt() などの便利なメソッドも用意されています。これらのメソッドは、インデックス範囲外のアクセスを検出してエラーをスローしたり、undefined を返したりすることができます。

TypeScriptにおける配列要素へのアクセスと潜在的なundefined値の問題：サンプルコード

このサンプルコードでは、TypeScriptにおける配列要素へのアクセスと潜在的なundefined値の問題を、具体的なコード例を用いて説明します。

例1：if 文を使用した解決策

const numbers: number[] = [1, 2, 3];

if (numbers[0] !== undefined) {
  const firstNumber = numbers[0];
  console.log(firstNumber); // 1が出力される
} else {
  console.log('numbers[0] is undefined');
}

例2：オプション型を使用した解決策

const numbers: number[] | undefined = [1, 2, 3];
const firstNumber = numbers[0];

if (firstNumber !== undefined) {
  console.log(firstNumber); // 1が出力される
} else {
  console.log('firstNumber is undefined');
}

const numbers: number[] | undefined = [1, 2, 3];
const firstNumber = numbers[0] ?? 0;
console.log(firstNumber); // 1が出力される

例4：Array.prototype.at() メソッドの使用

const numbers: number[] = [1, 2, 3];
const firstNumber = numbers.at(0); // firstNumber は number 型である

if (firstNumber !== undefined) {
  console.log(firstNumber); // 1が出力される
} else {
  console.log('firstNumber is undefined');
}

const numbers: number[] = [1, 2, 3];
const firstNumber = numbers.optionalAt(0); // firstNumber は number | undefined 型である

if (firstNumber !== undefined) {
  console.log(firstNumber); // 1が出力される
} else {
  console.log('firstNumber is undefined');
}

説明

上記の例では、以下の点に注目してください。

if 文：numbers[0] が undefined でないかどうかを明示的にチェックしています。
オプション型：numbers[0] が undefined である可能性を型情報で表現しています。
nullish coalescing演算子：numbers[0] が undefined または null の場合は、デフォルト値を設定しています。
Array.prototype.at() メソッド：インデックス範囲外のアクセスを検出してエラーをスローします。

TypeScriptにおける配列要素へのアクセスと潜在的なundefined値の問題：その他の解決策

これまで紹介してきた方法以外にも、TypeScriptにおける配列要素へのアクセスと潜在的なundefined値の問題を解決する方法はいくつかあります。

その他の解決策

ガード付きの型アサーションを使用する

TypeScript 4.1以降では、ガード付きの型アサーションを使用して、特定の条件が満たされる場合にのみ、配列要素の型を断定することができます。

const numbers: number[] | undefined = [1, 2, 3];
const firstNumber = numbers[0];

if (numbers !== undefined) {
  const firstNumberAsserted: number = firstNumber; // firstNumberAsserted は number 型であることが保証される
  console.log(firstNumberAsserted);
} else {
  console.log('numbers[0] is undefined');
}

Array.prototype.find() メソッドを使用して、特定の条件を満たす最初の要素を取得することができます。

const numbers: number[] = [1, 2, 3];
const firstNumber = numbers.find((n) => n !== undefined);

if (firstNumber !== undefined) {
  console.log(firstNumber);
} else {
  console.log('No element found');
}

const numbers: number[] = [1, 2, 3];
const firstNumber = numbers.reduce((acc, n) => (n !== undefined ? n : acc), undefined);

if (firstNumber !== undefined) {
  console.log(firstNumber);
} else {
  console.log('No element found');
}