JavaScript配列の削除方法まとめ｜spliceとfilterの違い【Vue対応】

はじめに

JavaScriptで配列を扱っていると、

• 特定の位置の要素を削除したい
• 特定の文字（値）を削除したい
• 同じ値をまとめて削除したい

といった場面はとてもよく出てきます。

この記事では、初心者の方でも理解できるように、配列から要素を削除する代表的な3つの方法を、使い分けポイントと一緒に解説します。

---

① index（位置）がわかっている場合 → splice() で削除

まずは、削除したい要素の位置（インデックス）が分かっている場合です。

const fruits = ["apple", "banana", "orange"];

fruits.splice(1, 1);
// 1番目の要素（banana）を1つ削除

console.log(fruits);
// → ["apple", "orange"]

splice() の引数の意味

array.splice(開始位置, 削除する個数);

今回の場合は👇

• 1 → どこから削除するか（インデックス）
• 1 → 何個削除するか

つまり、

「インデックス1番目から、1つ削除する」

という意味になります。

⚠️ 注意

• splice() は 元の配列を直接書き換える メソッドです
• Vue や React では使いどころに注意が必要です

---

② 削除したい文字がわかっている場合 → indexOf() + splice()

次は、

「削除したい値は分かるけど、何番目か分からない」

という場合です。

const fruits = ["apple", "banana", "orange"];

const target = "banana";
const index = fruits.indexOf(target);

if (index !== -1) {        // 見つかったら
  fruits.splice(index, 1); // 削除
}

console.log(fruits);
// → ["apple", "orange"]

indexOf() の意味

• 指定した値が 配列のどこにあるか を探す
• 見つかれば → インデックス番号を返す
• 見つからなければ → -1 を返す

fruits.indexOf("banana"); // → 1
fruits.indexOf("grape");  // → -1

そのため、-1 でないことを確認してから splice() しています。

---

③ filter() を使う（特定の文字を残さない）⭐おすすめ

一番シンプルで、実務（特に Vue）でよく使われる方法です。

const fruits = ["apple", "banana", "orange"];

const newList = fruits.filter(fruit => fruit !== "banana");

console.log(newList);
// → ["apple", "orange"]

filter() の意味

• 条件に 当てはまるものだけを残す
• 今回は「banana ではないもの」を残している

つまり、

「banana 以外をすべて残す」

という書き方になります。

✨ メリット

• 元の配列を変更しない
• コードが読みやすい
• Vue / React と相性が良い

---

🔥 応用：同じ文字が複数あっても全部消したい場合

const words = ["a", "b", "c", "b", "d"];

const removed = words.filter(item => item !== "b");

console.log(removed);
// → ["a", "c", "d"]

ポイント

• splice() や indexOf() だと 1個ずつ しか消せない
• filter() なら 同じ値をまとめて削除 できる

---

✨ Vue ではどう使うの？（超重要）

例えば、TODOリストの削除処理ではこの形が定番です。

todos = todos.filter(todo => todo.id !== id);

意味としては👇

• クリックされた id と違うものだけ残す
• 結果として、その TODO が削除される

👉 Vueではほぼこの書き方1本でOK と言ってもいいレベルです。

---

📌 まとめ

方法	使う場面
splice()	インデックス（位置）が分かっているとき
indexOf() + splice()	値から位置を探して削除したいとき
filter() ⭐	特定の文字・ID をまとめて削除したいとき

実務では filter() が最も安全で読みやすくおすすめ です。

ぜひ、自分のコードでも使ってみてください 😊

その他関連記事はこちら→プログラミング備忘録