TypeScriptでnullとundefinedを含む配列を型安全に操作する方法

TypeScriptにおいて、nullやundefinedを含むデータを扱う際には、型安全に操作することが求められます。特に、配列内にnullやundefinedが混在するケースでは、データの整合性を保ちながらエラーを防ぐために適切な処理が必要です。この記事では、nullやundefinedが含まれる配列をTypeScriptで安全に操作するための手法を詳しく解説します。型システムを活用したエラーチェックや実用的なフィルタリングの方法、そしてパフォーマンスを意識した最適化まで、具体的な方法をステップごとに紹介します。

nullとundefinedの違い

TypeScriptでは、nullとundefinedはそれぞれ異なる意味を持つ特殊な値です。これらは共に「値が存在しない」ことを示しますが、使い方や意味に微妙な違いがあります。

nullとは何か

nullは、明示的に「値がない」ことを表します。変数が意図的に値を持っていない場合や、初期化されていない状態を示すために使用されます。例えば、データベースから値が存在しない結果を返すときや、まだセットされていないオブジェクトなどに使用します。

undefinedとは何か

undefinedは、変数が宣言されているが、まだ値が割り当てられていない状態を示します。これは「値がまだ定義されていない」という意味を持ちます。例えば、関数が戻り値を返さない場合や、オブジェクトのプロパティに値が割り当てられていない場合に使われます。

nullとundefinedの使い分け

• nullは、意図的に値が存在しないことを明示するために使用します。
• undefinedは、システムが自動的に設定する「未定義の値」を示します。

この違いを理解することで、配列内に含まれるnullやundefinedを適切に区別して処理することが可能になります。

配列の型定義方法

TypeScriptでは、配列に含まれる要素の型を明確に定義することができます。nullやundefinedを含む配列を扱う場合、それらを考慮した型定義が重要です。ここでは、nullやundefinedを含む配列の型定義方法を説明します。

基本的な型定義

TypeScriptで配列を定義する際、要素の型を指定することが可能です。たとえば、数値の配列はnumber[]と定義します。nullやundefinedを含む場合は、それらを組み合わせた型を指定します。

let arr: (number | null | undefined)[];

上記の例では、配列内の要素としてnumber、null、またはundefinedが許容されます。

Union型を用いた定義

複数の型を扱う場合、Union型を使うことで柔軟な型定義が可能です。例えば、数値とnull、undefinedを含む配列は以下のように定義します。

let mixedArray: Array<number | null | undefined> = [1, null, undefined, 5];

この定義により、配列の要素としてnumber、null、undefinedのいずれも許可されるため、型の安全性を確保しつつ、さまざまな要素を含めることができます。

具体例

例えば、次のように定義された配列では、数値とnullやundefinedが混在しています。

let values: (string | null | undefined)[] = ["apple", null, "banana", undefined];

このように定義することで、TypeScriptが配列内の各要素が指定された型に合致しているかを検証してくれます。これにより、開発中のエラーを未然に防ぎ、型安全なコードを記述できるようになります。

nullやundefinedをフィルタリングする方法

配列に含まれるnullやundefinedは、計算や操作を行う際にエラーの原因となる可能性があるため、必要に応じてこれらの値をフィルタリングすることが重要です。ここでは、TypeScriptで安全にnullやundefinedを取り除く方法を紹介します。

filterメソッドを使用した基本的なフィルタリング

JavaScriptと同様に、TypeScriptでも配列のfilterメソッドを使用してnullやundefinedを簡単に取り除くことができます。以下の例では、配列からnullとundefinedを除外しています。

let values: (number | null | undefined)[] = [1, null, 2, undefined, 3];

let filteredValues = values.filter((value): value is number => value !== null && value !== undefined);

この例では、filterメソッドのコールバック関数でvalue !== null && value !== undefinedと条件を設定することで、nullやundefinedが含まれない新しい配列を作成します。

