JavaScript 配列の要素を削除する方法まとめ｜主要メソッド5種の違いと使い分けを徹底解説

JavaScriptの配列操作で最も頻繁に使われる機能のひとつが「要素の削除」ですが、削除方法は複数存在し、それぞれ異なる特徴を持っています。たとえば

• 末尾の要素を取り除きたい場合
• 先頭要素を削除したい場合
• 特定の位置の要素を削除したい場合

など、シチュエーションによって最適な手法は変わってきます。この記事では、JavaScript配列の要素削除に関する主要な5つの手法を詳しく解説し、それぞれの使い分けポイントを明確にしていきます。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

JavaScript 配列の要素を削除する主な5つの方法

JavaScriptで配列の要素を削除する際に使える手法は、大きく分けて5つあります。それぞれ異なる特性を持っているため、削除したい要素の位置や目的に応じて使い分けることが重要です。

結論：目的に応じて使い分けよう！

配列要素の削除においては、「どこの要素を削除したいか」「削除後の配列をどう扱いたいか」によって最適な手法が決まります。

• 末尾要素の削除にはpop()
• 先頭要素にはshift()
• 任意の位置ならsplice()
• 条件に基づいた削除はfilter()

を使用するのが基本的な考え方です。一方、delete演算子は配列に穴を作ってしまうため、通常は推奨されません。JavaScriptの配列の概要については、以下の記事をご覧ください。

「なんか今の仕事合わないな・・・」

「IT業界に転職してみたいなぁ・・・」

という方、DMMが運営する「WEBCAMP エンジニア転職」をご検討してみてはいかがですか？

「WEBCAMP エンジニア転職」では最短12週間でITエンジニアを目指すことが可能です！

WEBCAMPの卒業生は転職後に年収もUP！（例：年収250万円→500万円）

しかも今なら受講料の最大70%が給付金として支給されます。

DMM WEBCAMPは経済産業省・厚生労働省が認定した専門実践教育訓練給付金制度の対象です

DMM WEBCAMPについてもっと詳しく

配列の末尾から要素を削除する方法：pop()

配列の最後の要素を削除したい場合は、pop()メソッドが最も適しています。このメソッドは元の配列を直接変更し、削除した要素を戻り値として返します。

pop()メソッドの基本的な使い方

pop()メソッドは、配列に対してpop()を呼び出すだけで、末尾要素が削除されます。

const fruits = ['りんご', 'バナナ', 'オレンジ'];
const removedItem = fruits.pop();

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

pop()メソッドの戻り値と注意点

pop()は削除した要素を戻り値として返すため、削除された値を後で使用したい場合に便利です。ただし、空の配列に対してpop()を実行すると、undefinedが返されることに注意が必要です。

const emptyArray = [];
const result = emptyArray.pop();
console.log(result); // undefined
console.log(emptyArray); // []（配列は空のまま）

配列の先頭から要素を削除する方法：shift()

配列の最初の要素を削除する場合には、shift()メソッドを使用します。前述したpop()と似ていますが、削除対象が先頭要素になる点が異なります。

shift()メソッドの基本的な使い方

shift()を実行すると、配列の先頭要素が削除され、残りの要素のインデックスが1つずつ前にシフトされます。

const colors = ['赤', '青', '緑', '黄色'];
const firstColor = colors.shift();

console.log(colors); // ['青', '緑', '黄色']
console.log(firstColor); // '赤'

shift()メソッドの戻り値と注意点

shift()もpop()と同様、削除した要素を戻り値として返します。また、空配列に対して実行すると、undefinedが返される点も同じです。

ただし、shift()は配列の全要素のインデックスを再計算するため、大きな配列ではpop()よりもパフォーマンスが劣る場合があります。

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.shift()); // 1
console.log(numbers); // [2, 3, 4, 5]

特定のインデックスの要素を削除する方法：splice()

任意の位置の要素を削除したい場合は、splice()メソッドを使います。こちらは削除だけでなく、要素の追加や置換もできる多機能メソッドです。

splice()メソッドの基本的な使い方

splice()の基本構文は、

array.splice(start, deleteCount)

です。以下のように、startは削除開始位置、deleteCountは削除する要素数を指定します。

const animals = ['犬', '猫', 'うさぎ', 'ハムスター', '鳥'];
const removed = animals.splice(2, 1); // インデックス2から1個削除

console.log(animals); // ['犬', '猫', 'ハムスター', '鳥']
console.log(removed); // ['うさぎ']

splice()を使って複数の要素を削除する方法

deleteCountパラメータを使えば、複数の要素を一度に削除できます。たとえば以下では、B、C、Dを削除しています。

