JavaScriptでよく使う配列メソッド【要素の追加・削除まとめ｜構文・使用例・注意点】

🚀 JavaScript 配列メソッド — 要素の追加・削除 編

JavaScript では、配列の要素を簡単に追加・削除できるメソッドが豊富に用意されています。
ここでは、その中でも特によく使われる基本メソッドを紹介します。

📌 push(): 配列の末尾に要素を追加

push() は 1 つまたは複数の要素を配列の末尾に追加し、新しい長さを返します。
元の配列を直接変更する 破壊的メソッド です。

📜 構文：

array.push(element1, ..., elementN)

📎 戻り値: 新しい配列の長さ
📎 引数: 追加する要素（複数可）

---

🌟 例：1つ追加

const fruits = ["apple", "banana"];
const newLength = fruits.push("cherry");
console.log(fruits);     // ["apple", "banana", "cherry"]
console.log(newLength);  // 3

🌟 例：複数追加

const fruits = ["apple", "banana"];
fruits.push("cherry", "date");
console.log(fruits); // ["apple", "banana", "cherry", "date"]

---

🔍 特徴

• ✅ 配列の末尾に要素を追加
• ✅ 元の配列を変更（破壊的）
• ✅ 戻り値は新しい長さ

⚠️ 注意点

• 関数型ではないので、元の配列が変わる点に注意

📌 pop(): 配列の末尾から要素を削除

pop() は配列の最後の要素を削除し、その要素を返します。
元の配列を直接変更する 破壊的メソッド です。

📜 構文：

array.pop()

📎 戻り値: 削除された要素（空なら undefined）
📎 引数: なし

---

🌟 例：要素を削除

const fruits = ["apple", "banana", "cherry"];
const last = fruits.pop();
console.log(last);   // "cherry"
console.log(fruits); // ["apple", "banana"]

🌟 例：空の場合

const empty = [];
console.log(empty.pop()); // undefined

---

🔍 特徴

• ✅ 配列末尾から要素を削除
• ✅ 削除された要素を返す
• ✅ 元の配列を変更（破壊的）

⚠️ 注意点

• 要素が無い場合は undefined
• 配列長が減る

---

📚 活用例 — スタック（LIFO）

const stack = [];
stack.push(1);
stack.push(2);
console.log(stack.pop()); // 2
console.log(stack.pop()); // 1
console.log(stack.pop()); // undefined

📌 shift(): 配列の先頭から要素を削除

shift() は配列の先頭の要素を削除し、その要素を返します。
元の配列を直接変更する 破壊的メソッド です。

📜 構文：

array.shift()

📎 戻り値: 削除された要素（空なら undefined）
📎 引数: なし

---

🌟 例：要素を削除

const fruits = ["apple", "banana", "cherry"];
const first = fruits.shift();
console.log(first);  // "apple"
console.log(fruits); // ["banana", "cherry"]

🌟 例：空の場合

const empty = [];
console.log(empty.shift()); // undefined

---

🔍 特徴

• ✅ 配列の先頭から要素を削除
• ✅ 削除された要素を返す
• ✅ 元の配列を変更（破壊的）

⚠️ 注意点

• 配列長が変わる
• 先頭からなので、残りの要素のインデックスが再計算される
• 大きい配列で多用するとパフォーマンスに影響

---

📚 活用例 — キュー（FIFO）

const queue = [];
queue.push(1);
queue.push(2);
console.log(queue.shift()); // 1
console.log(queue.shift()); // 2
console.log(queue.shift()); // undefined

📌 splice(): 任意の位置で追加・削除

splice() は指定位置から要素を削除したり、追加したりできます。
元の配列を直接変更する 破壊的メソッド です。

📜 構文：

array.splice(start, deleteCount, item1, item2, ..., itemN)

📎 戻り値: 削除された要素を含む新しい配列
📎 引数:

• start : 開始インデックス
• deleteCount : 削除する数
• item1, item2, ... : 追加する要素

---

🌟 例：削除

const nums = [1, 2, 3, 4, 5];
const removed = nums.splice(2, 2);
console.log(nums);   // [1, 2, 5]
console.log(removed); // [3, 4]

🌟 例：追加

const nums = [1, 2, 3];
nums.splice(1, 0, "a", "b");
console.log(nums); // [1, "a", "b", 2, 3]

🌟 例：削除 + 追加

const nums = [1, 2, 3, 4];
nums.splice(1, 2, "x");
console.log(nums); // [1, "x", 4]

---

🔍 特徴

• ✅ 任意の位置で要素を削除・追加
• ✅ 元の配列を変更（破壊的）
• ✅ 削除した要素は新しい配列で返る

⚠️ 注意点

• start に負の値 → 配列末尾から数える
• deleteCount を 0 → 削除せず追加だけできる

---

🎉 まとめ

メソッド	処理内容	破壊性	追加	削除
push()	末尾に追加	破壊的	✅	❌
pop()	末尾から削除	破壊的	❌	✅
shift()	先頭から削除	破壊的	❌	✅
splice()	任意位置で追加・削除	破壊的	✅	✅