JavaScript の配列から要素を削除する方法
はじめてでも安心して使えるように、基本の4つを丁寧に説明します。どれも「配列から要素を消す」ための方法ですが、消える位置や動き方が違います。小さな例題もつけたので、手を動かして試してみてください。
配列とは
- イメージ: 箱が横に並んだ「順番つきのリスト」。箱には値が入っています。
- 位置の呼び方: 一番左が「最初（先頭）」、一番右が「最後（末尾）」。
- 例:
let fruits = ["apple", "melon", "peach"]; // 先頭: "apple", 最後: "peach"
1. 末尾を削除する pop()
- 役割: 一番右（最後）の要素を1つ削除する
- 戻り値: 削除された要素が返ってくる
- 配列への影響: 配列は1つ短くなる
let fruits = ["apple", "melon", "peach"];
let removed = fruits.pop(); // "peach" が削除される
console.log(removed); // "peach"
console.log(fruits); // ["apple", "melon"]
こんなときに使う
- 最後に追加したものを取り消したい時
- スタック（積み重ね）みたいな使い方をするとき
初心者向けポイント
- 配列が空なら 何も消せないので
undefinedが返る - 元の配列が書き換わる（破壊的） ことを覚えておく
2. 先頭を削除する shift()
- 役割: 一番左（最初）の要素を1つ削除する
- 戻り値: 削除された要素が返ってくる
- 配列への影響: 残りの要素が左に詰められる
let queue = ["ticket-001", "ticket-002", "ticket-003"];
let served = queue.shift(); // "ticket-001" が削除される（先頭）
console.log(served); // "ticket-001"
console.log(queue); // ["ticket-002", "ticket-003"]
こんなときに使う
- 順番待ち（キュー）から先頭を取り出すイメージ
初心者向けポイント
shift()は配列全体を詰めるため、巨大な配列では少し遅くなることがある（まずは気にしなくてOK）
3. 長さを変えてまとめて削除する length
- 役割: 配列の「長さ」を直接短くして、末尾側をまとめて削除する
- 戻り値: なし（長さを設定するだけ）
- 配列への影響: 指定した長さ以降の要素が消える
let nums = [10, 20, 30, 40, 50];
nums.length = 3; // 末尾の 40, 50 が削除される
console.log(nums); // [10, 20, 30]
nums.length = 0; // 全部削除（空配列になる）
console.log(nums); // []
こんなときに使う
- 末尾から一気に削除したいとき
- 配列を空にしたいとき（
length = 0）
初心者向けポイント
lengthを伸ばしても、新しく増えた部分は空（undefined扱い）になるので注意
4. まっさらな配列に置き換える（空配列を代入）
- 役割: 変数に新しい空配列
[]を代入する - 戻り値: なし
- 配列への影響: その変数が指す配列を「別物」にする
let items = ["pen", "note"];
let alias = items; // 同じ配列を別名で参照
items = []; // items だけ新しい空配列に差し替え
console.log(items); // []
console.log(alias); // ["pen", "note"] ← 元の配列は残る
こんなときに使う
- この変数だけ「新しく空にしたい」とき
初心者向けポイント
- もし他の変数も同じ配列を参照していたら、その配列は消えない。その変数に
[]を代入しただけで、元の配列は別名から見えるまま。
小さな例題で練習
例題1: 買い物リストの取り消し
- 状況: 買い物リストの最後に追加した品を取り消したい
let shopping = ["milk", "bread", "eggs"];
shopping.push("butter"); // 追加
let canceled = shopping.pop(); // 最後を取り消し
console.log(canceled); // "butter"
console.log(shopping); // ["milk", "bread", "eggs"]
- ポイント: 「最後に追加→最後から削除」は
push()とpop()のセットで覚えると楽。
例題2: 受付システム（先着順）
- 状況: 先に来た人から順に案内したい
let queue = [];
queue.push("Aさん");
queue.push("Bさん");
queue.push("Cさん");
let first = queue.shift(); // Aさんを案内
console.log(first); // "Aさん"
console.log(queue); // ["Bさん", "Cさん"]
- ポイント: 「先頭から取り出す」は
shift()。追加はpush()。
例題3: ログの整理（末尾をまとめて削除）
- 状況: 古いログが配列の末尾に溜まっているので、最近の3件だけ残したい
let logs = ["log1", "log2", "log3", "log4", "log5"];
logs.length = 3; // 末尾の2つを削除
console.log(logs); // ["log1", "log2", "log3"]
- ポイント: 「末尾側を一気に削る」なら
lengthがシンプル。
どれを使えばいい？
- 最後から1つ消したい:
pop() - 最初から1つ消したい:
shift() - 末尾からまとめて消したい・空にしたい:
lengthを小さくする（0で空に） - 変数だけ空配列に差し替えたい:
[]を代入
よくあるつまずき
- 配列が書き換わることを忘れる:
pop()とshift()は元の配列が変わる（破壊的）。「元の配列を残したい」なら、先にコピーを作る。
let original = ["a", "b", "c"];
let copy = original.slice(); // 簡単なコピー
copy.pop();
console.log(original); // ["a", "b", "c"] ← 元のまま
- 参照の勘違い:
items = []は「新しい箱に付け替え」。他の変数が同じ箱を見ていたら、その箱の中身は残る。
まずはこれだけ覚えよう
- 後ろから削除 → pop()
- 前から削除 → shift()
- まとめて削除・空にする → length
- 変数だけ空にする → [] を代入