TypeScriptで配列要素のundefined値を安全に扱う：オプション型、nullish coalescing演算子、ガード付き型アサーションの使い分け
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には、
Array.prototype.at()やArray.prototype.optionalAt()などの便利なメソッドも用意されています。これらのメソッドは、インデックス範囲外のアクセスを検出してエラーをスローしたり、undefinedを返したりすることができます。 - 上記の例では、配列の最初の要素 (
numbers[0]) を使用していますが、他のインデックスについても同様の問題が発生する可能性があります。
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');
}
説明
上記の例では、以下の点に注目してください。
Array.prototype.optionalAt()メソッド：インデックス範囲外のアクセスを検出してundefinedを返します。- nullish coalescing演算子：
numbers[0]がundefinedまたはnullの場合は、デフォルト値を設定しています。 - オプション型：
numbers[0]がundefinedである可能性を型情報で表現しています。 if文：numbers[0]が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()メソッドを使用する
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');
}
Array.prototype.reduce() メソッドを使用して、配列の要素を累積的に処理することができます。
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');
}
それぞれの方法の比較
それぞれの方法には、それぞれ利点と欠点があります。
Array.prototype.reduce()メソッド：配列の要素を累積的に処理できますが、複雑なコードになる可能性があります。Array.prototype.find()メソッド：特定の条件を満たす最初の要素を取得できますが、パフォーマンスが低下する可能性があります。- ガード付きの型アサーション：型安全性を高めることができますが、TypeScript 4.1以降でのみ使用できます。
- nullish coalescing演算子：簡潔に記述できますが、デフォルト値を設定する必要がある場合があります。
- オプション型：型情報で
undefinedの可能性を表現できますが、すべてのコンパイラでサポートされているわけではありません。 if文：最も単純な方法ですが、冗長になる可能性があります。
どの方法を選択するかは、状況によって異なります。重要なのは、潜在的なundefined値の問題を認識し、適切な対策を講じることです。
- 具体的な状況に合わせて、最適な方法を選択してください。
- 上記で紹介した方法は、あくまでも例であり、他にも様々な解決策があります。
typescript