型安全なフィルタリング

TypeScriptでは、filterメソッドで型ガードを使用することによって、フィルタリング後の配列の型を正確に反映させることができます。上記のコードでは、value is numberという型ガードを指定することで、フィルタリング後の配列の型がnumber[]となり、型安全な操作が可能です。

型ガードの重要性

型ガードを使用することで、TypeScriptはフィルタリング後に配列が指定された型（この場合はnumber）のみを含んでいることを保証できます。これにより、以降の操作でnullやundefinedを考慮せず、安心して配列を操作できます。

具体例: オブジェクトを含む配列の場合

オブジェクトを含む配列の場合でも、nullやundefinedを安全に取り除くことができます。

type Item = {
  id: number;
  name: string;
};

let items: (Item | null | undefined)[] = [
  { id: 1, name: "Item 1" },
  null,
  { id: 2, name: "Item 2" },
  undefined
];

let filteredItems = items.filter((item): item is Item => item !== null && item !== undefined);

この例では、オブジェクトを含む配列からnullやundefinedを除去し、型安全に操作できるようにしています。

これにより、配列を安全かつ効率的に操作できる環境を整えることができます。

Optional Chainingを使用した配列操作

TypeScriptでは、nullやundefinedを扱う際にコードが冗長になりがちですが、Optional Chaining（オプショナルチェイニング）を使うことで、より簡潔かつ安全に配列の操作が可能になります。ここでは、Optional Chainingを使って、nullやundefinedを安全に処理する方法を説明します。

Optional Chainingの基本

Optional Chaining（?.）は、nullまたはundefinedである可能性があるプロパティやメソッドにアクセスする際に、エラーを発生させることなく操作を行うための構文です。配列内の要素がnullやundefinedであった場合でも、処理を安全に継続できるようになります。

例えば、以下のようなコードで、配列の要素にアクセスする際にOptional Chainingを使用します。

let values: (number | null | undefined)[] = [10, null, 20, undefined, 30];

let firstValue = values[0]?.toString();  // "10"
let secondValue = values[1]?.toString(); // undefined（nullのためエラーにならない）

この例では、values[1]はnullですが、Optional Chainingを使うことでnullに対してtoString()メソッドを呼び出してもエラーが発生せず、undefinedが返されます。

Optional Chainingを使ったネストした配列操作

ネストした配列やオブジェクトにアクセスする際も、Optional Chainingを使うことで、深いレベルでのnullやundefinedチェックを簡潔に行うことができます。

type Item = {
  name?: string;
  details?: {
    price?: number;
  };
};

let items: (Item | null | undefined)[] = [
  { name: "Item 1", details: { price: 100 } },
  null,
  { name: "Item 2" },
  undefined,
];

let itemPrice = items[0]?.details?.price;  // 100
let secondItemPrice = items[1]?.details?.price; // undefined（nullなのでエラーは発生しない）

このコードでは、nullやundefinedに遭遇してもエラーを避けつつ、最終的なプロパティに安全にアクセスできます。

Optional ChainingとNullish Coalescingを組み合わせる

Optional ChainingとNullish Coalescing（??）を組み合わせることで、値がnullやundefinedの場合にデフォルト値を設定することもできます。

let values: (number | null | undefined)[] = [10, null, 20, undefined, 30];

let thirdValue = values[1] ?? 0;  // nullなので0が返る

ここでは、nullやundefinedが配列内に存在する場合、??演算子を使ってデフォルト値（ここでは0）を設定しています。

まとめ

Optional Chainingは、TypeScriptでnullやundefinedが含まれる可能性のある配列やオブジェクトを操作する際に、コードを簡潔かつ安全に保つための非常に便利な機能です。Optional Chainingを活用することで、複雑なデータ構造やネストされたオブジェクトをエラーなく操作でき、より堅牢なコードを書くことができます。

型ガードを使ったnull/undefinedの検出方法

