JavaScript において配列はデータ構造の根幹をなす要素であり、効率的な操作メソッドを理解することは開発効率に直結します。本稿では、頻繁に利用される配列メソッドを機能別に分類し、それぞれの挙動と実装例を解説します。

要素の追加と削除（破壊的メソッド）

これらのメソッドは元の配列自体を変更する性質を持っています。

push() と pop()

配列の末尾に対する操作を行います。スタック構造のような挙動を示します。

• push(): 末尾に要素を追加し、新しい長さを返します。
• pop(): 末尾の要素を削除し、削除された要素を返します。

const shoppingCart = [100, 200];
const newLength = shoppingCart.push(300); // 末尾に追加
console.log(shoppingCart); // [100, 200, 300]
console.log(newLength); // 3

const lastItem = shoppingCart.pop(); // 末尾を削除
console.log(lastItem); // 300
console.log(shoppingCart); // [100, 200]

shift() と unshift()

配列の先頭に対する操作を行います。キュー構造のような挙動を示します。

• unshift(): 先頭に要素を追加し、新しい長さを返します。
• shift(): 先頭の要素を削除し、削除された要素を返します。

const taskQueue = ['taskB', 'taskC'];
taskQueue.unshift('taskA'); // 先頭に追加
console.log(taskQueue); // ['taskA', 'taskB', 'taskC']

const firstTask = taskQueue.shift(); // 先頭を削除
console.log(firstTask); // 'taskA'

splice()

配列の任意の位置に対して、要素の追加、削除、置換を柔軟に行うことができます。

• 構文: array.splice(start, deleteCount, item1, ...)
• 戻り値: 削除された要素を含む配列（削除がない場合は空配列）

const data = [10, 20, 30, 40, 50];

// 削除：索引 2 から 2 個削除
const removed = data.splice(2, 2); 
console.log(removed); // [30, 40]
console.log(data); // [10, 20, 50]

// 追加：索引 1 に要素を挿入
data.splice(1, 0, 15, 25);
console.log(data); // [10, 15, 25, 20, 50]

// 置換：索引 1 から 1 個削除し、新しい値を挿入
data.splice(1, 1, 99);
console.log(data); // [10, 99, 25, 20, 50]

配列の抽出と結合（非破壊的メソッド）

これらのメソッドは新しい配列または文字列を生成し、元の配列を変更しません。

slice()

指定された範囲の要素を抽出して新しい配列を返します。負の索引をサポートしており、末尾からの計算が可能です。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const subset = numbers.slice(2, 5); // 索引 2 から 5 未満
console.log(subset); // [3, 4, 5]

const lastTwo = numbers.slice(-2); // 末尾 2 個
console.log(lastTwo); // [7, 8]

const cloned = numbers.slice(); // 配列の複製
console.log(cloned === numbers); // false

concat()

複数の配列または値を結合して、新しい配列を生成します。

const arr1 = ['A', 'B'];
const arr2 = ['C', 'D'];
const combined = arr1.concat(arr2, 'E');
console.log(combined); // ['A', 'B', 'C', 'D', 'E']
console.log(arr1); // 元の配列は変更されない ['A', 'B']

join()

配列のすべての要素を結合して文字列にします。区切り文字を指定可能です。

const tags = ['html', 'css', 'js'];
const tagString = tags.join(', ');
console.log(tagString); // "html, css, js"

const noSeparator = tags.join('');
console.log(noSeparator); // "htmlcssjs"

検索と存在確認

配列内に特定の値が含まれているか、またはその位置を確認するために使用します。

indexOf() と lastIndexOf()

指定された要素が最初に、または最後に出現する索引を返します。存在しない場合は -1 を返します。

const letters = ['a', 'b', 'c', 'b', 'a'];
console.log(letters.indexOf('b')); // 1 (最初に見つかった位置)
console.log(letters.lastIndexOf('b')); // 3 (最後に見つかった位置)
console.log(letters.indexOf('z')); // -1 (見つからない)

includes()

配列が特定の値を含んでいるかを布尔値で返します。ES6 で導入された比較的新しいメソッドです。

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true
console.log(fruits.includes('grape')); // false

排序と反転

配列の順序を変更するメソッドです。元の配列を変更します。

sort()

要素を排序します。デフォルトでは文字列として比較されるため、数値の排序には比較関数が必要です。

const values = [5, 2, 9, 1, 5, 6];

// 数値の昇序
values.sort((a, b) => a - b);
console.log(values); // [1, 2, 5, 5, 6, 9]

// 数値の降序
values.sort((a, b) => b - a);
console.log(values); // [9, 6, 5, 5, 2, 1]

reverse()

配列の要素の順序を反転させます。

const sequence = [1, 2, 3, 4];
sequence.reverse();
console.log(sequence); // [4, 3, 2, 1]

繰り返し処理

forEach()

配列の各要素に対して指定された関数を実行します。戻り値は undefined であり、ループの途中での break は使用できません。

const users = ['Alice', 'Bob', 'Charlie'];
users.forEach((user, index) => {
    console.log(`User ${index + 1}: ${user}`);
});
// 出力:
// User 1: Alice
// User 2: Bob
// User 3: Charlie