TypeScriptで配列を自由自在に！配列操作大全

TypeScriptでは、JavaScriptの配列操作に型安全性を加えることで、より効率的でエラーの少ないコードを書くことができます。

この記事では、

「TypeScriptで配列を自由自在に！配列操作大全」

と題して、TypeScriptでよく使われる配列操作を網羅的に紹介し、実際にどのように活用できるかを学んでいきます。

配列の基本操作

TypeScriptでは、配列は基本的にJavaScriptと同じように操作できますが、型を指定することで、より安心して使用することができます。

let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ["apple", "banana", "cherry"];

ゆーや

Array形の扱いについては、以下の記事にまとめているよ！

numbers.push(6);  // 配列の末尾に追加
strings.unshift("grape");  // 配列の先頭に追加

ゆーや

配列の操作は基本中の基本！型を明示することで、より安全に扱えます！

TypeScriptでは、配列の中から特定の要素を検索したり、操作する方法も豊富です。

let index = numbers.indexOf(3);  // 3がある場所を返す
let foundString = strings.find(str => str.startsWith("b"));  // "b"で始まる文字列を探す

let doubledNumbers = numbers.map(num => num * 2);  // 各要素を2倍にする
let upperCaseStrings = strings.map(str => str.toUpperCase());  // 文字列を大文字に変換

ゆーや

配列の検索や変換はよく使う操作です。特にmapやfindはとても便利！

配列から特定の条件に一致する要素を取り出す方法もよく使います。

let evenNumbers = numbers.filter(num => num % 2 === 0);  // 偶数を抽出
let shortStrings = strings.filter(str => str.length <= 5);  // 長さが5以下の文字列を抽出

ゆーや

filterを使えば、条件に合った要素だけを簡単に抽出できます！

並び替えを行う際もTypeScriptでは簡単に実行できます。

let sortedNumbers = [...numbers].sort((a, b) => a - b);  // 昇順に並び替え
let reverseStrings = [...strings].sort().reverse();  // 逆順に並び替え

ゆーや

並び替えを行う際は、元の配列を変更しないようにコピーを使うことをおすすめします。

複数の配列を結合したり、配列を分割したりする操作もよく行います。

// numbersとstringsを結合
let combinedArray = numbers.concat(strings);  // 2つの配列を結合

let slicedNumbers = numbers.slice(1, 4);  // インデックス1から4の間の要素を取り出す

pop()メソッドを使うと、配列の末尾の要素を削除できます。

let numbers: number[] = [1, 2, 3, 4, 5];
numbers.pop();  // 5が削除される
console.log(numbers);  // [1, 2, 3, 4]

shift()メソッドを使うと、配列の先頭の要素を削除できます。

let numbers: number[] = [1, 2, 3, 4, 5];
numbers.shift();  // 1が削除される
console.log(numbers);  // [2, 3, 4, 5]

splice()メソッドは、指定したインデックスから要素を削除するために使います。この方法では、任意の位置から削除できます。

let numbers: number[] = [1, 2, 3, 4, 5];
numbers.splice(2, 1);  // インデックス2から1つの要素（3）を削除
console.log(numbers);  // [1, 2, 4, 5]

本記事では、

「TypeScriptで配列を自由自在に！配列操作大全」

と題して、TypeScriptでは、配列操作が非常に簡単に行え、型の安全性も確保できます。

基本的な操作から、検索・変換・並び替え・結合・削除まで、さまざまな手法を紹介しました。

これらの操作を使いこなすことで、効率的にコードを書けるようになります。ぜひ、プロジェクトに活用してみてください！