TypeScriptの多次元配列の使い方についてわかりやすく解説

この記事ではTypeScriptの多次元配列に焦点を当て紹介します。

TypeScriptでの型付けの方法から始め、多次元配列の使い方、実際に多次元配列を使うシチュエーション、そしてMapとの違いについて詳しく解説します。
それでは、さっそくはじめましょう！

TypeScriptを学ぶ際に初心者から上級者まで幅広くおすすめできる書籍5選を紹介します！TypeScriptを効果的に学習するのに役立つこと間違いなしです。

TypeScriptで配列に型をつける方法

まずは、基本的なTypeScriptでの配列の型付けから始めます。

TypeScriptでは型を明示することでコードの品質を向上させ、バグを事前に防ぎます。

let numbers: number[] = [1, 2, 3];
let names: string[] = ["Hoge", "Fuga", "Foo"];

上記のコードは、数値の配列と文字列の配列に型をつける基本的な例です。
number[] と string[] はそれぞれ数値と文字列の型を持つ配列を定義しています。

次に、多次元配列の使い方を紹介します。

多次元配列は 配列の中に配列が含まれている形 です。
例えば以下のような配列ですね。

let matrix: number[][] = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

このコードは、3x3の数値の二次元配列を作成しています。
具体的には number[][] が数値の二次元配列を表しています。

初心者向けにTypeScriptの配列をループする方法を分かりやすく解説！for、for-of、forEachの3つを紹介。

多次元配列はどういうときに使用するのが最適でしょうか？

多次元配列の活用シーンをいくつか見てみましょう。
例えば、ゲームのグリッドや表のデータなど、行と列でデータを管理する場合に便利です。

let ticTacToe: ("X" | "O" | null)[][] = [[null, "X", "O"], ["O", "X", "X"], ["X", null, "O"]];

このコードは、3x3の〇×ゲームの盤面を表現する二次元配列です。
("X" | "O" | null)[][] は "X"、"O"、または null を要素とする二次元配列を定義しています。

似た要素であるMapもデータを保存するコレクションですが、多次元配列とはいくつか違いがあります。
ここではその違いについていくつか挙げます。

Mapは キーと値のペアでデータを管理 します。
キーは文字列だけでなく、数値やオブジェクトなどのさまざまなデータ型を使用できます。

let myMap = new Map();
myMap.set("name", "Hoge");
myMap.set(1, "one");
myMap.set(true, "boolean");

このコードはさまざまな型のキーをMapに設定しています。
一方で、多次元配列のインデックスは数値のみとなります。

Mapは 保有している要素の順序を保つ ことができます。

要素は追加された順序で反復処理されるため、以下のコードはMapの各要素を追加された順にログに出力します。
要素の順序を保持したい場合には有用ですね。

myMap.forEach((value, key) => {
  console.log(key, value);
});

Mapの検索速度は一定ですが、一方で多次元配列はデータ量に比例して検索速度が変わるためデータ量が多い場合などは注意が必要です。

TypeScript初心者向け！Mapの基本から活用法まで、わかりやすく解説。キーと値のペアを効率的に扱おう！

TypeScriptの多次元配列についてどうでしたか？

型付けから多次元配列の具体的な活用例、Mapとの違いまで、幅広く紹介できたと思います。
TypeScriptの多次元配列をうまく活用して、より効率的で可読性の高いコードを書いていきましょう！