const letters = ['A', 'B', 'C', 'D', 'E', 'F'];
const deletedLetters = letters.splice(1, 3); // インデックス1から3個削除

console.log(letters); // ['A', 'E', 'F']
console.log(deletedLetters); // ['B', 'C', 'D']

splice()を使って要素を削除しつつ追加する方法

splice()は削除と同時に、新しい要素を挿入することも可能です。splice()は、第3引数以降に挿入したい要素を指定します。

const months = ['1月', '2月', '4月', '5月'];
months.splice(2, 0, '3月'); // インデックス2に'3月'を挿入（削除は0個）

console.log(months); // ['1月', '2月', '3月', '4月', '5月']

// 削除と挿入を同時に行う
const days = ['月', '火', '木', '金'];
days.splice(2, 1, '水'); // インデックス2から1個削除して'水'を挿入
console.log(days); // ['月', '火', '水', '金']

特定の条件に一致する要素を削除する方法：filter()

条件に基づいて要素を削除したい場合は、filter()メソッドが適しています。このメソッドは元の配列を変更せず、条件を満たす要素のみで構成された新しい配列を作成します。

filter()メソッドの基本的な使い方

filter()は条件関数を引数として受け取り、その関数がtrueを返す要素のみを残した新しい配列を作成します。たとえば以下の例では、80以上の数字のみを出力しています。

const scores = [85, 92, 78, 96, 88, 74];
const passingScores = scores.filter(score => score >= 80);

console.log(scores); // [85, 92, 78, 96, 88, 74]（元の配列は変更されない）
console.log(passingScores); // [85, 92, 96, 88]

filter()を使って複数の要素を削除する方法

filter()を使えば、複数のような条件の組み合わせで、より複雑な削除処理も可能です。

const products = [
  { name: 'ノートPC', price: 80000, category: '電子機器' },
  { name: 'マウス',   price: 2000,  category: '電子機器' },
  { name: 'デスク',   price: 15000, category: '家具' },
  { name: 'チェア',   price: 25000, category: '家具' }
];

const names = products
  .filter(p => p.price >= 10000)   // 1万円以上だけ残す
  .map(p => p.name);               // 名前だけ取り出す

console.log(names);           // ['ノートPC', 'デスク', 'チェア']

【注意】filter()は元の配列を変更しない

filter()は非破壊的メソッドのため、元の配列は変更されません。削除された要素を除いた新しい配列が作成されるだけです。

const originalArray = [1, 2, 3, 4, 5];
const filteredArray = originalArray.filter(num => num > 3);

console.log(originalArray); // [1, 2, 3, 4, 5]（変更されない）
console.log(filteredArray); // [4, 5]（新しい配列）

ですが一方、たとえばsplice() や sort()のような「破壊的メソッド」は、元の配列を直接書き換えてしまいます。その感覚で filter() を使い、「元の配列から消えてるはずなのに残ってる！」と勘違いする方は多いので、注意しましょう。

インデックスを指定して要素を削除する方法（非推奨）：delete演算子

delete演算子を使用して配列要素を削除することも技術的には可能ですが、一般的には推奨されていません。

delete演算子の使い方

delete演算子は配列の特定のインデックスの要素を削除できます。

const items = ['アイテム1', 'アイテム2', 'アイテム3', 'アイテム4'];
delete items[2];

console.log(items); // ['アイテム1', 'アイテム2', undefined, 'アイテム4']
console.log(items.length); // 4（配列の長さは変わらない）

【重要】なぜdeleteは非推奨なのか？

delete演算子を使うと、削除された位置にundefinedが残り、配列に「穴」ができてしまいます。これにより配列の長さは変わらず、ループ処理などで予期しない動作を引き起こす可能性があるからです。

また、undefinedの要素が残ることで、配列の連続性が失われてしまうのも、理由のひとつです。

const testArray = [10, 20, 30, 40];
delete testArray[1];

console.log(testArray); // [10, undefined, 30, 40]

// for...inループでundefinedもカウントされる
for (let i in testArray) {
  console.log(i, testArray[i]); // 1番目でundefinedが出力される
}

各メソッドの比較：目的別使い分け早見表

各メソッドを、目的別の使い分け比較表としてまとめたものが以下になります。

この章では、上記それぞれを解説していきます。

「配列の末尾を削除したい」なら → pop()

末尾要素の削除にはpop()が最適です。処理速度が速く、削除した要素も取得できるためです。

実際の現場でも、スタック構造を実装する際などによく使用されます。

「配列の先頭を削除したい」なら → shift()

先頭要素の削除をしたいときには、shift()を使用します。キューの実装や、配列の先頭から要素を順次処理する場合に適しています。

