JavaScript 配列メソッド：push、pop、shift、unshift を使用した配列の変更

前章では、配列の作成とアクセスの基本について学びました。
今回は、組み込みの配列メソッドを使用して、配列を動的に変更する方法について深く掘り下げていきます。

1. 配列の変更：push()

push() メソッドは、1つ以上の要素を配列の 末尾 に追加します。このメソッドは元の配列を直接変更し、追加後の 新しい配列の長さ を返します。

1.1 基本的な使い方

let fruits = ['りんご', 'バナナ'];
let newLength = fruits.push('オレンジ'); // 末尾に 'オレンジ' を追加

console.log(fruits); // 出力: ['りんご', 'バナナ', 'オレンジ']
console.log(newLength); // 出力: 3

この例では、push('オレンジ') によって「オレンジ」が fruits 配列の末尾に追加されました。newLength 変数には更新された配列の長さ（3）が格納されます。

1.2 複数の要素を追加する

push() メソッドでは、一度に複数の要素を追加することも可能です。

let fruits = ['りんご', 'バナナ'];
fruits.push('オレンジ', 'ぶどう');

console.log(fruits); // 出力: ['りんご', 'バナナ', 'オレンジ', 'ぶどう']

ここでは、1回の操作で「オレンジ」と「ぶどう」の両方を fruits 配列の末尾に追加しています。

1.3 数値の例

let numbers = [1, 2, 3];
numbers.push(4, 5, 6);

console.log(numbers); // 出力: [1, 2, 3, 4, 5, 6]

1.4 実践的なアプリケーション

楽曲のプレイリストを管理している場面を想像してください。ユーザーが新しい曲を選択した際、push() を使ってプレイリストの最後に追加することができます。

let playlist = ['曲 1', '曲 2'];
let newSong = '曲 3';
playlist.push(newSong);

console.log(playlist); // 出力: ['曲 1', '曲 2', '曲 3']

2. 要素の削除：pop()

pop() メソッドは、配列から 最後 の要素を削除します。このメソッドは元の配列を変更し、削除された要素 を返します。配列が空の場合、pop() は undefined を返します。

2.1 基本的な使い方

let fruits = ['りんご', 'バナナ', 'オレンジ'];
let removedFruit = fruits.pop(); // 末尾から 'オレンジ' を削除

console.log(fruits); // 出力: ['りんご', 'バナナ']
console.log(removedFruit); // 出力: 'オレンジ'

この例では、pop() によって fruits 配列から「オレンジ」が削除され、removedFruit 変数にその値が保持されます。

2.2 空の配列での pop()

let emptyArray = [];
let removedElement = emptyArray.pop();

console.log(removedElement); // 出力: undefined
console.log(emptyArray); // 出力: []

上記のように、空の配列に対して pop() を使用すると undefined が返り、配列は空のまま維持されます。

2.3 実践的なアプリケーション

テキストエディタの「元に戻す（Undo）」機能を考えてみましょう。操作ログを保持するスタックから、pop() を使って最後の操作を取り出すことができます。

let actions = ['a を入力', 'b を入力', 'c を入力'];
let lastAction = actions.pop();

console.log(actions); // 出力: ['a を入力', 'b を入力']
console.log(lastAction); // 出力: 'c を入力'

3. 配列の先頭への追加：unshift()

unshift() メソッドは、1つ以上の要素を配列の 先頭 に追加します。このメソッドは元の配列を変更し、追加後の 新しい配列の長さ を返します。

3.1 基本的な使い方

let fruits = ['バナナ', 'オレンジ'];
let newLength = fruits.unshift('りんご'); // 先頭に 'りんご' を追加

console.log(fruits); // 出力: ['りんご', 'バナナ', 'オレンジ']
console.log(newLength); // 出力: 3

この例では、unshift('りんご') によって「りんご」が fruits 配列の先頭に挿入されました。newLength 変数には新しい長さ（3）が格納されます。

3.2 複数の要素を追加する

push() と同様に、unshift() も一度に複数の要素を追加できます。

let fruits = ['オレンジ'];
fruits.unshift('りんご', 'バナナ');

console.log(fruits); // 出力: ['りんご', 'バナナ', 'オレンジ']

ここでは、「りんご」と「バナナ」が配列の先頭に追加されました。

3.3 実践的なアプリケーション

タスクキュー（待ち行列）の管理を想像してください。unshift() を使うことで、緊急度の高いタスクをキューの最優先位置（先頭）に割り込ませることができます。

let taskQueue = ['タスク 1', 'タスク 2'];
let urgentTask = '緊急タスク';
taskQueue.unshift(urgentTask);

console.log(taskQueue); // 出力: ['緊急タスク', 'タスク 1', 'タスク 2']

4. 先頭からの要素削除：shift()

shift() メソッドは、配列から 最初 の要素を削除します。このメソッドは元の配列を変更し、削除された要素 を返します。配列が空の場合、shift() は undefined を返します。

4.1 基本的な使い方

let fruits = ['りんご', 'バナナ', 'オレンジ'];
let removedFruit = fruits.shift(); // 先頭から 'りんご' を削除

console.log(fruits); // 出力: ['バナナ', 'オレンジ']
console.log(removedFruit); // 出力: 'りんご'

この例では、shift() によって fruits 配列から「りんご」が削除され、removedFruit 変数にその値が格納されます。

4.2 空の配列での shift()

let emptyArray = [];
let removedElement = emptyArray.shift();

console.log(removedElement); // 出力: undefined
console.log(emptyArray); // 出力: []

pop() と同様、空の配列に対して shift() を実行すると undefined を返し、配列の状態は変化しません。

4.3 実践的なアプリケーション

キュー内のタスク処理を考えてみましょう。shift() を使うことで、キューにある「次のタスク」を順番に取り出して処理することができます。

let taskQueue = ['タスク 1', 'タスク 2', 'タスク 3'];
let nextTask = taskQueue.shift();

console.log(taskQueue); // 出力: ['タスク 2', 'タスク 3']
console.log(nextTask); // 出力: 'タスク 1'

5. 配列操作メソッドの比較

配列データを効率的に操作するためには、これらのメソッドの違いを理解し、目的に応じて正しいツールを選択することが非常に重要です。