JavaScriptの配列から要素を削除する方法（pop, shift, spliceなど）完全ガイド
先生と生徒の会話形式で理解しよう
生徒
「先生、JavaScriptの配列から要素を取り除きたいときはどうすればいいですか？」
先生
「配列の要素を削除するにはいくつか方法があります。代表的なのは pop、shift、そして splice です。」
生徒
「それぞれどう違うんですか？名前が難しそうで不安です…」
先生
「大丈夫ですよ。順番に、簡単に使い方と特徴を説明しますね。」
1. popメソッドで末尾の要素を削除
popは配列の一番後ろ（末尾）の要素を取り除くメソッドです。最後に入れたものを取り除きたいときに便利です。
let fruits = ["りんご", "バナナ", "みかん"];
let removed = fruits.pop();
console.log(fruits);
console.log(removed);
["りんご", "バナナ"]
みかん
このように、配列の最後の要素「みかん」が取り除かれ、戻り値として取り除いた要素が返ってきます。
2. shiftメソッドで先頭の要素を削除
shiftは配列の一番先頭の要素を取り除きます。最初に入れたものを取り除きたいときに使います。
let fruits = ["りんご", "バナナ", "みかん"];
let removed = fruits.shift();
console.log(fruits);
console.log(removed);
["バナナ", "みかん"]
りんご
先頭の「りんご」が取り除かれて、配列には残りの要素だけになります。
3. spliceメソッドで好きな位置の要素を削除
spliceは配列の好きな位置から要素を削除したいときに使います。例えば途中の要素を取り除くことができます。
let fruits = ["りんご", "バナナ", "みかん", "ぶどう"];
// 1番目の要素（バナナ）を1個削除
let removed = fruits.splice(1, 1);
console.log(fruits);
console.log(removed);
["りんご", "みかん", "ぶどう"]
["バナナ"]
splice(開始位置, 削除数)の形で使い、削除した要素が配列として返ってきます。
4. 複数の要素をまとめて削除する方法
spliceは削除数を増やすことで複数の要素を一気に削除できます。
let nums = [1, 2, 3, 4, 5];
// 1番目から3個削除（2,3,4が削除される）
let removed = nums.splice(1, 3);
console.log(nums);
console.log(removed);
[1, 5]
[2, 3, 4]
このように、複数の要素も簡単にまとめて削除できます。
5. 削除した要素の使い道
pop、shift、spliceは削除した要素を戻り値として返します。何が削除されたか確認したり、別の場所に使ったりすることができます。
let colors = ["赤", "青", "緑"];
let last = colors.pop();
console.log("削除した色は " + last);
削除した色は 緑
削除と同時に情報を取り出せるので便利です。
6. 削除メソッドの選び方まとめ
pop: 配列の後ろから1つ削除したいときshift: 配列の前から1つ削除したいときsplice: 好きな位置から複数の要素を削除したいとき
状況に合わせて使い分けましょう。
7. 注意点：配列の要素数（length）との関係
要素を削除すると配列の長さを表す length プロパティは自動で減ります。配列のサイズは常に最新の状態になりますので安心してください。
8. 実用例：タスク管理アプリで削除を使う
let tasks = ["掃除", "洗濯", "買い物"];
// タスク完了で最後のものを削除
tasks.pop();
// 先頭のタスクが終わったら削除
tasks.shift();
// 途中のタスクを削除
tasks.splice(0, 1);
console.log(tasks);
[]
このように、いろんな場所の要素を簡単に削除して管理できます。
