その for文、まだ書きますか？ TypeScript配列操作メソッド完全ガイド

TypeScript の開発において、配列操作は避けて通れません。しかし、ついつい for ループで全て解決していませんか？ この記事では、コードの可読性を劇的に高め、バグを防ぐためのモダンな配列操作メソッドを目的別に紹介します。用途に合ったメソッドを選ぶだけで、あなたのコードは見違えるほど美しくなります。

要素の追加・削除 (Mutable)

これらのメソッドは元の配列を変更（破壊的変更）します。React などで状態管理をする際は注意が必要です。

基本的なメソッド

• push(...items): 末尾に追加 (戻り値: 新しい要素数)
• pop(): 末尾を削除 (戻り値: 削除された要素 | undefined)
• unshift(...items): 先頭に追加 (戻り値: 新しい要素数)
• shift(): 先頭を削除 (戻り値: 削除された要素 | undefined)

図解: 配列の変更操作

末尾への追加・削除 (push / pop)

先頭への追加・削除 (unshift / shift)

const numbers: number[] = [1, 2, 3];

numbers.push(4);    // [1, 2, 3, 4]
numbers.pop();      // [1, 2, 3]
numbers.unshift(0); // [0, 1, 2, 3]
numbers.shift();    // [1, 2, 3]

範囲指定での削除・置換

• splice(start, deleteCount, ...items): 指定位置の要素を削除・置換

const colors = ['red', 'green', 'blue'];

// インデックス1から1つ削除し、'yellow'を追加
colors.splice(1, 1, 'yellow'); 
// 結果: ['red', 'yellow', 'blue']

反復処理

• forEach(callback): 各要素に対して処理を実行 (戻り値: void)

const names = ['Alice', 'Bob'];
names.forEach((name, index) => {
  console.log(`${index}: ${name}`);
});

※ forEach は途中で break できません。中断が必要な場合は for...of ループを使用します。

変換・マッピング

配列の各要素を変換して新しい配列を作ります。

• map(callback): 要素を変換

図解: map

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2, 4, 6]

• flat(depth): 多次元配列を平坦化

const nested = [1, [2, 3], [4, [5]]];
const flat1 = nested.flat();      // [1, 2, 3, 4, [5]]
const flat2 = nested.flat(2);     // [1, 2, 3, 4, 5]

• flatMap(callback): map した後に flat(1) を行う。効率が良い。

const sentences = ["Hello world", "TypeScript is great"];
const words = sentences.flatMap(s => s.split(" "));
// ["Hello", "world", "TypeScript", "is", "great"]

検索・判定

要素を探したり、条件を満たすかチェックします。

要素の検索

• find(callback): 条件に合う最初の要素を返す (見つからない場合: undefined)
• findIndex(callback): 条件に合う最初のインデックスを返す (見つからない場合: -1)

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

const bob = users.find(u => u.name === 'Bob'); // { id: 2, name: 'Bob' }
const bobIndex = users.findIndex(u => u.name === 'Bob'); // 1

存在確認

• includes(value): 値が含まれているか (プリミティブ値向け)
• some(callback): 条件を満たす要素が1つでもあるか
• every(callback): 全ての要素が条件を満たすか

const nums = [1, 2, 3, 4, 5];

nums.includes(3);        // true
nums.some(n => n > 4);   // true (5があるため)
nums.every(n => n > 0);  // true

集計

• reduce(callback, initialValue): 配列を単一の値に畳み込む

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, current) => acc + current, 0); 
// 0 + 1 + 2 + 3 + 4 = 10

reduce は複雑になりがちなので、単なる合計やマッピングであれば他のメソッドの方が可読性が高い場合があります。

まとめ

TypeScript (JavaScript) の配列メソッドは非常に強力です。 「元の配列を変更するかどうか」（Mutable か Immutable か）を意識して使い分けることが、バグの少ないコードを書くコツです。