TypeScriptでは、nullやundefinedを型安全に扱うために、型ガードを使用することができます。型ガードを利用することで、配列内の要素がnullやundefinedであるかを正確に検出し、処理を進める際にエラーを防ぐことが可能です。ここでは、型ガードを使ってnullやundefinedを検出する方法を詳しく説明します。

型ガードの基本

型ガードとは、特定の型を確認してその型に応じた処理を行うための条件文です。TypeScriptでは、typeofやinstanceofといった演算子を使用して型ガードを実装することができます。特にnullやundefinedの検出には、!== nullや!== undefinedといった比較がよく使われます。

例えば、以下のコードでnullやundefinedの型ガードを実装します。

function isNotNullOrUndefined<T>(value: T | null | undefined): value is T {
  return value !== null && value !== undefined;
}

let values: (string | null | undefined)[] = ["apple", null, "banana", undefined];
let filteredValues = values.filter(isNotNullOrUndefined); // 型安全にフィルタリング

この例では、isNotNullOrUndefinedというカスタム型ガードを使って、配列内のnullやundefinedを取り除き、型安全にフィルタリングしています。この方法により、filteredValuesはstring[]型になります。

TypeScript標準の型ガード

TypeScriptには、標準的な型ガードとしてtypeof演算子があります。これを使って、nullやundefinedの検出を行うことができます。

let value: string | null | undefined = "hello";

if (typeof value === "string") {
  console.log(value.toUpperCase()); // string型として扱われる
}

typeof value === "string"という型ガードを使うことで、valueがstring型であることを確認し、その後のコードで型安全に操作することができます。

型ガードを用いた関数内でのnull/undefinedチェック

関数内でも型ガードを使って、nullやundefinedのチェックを行い、安全にデータを操作できます。以下は、nullやundefinedが含まれる可能性がある値を操作する関数の例です。

function processValue(value: string | null | undefined): string {
  if (value === null || value === undefined) {
    return "デフォルト値";
  } else {
    return value.toUpperCase(); // string型として扱われる
  }
}

let result = processValue(null);  // "デフォルト値"
let anotherResult = processValue("TypeScript");  // "TYPESCRIPT"

このように、型ガードを用いることで関数内でnullやundefinedのチェックを行い、安全な処理を実現しています。

配列操作における型ガードの利用

配列操作でも型ガードを活用することで、nullやundefinedを扱う際にエラーを防ぎます。次のコードでは、型ガードを使って配列内のnullやundefinedをフィルタリングし、後続の処理で安全に値を操作しています。

let mixedValues: (number | null | undefined)[] = [1, null, 2, undefined, 3];

let validValues = mixedValues.filter(isNotNullOrUndefined);  // number[]型になる

validValues.forEach(value => {
  console.log(value.toFixed(2));  // 型安全にnumberとして操作
});

型ガードを使うことで、TypeScriptが配列内の要素がnumber型であることを保証し、toFixed()のようなメソッドをエラーなく実行できるようになります。

まとめ

型ガードは、TypeScriptにおいてnullやundefinedを安全に検出し、適切な処理を行うための強力なツールです。カスタム型ガードやtypeofを活用することで、配列内の要素が予期しない型である場合でも、安全に操作を続けることができます。これにより、型安全なコードを維持しつつ、エラーのリスクを低減できます。

Utility Typesを用いた型安全な操作方法

TypeScriptには、nullやundefinedを含むデータを効率的に処理するために、さまざまなUtility Types（ユーティリティ型）が用意されています。これらのユーティリティ型を使用することで、型安全かつ柔軟な操作が可能になります。ここでは、nullやundefinedを含む配列の処理に役立つUtility Typesを紹介し、その活用方法を説明します。

Utility Typesの基本

