Typescript(配列)

ここでは、TypeScriptにおける配列に関する基本的な知識から、より高度な操作までを深堀りしていきます！

配列の作成

TypeScriptにおける配列の宣言には、次のような方法があります。

// number型の配列
let numbers: number[] = [1, 2, 3];

// string型の配列
let strings: string[] = ["foo", "bar", "baz"];

配列を初期化する場合、型推論により、型宣言を省略することができます。

let numbers = [1, 2, 3]; // number[]
let strings = ["foo", "bar", "baz"]; // string[]

配列の基本的な操作

要素のアクセス

配列の要素には、インデックスを指定してアクセスすることができます。TypeScriptでは、インデックスは0から始まります。

let numbers = [1, 2, 3];
console.log(numbers[0]); // 1
console.log(numbers[1]); // 2
console.log(numbers[2]); // 3

要素の変更

配列の要素を変更するには、インデックスを指定して代入することができます。

let numbers = [1, 2, 3];
numbers[1] = 4;
console.log(numbers); // [1, 4, 3]

配列の長さ

配列の長さには、lengthプロパティを使用してアクセスすることができます。

let numbers = [1, 2, 3];
console.log(numbers.length); // 3

配列の反復処理

配列の要素を反復処理するには、for...ofループを使用することができます。

let numbers = [1, 2, 3];
for (let num of numbers) {
  console.log(num);
}
// 1
// 2
// 3

配列の結合

配列を結合するには、concatメソッドを使用することができます。

let numbers1 = [1, 2, 3];
let numbers2 = [4, 5, 6];
let combinedNumbers = numbers1.concat(numbers2);
console.log(combinedNumbers); // [1, 2, 3, 4, 5, 6]

配列のスライス

配列をスライスするには、sliceメソッドを使用することができます。

let numbers = [1, 2, 3, 4, 5];
let slicedNumbers = numbers.slice(1, 3);
console.log(slicedNumbers); // [2, 3]

配列のフィルタリング

配列をフィルタリングするには、filterメソッドを使用すること

let numbers = [1, 2, 3, 4, 5];
let filteredNumbers = numbers.filter(num => num % 2 === 0);
console.log(filteredNumbers); // [2, 4]

配列のマッピング

配列の要素を変換するには、mapメソッドを使用することができます。

let numbers = [1, 2, 3];
let doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6]

配列の繰り返し処理

配列の要素を繰り返し処理するには、forEachメソッドを使用することができます。

let numbers = [1, 2, 3];
numbers.forEach(num => console.log(num));
// 1
// 2
// 3

配列の要素の存在チェック

配列に特定の要素が存在するかどうかを確認するには、includesメソッドを使用することができます。

let numbers = [1, 2, 3];
console.log(numbers.includes(2)); // true
console.log(numbers.includes(4)); // false

多次元配列

多次元配列を宣言するには、配列をネストすることができます。

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

要素へのアクセスも、ネストしたインデックスを指定することで行うことができます。

console.log(matrix[1][0]); // 3

Readonly配列

読み取り専用の配列を作成するには、ReadonlyArrayを使用します。

let numbers: ReadonlyArray<number> = [1, 2, 3];

ReadonlyArrayは、配列の要素の変更を防ぐために使用されます。しかし、TypeScriptには、配列自体の代入が可能であることに注意してください。

let numbers: ReadonlyArray<number> = [1, 2, 3];
numbers = [4, 5, 6]; // OK
numbers[0] = 4; // エラー

まとめ

この記事では、TypeScriptにおける配列に関する基本的な操作と、多次元配列、読み取り専用配列について説明しました。配列を使用することで、複数の要素を一度に扱うことができるため、プログラミングにおいて非常に便利です。しかし、配列操作には注意が必要であり、適切に使用することが重要です。