「特定の場所の要素を削除したい」なら → splice()

任意の位置の要素削除には、splice()が適しているでしょう。単一要素だけでなく、複数要素の削除や、削除と同時に新要素の挿入も可能なのが特徴です。

「条件に合う要素をまとめて削除したい」なら → filter()

条件に基づく要素の削除にはfilter()が適しています。元配列を保持したまま、条件を満たす要素のみの新配列を作成できます。

よくある質問と補足

配列要素の削除に関してよく寄せられる質問と、その解決方法をご紹介します。

配列から重複する要素を削除する方法は？

重複要素の削除には、Setオブジェクトとfilter()を組み合わせる方法が効果的です。

const numbersWithDuplicates = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbersWithDuplicates)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

// またはfilterを使用
const uniqueByFilter = numbersWithDuplicates.filter((item, index) =>
  numbersWithDuplicates.indexOf(item) === index
);

Setは重複を許さないコレクションなので、自動的に重複が消えます。パフォーマンス・読みやすさを考えると、Setを使うのが一番シンプルで高速なやり方といえるでしょう。

配列から複数の要素をまとめて削除する方法は？

方法はいくつかありますが、大きく分けると「位置で削除する」と「条件で削除する」の2種類があります。まず、一を指定して削除する方法ですが、splice()を使うと、「何番目から」「いくつ」削除するかを指定できます。

const numbers = [1, 2, 3, 4, 5, 6, 7];

// インデックス2から3個削除（3, 4, 5が消える）
numbers.splice(2, 3);

console.log(numbers); // [1, 2, 6, 7]

次に条件で削除する方法ですが、filter()を使うと、条件を満たす要素だけ残せます。つまり「条件に当てはまらない要素は削除される」イメージです。

const words = ['apple', 'banana', 'cherry', 'date'];

// 文字数が5文字以下の要素だけ残す
const filtered = words.filter(word => word.length <= 5);

console.log(filtered); // ['apple', 'date']

【応用】配列から特定の要素を検索して削除する手順

1つだけ削除したいなら、indexOf() と splice() を使う方法があります。また、同じ値が複数あってそれを削除したいなら、filter() の方がシンプルです。

まず、indexOf() と splice() を使う方法です。

const playlist = ['曲A', '曲B', '曲C', '曲D'];
const targetSong = '曲B';

// '曲B' が配列の何番目にあるか調べる
const index = playlist.indexOf(targetSong);

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

console.log(playlist); // ['曲A', '曲C', '曲D']

indexOf()は、最初に見つかった位置を返しています。そしてsplice(index, 1)で、その要素を1つだけ削除しています。

次に、複数の値を消すfilter()を使う方法です。

const allNumbers = [1, 2, 3, 2, 4, 2, 5];

//「2ではないもの」だけを残す
const filteredNumbers = allNumbers.filter(num => num !== 2);

console.log(filteredNumbers); // [1, 3, 4, 5]

こちらは条件に合わない要素を全部取り除き、かつ元の配列はそのまま残した状態で、新しい配列が作られます。繰り返し出てくる要素を「まとめて削除」したいときに便利です。

プログラミングを学ぶならDMM WEBCAMP

JavaScriptを勉強しているものの、

「思うように進まない」

「基礎はわかったつもりでも、実際に手を動かすとわからない」

そういった悩みを抱えている方は多いと思います。

DMM WEBCAMPのはじめてのプログラミングコースは、未経験からでも体系的にプログラミングを学べるオンラインスクールです。独学では解決に時間がかかるエラーや理解しづらい概念も、現役エンジニアのメンターがサポートしてくれるため、学習の停滞を防ぎながら確実にスキルを積み上げられます。

また、経済産業省が認定したリスキリング講座となっているので、受講料が最大で70%オフになるなど、金銭面でも安心です。

「今のまま独学を続けて本当に身につくのか不安」

「キャリアチェンジやスキルアップのために、最短で成果を出したい」

このように考えている方は、ぜひお気軽に無料カウンセリングにご相談ください！

＞＞はじめてのプログラミングコースの詳細はこちら

まとめ

JavaScript配列の要素削除には、それぞれ異なる特性を持つ手法があります。

• 末尾削除ならpop()
• 先頭削除ならshift()
• 任意位置ならsplice()
• 条件削除ならfilter()

各メソッドの動作原理と特徴を理解し、状況に応じて使い分けることで、より効率的で読みやすいコードが書けるようになります。配列操作はJavaScriptプログラミングの基礎となる重要なスキルですので、ぜひ実際にコードを書いて練習してみてください。