TypeScriptには、特定の型を操作したり、型の一部を変更するためのユーティリティ型がいくつか存在します。代表的なものとして、NonNullable<T>、Partial<T>、Required<T>などがあります。これらを利用することで、nullやundefinedを除外したり、オプショナルなプロパティを扱うことができます。

NonNullableを使ったnullやundefinedの除外

NonNullable<T>は、指定した型からnullやundefinedを除外するユーティリティ型です。これを利用することで、配列の要素にnullやundefinedが含まれていても、それを安全に排除することができます。

let values: (number | null | undefined)[] = [1, null, 2, undefined, 3];

let filteredValues: NonNullable<typeof values[number]>[] = values.filter(
  (value): value is NonNullable<typeof value> => value !== null && value !== undefined
);

console.log(filteredValues);  // [1, 2, 3]

このコードでは、NonNullableを使用して配列からnullやundefinedを除外し、型安全に処理しています。

PartialとRequiredを用いた柔軟な型操作

Partial<T>は、指定された型のすべてのプロパティをオプショナルにするユーティリティ型です。これにより、nullやundefinedを含むオブジェクトや配列を柔軟に扱うことが可能です。一方、Required<T>はその逆で、すべてのプロパティを必須にするユーティリティ型です。

type Item = {
  id: number;
  name: string;
};

let partialItem: Partial<Item> = { id: 1 };  // nameプロパティがなくてもエラーは発生しない

let completeItem: Required<Item> = { id: 1, name: "Item 1" };  // すべてのプロパティが必須

これにより、nullやundefinedが許される柔軟なデータ構造を扱ったり、厳格な型チェックを行うことができます。

RecordとPickによる型の操作

Record<K, T>やPick<T, K>といったユーティリティ型を使うことで、特定のキーや値を持つオブジェクトを型安全に生成できます。Recordは、特定のキーと型を持つオブジェクトの型を作成するのに役立ち、Pickは既存の型から特定のプロパティだけを抽出します。

type User = {
  id: number;
  name: string;
  age: number | null;
};

// Pickを使って特定のプロパティだけを抽出
type UserName = Pick<User, "name">;

// Recordを使ってキーと値の型を指定
let userRecords: Record<string, User> = {
  user1: { id: 1, name: "Alice", age: null },
  user2: { id: 2, name: "Bob", age: 30 },
};

この例では、ユーティリティ型を活用して、nullを許容するフィールドや必要なプロパティだけを安全に取り出すことができます。

まとめ

TypeScriptのユーティリティ型は、nullやundefinedを含むデータを扱う際に非常に有用です。NonNullableでnullやundefinedを除外し、PartialやRequiredで柔軟な型定義を行うことで、型安全かつ効率的な操作が可能になります。これらのツールを使いこなすことで、より堅牢でメンテナンス性の高いコードを作成することができるでしょう。

nullやundefinedを含む配列の応用例

TypeScriptでは、nullやundefinedを含む配列を型安全に操作することで、複雑なシステムや現実的なシナリオにも対応できます。ここでは、実際のプロジェクトにおいてnullやundefinedを含む配列をどのように扱うか、いくつかの具体例を通じて説明します。

例1: フォーム入力のバリデーション

ウェブアプリケーションで、ユーザーがフォームに入力した値を配列として管理する場合、入力が不完全な項目はnullやundefinedとして扱われることがあります。これを型安全に処理することで、バリデーションを効率的に行うことができます。

type FormField = string | null | undefined;

let formValues: FormField[] = ["John", null, "Doe", undefined];

let validValues = formValues.filter((value): value is string => value !== null && value !== undefined);

if (validValues.length === formValues.length) {
  console.log("すべての項目が正しく入力されました");
} else {
  console.log("未入力または不完全な項目があります");
}

この例では、フォーム入力でnullやundefinedが含まれる場合でも、フィルタリングを通じて安全に処理し、バリデーションを行っています。nullやundefinedを取り除いた後の配列は、すべてstring型になるため、後続の処理も型安全に行うことができます。

例2: APIレスポンスのデータ処理

外部APIから取得したデータがnullやundefinedを含む場合があります。例えば、APIがユーザーのリストを返すときに、一部のユーザーが欠落している可能性があります。こうしたケースでは、型安全にデータを処理することで、エラーを防ぎつつデータを有効に利用できます。

type User = {
  id: number;
  name: string | null;
};

let users: (User | null)[] = [
  { id: 1, name: "Alice" },
  null,
  { id: 2, name: null },
  { id: 3, name: "Charlie" },
];

let validUsers = users.filter((user): user is User => user !== null && user.name !== null);

validUsers.forEach((user) => {
  console.log(`${user.id}: ${user.name}`);
});

この例では、APIから返されたデータにnullが含まれていても、安全にフィルタリングし、名前が存在するユーザーのみを処理しています。これにより、データを無効なまま扱うリスクを低減できます。

例3: Eコマースサイトの在庫管理

Eコマースサイトで商品の在庫管理を行う場合、在庫情報がnullやundefinedとして扱われることがあります。例えば、特定の商品が一時的に在庫切れだったり、情報が欠落していたりするケースです。これを型安全に処理し、在庫がある商品のみを取り出して処理することができます。

type Product = {
  name: string;
  stock: number | null;
};

let products: Product[] = [
  { name: "Product A", stock: 10 },
  { name: "Product B", stock: null },
  { name: "Product C", stock: 5 },
];

let availableProducts = products.filter((product): product is Product => product.stock !== null);

availableProducts.forEach((product) => {
  console.log(`${product.name} の在庫は ${product.stock} 個です`);
});

この例では、在庫がnullの製品をフィルタリングして、在庫がある製品のみを安全に処理しています。こうすることで、在庫が不明な製品を誤って処理することを防ぎ、正確な在庫管理を行うことができます。

例4: クラウドストレージのファイル管理

クラウドストレージを使用する場合、ファイルのメタデータがnullやundefinedを含むことがあり、特定のファイルが欠落している場合もあります。これを型安全に処理し、完全なメタデータを持つファイルのみを操作することが重要です。

type FileMetadata = {
  fileName: string;
  size: number | null;
};

let files: FileMetadata[] = [
  { fileName: "file1.txt", size: 1024 },
  { fileName: "file2.txt", size: null },
  { fileName: "file3.txt", size: 2048 },
];

let validFiles = files.filter((file): file is FileMetadata => file.size !== null);

validFiles.forEach((file) => {
  console.log(`${file.fileName} のファイルサイズは ${file.size} バイトです`);
});

この例では、ファイルサイズがnullのファイルを除外し、サイズ情報が完全なファイルのみを操作しています。これにより、ファイルの処理や表示の際にエラーが発生することを防ぎます。

まとめ

これらの応用例では、nullやundefinedを含む配列をTypeScriptで型安全に処理する方法を具体的に示しました。フォーム入力やAPIレスポンス、在庫管理、ファイル管理など、実際のシナリオでnullやundefinedを含むデータに直面することが多々ありますが、適切な型定義や型ガード、ユーティリティ型を活用することで、エラーのリスクを最小限に抑えながら効率的なデータ処理が可能になります。

パフォーマンスの観点から見た処理方法

TypeScriptでnullやundefinedを含む配列を操作する際、パフォーマンスを意識した処理を行うことが重要です。特に大規模なデータセットを扱う場合、処理の効率性が求められます。ここでは、パフォーマンスを最適化するための方法や、考慮すべきポイントを解説します。

filterメソッドの効率的な使い方

filterメソッドは、配列内の要素を条件に基づいてフィルタリングするために便利ですが、大規模な配列に対して繰り返し適用するとパフォーマンスに影響を与える可能性があります。できるだけ効率的にフィルタリングを行うためには、不要な計算を避けることが重要です。

例えば、次のようにnullやundefinedの要素をフィルタリングしますが、フィルタリング条件を単純にすることで処理の高速化が可能です。

let values: (number | null | undefined)[] = [1, null, 2, undefined, 3];

let filteredValues = values.filter((value): value is number => value != null);

value !== null && value !== undefinedを使う代わりに、value != null（非厳密等価演算子）を使うことで、nullもundefinedも同時に除外できます。これにより、フィルタリング条件が簡潔になり、パフォーマンスが向上します。

ループの最適化

配列を操作する際、ループ処理もパフォーマンスに大きな影響を与えます。たとえば、forEachやmapのような高階関数を使うのは簡単ですが、パフォーマンスを最大限に引き出すためには、従来のforループを使用することが効果的です。

let values: (number | null | undefined)[] = [1, null, 2, undefined, 3];
let filteredValues: number[] = [];

for (let i = 0; i < values.length; i++) {
  if (values[i] != null) {
    filteredValues.push(values[i] as number);
  }
}

forループを使用することで、filterやmapに比べてオーバーヘッドを抑え、特に大規模な配列を操作する際にパフォーマンスが向上することがあります。

メモリ管理とガベージコレクション

大規模な配列を扱う際には、メモリ使用量にも注意が必要です。filterやmapのようなメソッドは新しい配列を生成するため、元の配列が大きいとメモリ使用量が増加し、ガベージコレクションの負荷も高くなります。メモリ効率を向上させるためには、元の配列を直接操作する方法も検討できます。

以下の例では、元の配列を破壊的に操作することで、新しい配列を生成せずにnullやundefinedを除去しています。

let values: (number | null | undefined)[] = [1, null, 2, undefined, 3];

for (let i = values.length - 1; i >= 0; i--) {
  if (values[i] == null) {
    values.splice(i, 1);  // 元の配列から要素を削除
  }
}

console.log(values);  // [1, 2, 3]

この方法では、新しい配列を生成せずにメモリを節約しつつ、元の配列を最適化して処理します。

非同期処理との組み合わせ

nullやundefinedを含む配列を操作する際、非同期のAPI呼び出しやデータベースアクセスが絡む場合、パフォーマンスにさらに影響を与える可能性があります。非同期処理の負荷を軽減するためには、並列処理や遅延処理の導入を検討するのが効果的です。

たとえば、Promise.allを使用して非同期操作を並行して行うことができます。

async function processValues(values: (number | null | undefined)[]) {
  let filteredValues = values.filter((value): value is number => value != null);

  let promises = filteredValues.map(async (value) => {
    // 非同期処理を実行
    return await performAsyncOperation(value);
  });

  return Promise.all(promises);  // 並列処理で高速化
}

async function performAsyncOperation(value: number): Promise<number> {
  // 例: 非同期API呼び出し
  return new Promise((resolve) => setTimeout(() => resolve(value * 2), 1000));
}

processValues([1, null, 2, undefined, 3]).then((results) => {
  console.log(results);  // [2, 4, 6]
});

非同期処理を並列に実行することで、待機時間を最小限に抑えつつ、効率的にデータを処理することが可能です。

まとめ

nullやundefinedを含む配列の操作において、パフォーマンスを最適化するためには、不要な処理を避け、効率的なアルゴリズムや手法を選択することが重要です。filterの最適化やforループの使用、メモリ管理を意識した破壊的操作など、具体的な改善方法を導入することで、特に大規模なデータセットの処理において、処理速度を大幅に向上させることができます。また、非同期処理の際には、並列処理を活用してさらなる効率化を図ることができます。

演習問題: 型安全に配列を操作する方法を実践

ここでは、これまでに学んだnullやundefinedを含む配列の型安全な操作方法を実践するための演習問題を用意しました。これらの問題を解くことで、TypeScriptの型システムと配列操作に関する理解を深めることができます。

問題1: フィルタリングと型ガード

以下の配列には、nullやundefinedが含まれています。TypeScriptの型ガードを使って、nullやundefinedを除外し、残りのnumberのみを含む新しい配列を作成してください。

let mixedValues: (number | null | undefined)[] = [5, null, 8, undefined, 13, null, 21];

function isNotNullOrUndefined<T>(value: T | null | undefined): value is T {
  return value !== null && value !== undefined;
}

// この配列から`null`と`undefined`を除外してください。
let filteredValues = mixedValues.filter(/* ここに型ガードを実装 */);

console.log(filteredValues);  // 結果: [5, 8, 13, 21]

ヒント: 型ガードを使って、number型のみを取り出すように実装します。

問題2: Optional Chainingを使用した配列のアクセス

次に、オプショナルチェイニングを使用して、以下のネストされた配列から安全に値を取得してください。nullやundefinedのプロパティにアクセスしてもエラーが発生しないように実装してください。

type Item = {
  id: number;
  details?: {
    price?: number;
  };
};

let items: (Item | null | undefined)[] = [
  { id: 1, details: { price: 100 } },
  null,
  { id: 2, details: { price: undefined } },
  { id: 3 }
];

// それぞれのアイテムの価格を取得し、価格が存在しない場合は`"価格未設定"`と表示してください。
items.forEach(item => {
  let price = item?.details?.price ?? "価格未設定";
  console.log(`Item ID: ${item?.id}, Price: ${price}`);
});

期待される出力:

Item ID: 1, Price: 100
Item ID: null, Price: 価格未設定
Item ID: 2, Price: 価格未設定
Item ID: 3, Price: 価格未設定

問題3: ユーティリティ型NonNullableを使ったnullやundefinedの除外

以下の配列から、TypeScriptのユーティリティ型NonNullableを使って、nullやundefinedを除外した新しい配列を作成してください。

let names: (string | null | undefined)[] = ["Alice", null, "Bob", undefined, "Charlie"];

// `NonNullable`を使用して新しい配列を作成してください。
let validNames: NonNullable<typeof names[number]>[] = names.filter(/* ここに実装 */);

console.log(validNames);  // 結果: ["Alice", "Bob", "Charlie"]

問題4: 非同期処理との組み合わせ

次のコードでは、非同期APIから返されたデータの配列にnullやundefinedが含まれている可能性があります。TypeScriptの型ガードを使用して、非同期データを安全に処理し、値が有効なデータのみを使って追加の処理を行ってください。

async function fetchData(): Promise<(string | null | undefined)[]> {
  // 非同期でデータを取得（例として、固定のデータを返します）
  return new Promise(resolve => {
    setTimeout(() => resolve(["data1", null, "data2", undefined, "data3"]), 1000);
  });
}

async function processData() {
  let data = await fetchData();

  // 型ガードを使って、nullやundefinedを除外した配列を作成してください。
  let validData = data.filter((value): value is string => value !== null && value !== undefined);

  validData.forEach(item => {
    console.log(`Processing: ${item}`);
  });
}

processData();

期待される出力:

Processing: data1
Processing: data2
Processing: data3

まとめ

これらの演習問題では、nullやundefinedを含む配列をTypeScriptで型安全に操作するためのさまざまな手法を実践しました。型ガードやOptional Chaining、NonNullableユーティリティ型、非同期処理との組み合わせなど、実際のプロジェクトで活用できる技術が身に付いたと思います。

まとめ

本記事では、TypeScriptでnullやundefinedを含む配列を型安全に操作するためのさまざまな方法について解説しました。型ガードを使ってnullやundefinedを除外する方法、Optional Chainingによる安全なアクセス、NonNullableなどのユーティリティ型を活用した効率的な処理方法、そしてパフォーマンスに配慮した最適化手法を学びました。これらの知識を活用することで、複雑なデータを安全かつ効率的に処理し、堅牢なアプリケーションを構築できるでしょう。