【JavaScript入門】配列要素を削除する方法のすべて！

こんにちは、ライターのマサトです！

今回は、配列要素を削除するための方法について学習をしていきましょう。よく似たメソッドがいくつか出てくるので、それぞれの特性や使い分けについてしっかり学べるように構成しました。

この記事では、

などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、配列要素の削除方法をしっかり学習して自分のスキルアップを目指しましょう！

JavaScript初心者におすすめの 無料プログラミングサイト3選

	1位：侍テラコヤ	2位：Progate	3位：ドットインストール
サイト名
学べる内容	JavaScript、HTML/CSS、jQuery、Bootstrap、PHP、Laravel、Ruby、Ruby on Rails、Python、Java、WordPress、Cloud9、Git、AWS 、ChatGPT、Webデザインなど	JavaScript、HTML/CSS、PHP、Ruby、Python、Java、Go、Git、SQL など	JavaScript、HTML/CSS、Ruby、Python、Java、C言語 など
質問 相談サポート
練習問題の数
特徴	現役エンジニアとのマンツーマンレッスン 回答率100%のQ&A掲示板が使い放題 実践的なスキルを身につけられる課題機能	環境構築をしなくても学べる イラスト付きのスライド式教材　　　スマホアプリでも学べて手軽	レッスン動画でインプット可能 3分の簡単な動画で手軽に学べる 有料プランなら質問ができる
詳細	公式サイト	公式サイト	公式サイト

これからJavascriptのスキルを向上させていきたい方に向けて、おすすめのJavascript学習サイト16選を別で紹介しているので、そちらもぜひ参考にしてみてください。

Javascriptのおすすめ学習サイト16選！選ぶコツや注意点を解説

更新日：2024年3月1日

配列要素の「削除」とは？

それでは、まず最初に配列要素の「削除」について基本的な知識から勉強していきましょう！　配列は通常の変数と違って複数の値を格納しているのが特徴です。

var items = [1, 2, 3, 4, 5];

console.log( items[2] ); // => 3

そのため、配列要素を削除する場合は「何番目の値を削除するか？」というのが重要なポイントになります。JavaScriptでは、配列要素の先頭や末尾・特定の要素を指定しての削除などさまざまなメソッドが用意されています。

本記事では、それぞれの特徴や使い分けについて体系的に学べるように構成しているのでぜひ参考にしてみてください！

プログラミング初心者は学習サイトを登録するのがおすすめ

初心者が効率的にプログラミングを学習するには、プログラミング学習サイトを使うのがおすすめです。

無料で使用できるものであれば、余計な費用をかけることなく効率的に勉強することができ、他の人よりも早くスキルアップすることが可能になります。

無料で現場で活躍しているプロのエンジニアに相談ができる学習サイトなどもあるため、気になった方はぜひ利用してみるとよいでしょう。

＼　現役エンジニアと1on1レッスンが可能！／
侍テラコヤ詳細を見る

「shift()」による削除

この章では、「shift()」メソッドを使った配列要素の削除方法について学習しましょう。構文や基本的な使い方から、返り値の取得方法や削除された要素の再追加について見ていきます。

「shift()」の構文と書き方について

まずは、「shift()」メソッドの構文と基本的な書き方について学習しましょう！

使い方は非常に簡単で、配列データに「shift()」メソッドを付与するだけで利用できます。一般的な使い方の構文は次の通りです！

var items = 配列データ;

items.shift();

このように、配列データに「shift()」メソッドを付与するだけです。これにより配列要素の「先頭」にある値だけが削除され、後ろの要素は先頭に詰められます。（インデックス番号も更新されます）

配列要素を「shift()」で削除する方法

それでは、実際に「shift()」メソッドを使った削除方法を試してみましょう！　サンプル例として、いくつかの文字列を格納した配列要素を削除してみます。

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

//配列の先頭要素を削除する
items.shift();

console.log( items );

実行結果

["メロン", "イチゴ", "スイカ"]

このサンプルでは、配列要素の先頭にある「リンゴ」だけが削除されているのが分かります。これにより、「items[0]」の値が「メロン」へと変更されており、配列データから「リンゴ」が完全に削除されたことになります。

返り値を使った要素の取得方法

「shift()」メソッドは、返り値として削除した要素を取得することもできます。これによりJavaScript側で削除した配列要素の値を制御することができるようになります。

次のサンプル例を見てください！

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

//削除した要素を返り値として「result」に代入する
var result = items.shift();

console.log( result );

実行結果

リンゴ

この例では、配列要素を「shift()」で削除して変数「result」に代入しているのがわかります。結果的に、配列の先頭にあった「リンゴ」要素を返り値として受け取っているのが実行結果からも分かります。

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

削除した配列要素を「unshift()」で再追加する方法

今度は、削除した配列要素を再び配列へ追加する方法を見ていきましょう！　これを実現するには、「shift()」メソッドの逆である「unshift()」を活用する必要があります。

次のサンプル例を見てください！

var items = ['メロン', 'イチゴ', 'スイカ'];
var target = items.shift();

items.unshift( target );

console.log( items );

実行結果

['メロン', 'イチゴ', 'スイカ']

この例では、まず最初にこれまで通り「shift()」メソッドで配列要素の先頭を削除します。その削除した値を「unshift()」メソッドで再び配列要素の先頭に追加しているのです。実行結果を見ると、先頭の値が再び元に戻っているのがわかりますね。

「pop」による削除

この章では、「pop()」メソッドを使った配列要素の削除方法について見ていきましょう！　基本的な構文から削除例および返り値の取得方法まで学んでいきます。

「pop()」の構文と書き方について

まずは、「pop()」メソッドの基本的な構文と書き方について見ていきましょう！　使い方は、先ほど学んだ「shift」と同じなので簡単です。

一般的な構文は次のとおりです！

var items = 配列データ;

items.pop();

配列データに「pop」メソッドを繋げれば、要素の末尾だけが削除されます。「shift()」メソッドが配列要素の先頭だけを削除するので、よくペアで使われることもあります。

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

配列要素を「pop()」で削除する方法

次に、実際のサンプル例で具体的な使い方を見てみましょう！

いくつかの文字列が格納された配列に「pop()」を使う例は次の通りです！

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

items.pop();

console.log( items );

実行結果

["リンゴ", "メロン", "イチゴ"]

このサンプルでは、配列データに「pop」メソッドを付与して、要素の末尾にある「スイカ」だけを削除されているのが分かります。

返り値を使った要素の取得方法

「pop()」メソッドも返り値を取得することが可能です。返り値は、配列要素を削除した末尾の値を受けとることが出きるようになります。

次のサンプル例を見てください！

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

var result = items.pop();

console.log( result );

実行結果

スイカ

この例では、配列要素の末尾にある「スイカ」を削除して、その要素を「result」に代入しています。結果的に「スイカ」要素を取得できているのが実行結果からも分かりますね。ちなみに、「pop」メソッドにも反対の意味である「要素の追加」として「push」メソッドが提供されています。

次の記事では、「push」メソッドのさまざまな使い方を詳しく解説しているので、ぜひ参考にしてみてください！

【JavaScript入門】pushで配列に要素を追加する方法(連想配列/pop)

更新日：2024年4月29日

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

配列の指定要素を削除

この章では、「splice()」メソッドを使った配列要素の削除について見ていきましょう！　基本的な構文や削除方法、複数の配列要素の削除や置換について学んでいきます。

「splice()」の構文と書き方について

まずは、「splice()」メソッドの基本的な構文から見ていきましょう！「splice()」を使うと、配列要素内の指定した要素だけを削除することができるようになります。

一般的な構文は次のとおりです。

var items = 配列データ;

items.splice( 開始位置, 要素数 );

「開始位置」で、配列内の削除したい要素のインデックス番号を指定し、何個の要素を削除するかを「要素数」で指定します。これにより、１つだけでなく複数の配列要素を削除することが可能になります。

指定した配列要素を削除して詰める方法

それでは、実際に「splice()」メソッドを使った配列要素の削除例を見ていきいましょう！

次のサンプル例を見てください！

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

//1番目の要素を削除する
items.splice( 1, 1 );

console.log( items );

実行結果

["リンゴ", "イチゴ", "スイカ"]

このサンプルでは、配列「items」の1番目の要素「メロン」を削除しています。「splice( 1, 1 )」と記述することで、１番目の要素を１個だけ削除するという意味になります。要素を削除すると、後ろの要素が詰められて新しい配列として上書きされるのが特徴です！

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

複数の配列要素を削除する方法

次に、「splice()」メソッドの特徴を活かして、複数の配列要素を削除してみましょう！　具体的には、第２引数の個数を変更することで複数要素の削除に対応していきます。

次のサンプルを見てください！

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

//1番目から2個の要素を削除した値を「result」に代入
var result = items.splice( 1, 2 );

console.log( result );

実行結果

["メロン", "イチゴ"]

変数「result」に、削除した要素「メロン」「イチゴ」が代入されているのが分かりますね。このように、第２引数の個数を変化させることで複数の要素に対応した削除が実現します。

「splice()」で置換を行う方法

「splice」は削除だけでなく「置換」を行うことも可能でご紹介しておきます！　実は、「splice()」には第3引数を設定することが可能で「置換要素」を指定できます。

具体的には、次のサンプルを見てください！

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

//1番目の要素を「ブドウ」に置き換える
items.splice( 1, 1, 'ブドウ' );

console.log( items );

実行結果

["リンゴ", "ブドウ", "イチゴ", "スイカ"]

この例では、１番目の要素を抽出して「ブドウ」という文字列に置換しています。第3引数に置換したい値を指定することで、その要素に置き換わるようになるわけです。配列要素に「追加」するのではなく、あくまで「置換」であるという点に注意しましょう！

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

「delete」による削除

この章では、「delete」演算子による配列要素の削除方法を見ていきましょう！　基本的な削除方法、返り値の取得方法、連想配列の削除について学んでいきます。

「delete」演算子で配列要素を削除する方法

まずは、「delete」演算子を使った基本的な削除方法について見ていきましょう！　「delete」は、対象となる配列要素を続けて記述するだけで削除できます。ただし、注意するポイントもあるので一緒に詳しく見てみましょう。

まずは、次のサンプル例を見てください！

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

delete items[1];

console.log( items[1] );

実行結果

undefined

このサンプルでは、「delete」演算子を使って要素の1番目（items[1]）を削除しています。その結果として「undefined」が返っているのが実行結果からも分かりますね。ただし、注意が必要なのは、「delete」で削除した配列要素の「インデックス番号」は変わらないという点です！

次のサンプルを見てください！

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

delete items[1];

console.log( items );

実行結果

["リンゴ", undefined, "イチゴ", "スイカ"]

実行結果に注目してください！

1番目の要素は確かに削除されているのですが、値が「undefined」になっているだけでインデックス番号に変化はありません。このような仕様を知らないで使うと、思わぬバグに悩まされるので気をつけましょう！

返り値を「true / false」で取得する

「delete」演算子も返り値を取得することが可能なのでご紹介しておきます！　「delete」の返り値は、削除に成功したかどうかを「true / false」で取得することになります。

この事実を、簡単な例で確認してみましょう！

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

var result = delete items;

console.log( result );

実行結果

false

「delete」演算子は、配列の各要素を削除できるのですが配列全体を削除することはできません。その証拠として、このサンプルでは配列全体を「delete」演算子で削除しようとしていますが、結果として「false」が返っているのが分かります。
（この場合、削除処理は行われません）

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

連想配列のキーを削除する方法

今度は、連想配列の削除について見ていきましょう！

JavaScriptにおける連想配列は、基本的にオブジェクト構造と同じで次のようになります。

var myUser = { name: '太郎', age: 32, tel: '090-1234-5678' };

このような「キー」と「値」がペアになった連想配列があるとします。

例えば、「age」というキーの要素を削除するには次のように記述します。

//チェーンで指定する方法
delete myUser.age;

//添字で指定する方法
delete myUser['age'];

このように種類の削除方法があります。

「.（ドット）」を使ってキーをチェーンで繋いで指定するか、添字を使う方法によって削除可能です。

一般的にキーが文字列のような場合には添字による指定方法が適しているでしょう。

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

「filter()」による削除

この章では、「filter()」による配列要素の削除方法について見ていきいましょう！　基本的なループ処理による削除方法と、特定の複数要素を抽出して削除する手法について学んでいきます。

「filter()」のループ処理で配列を削除する書き方

まずは、「filter()」を使った基本的なループ処理の方法について見ていきましょう！「filter()」を使うと、配列要素内の値を検索しながら指定の要素だけを抽出して削除することが可能です。

次のサンプル例を見てください！

var items = ["リンゴ", "バナナ", "メロン", "バナナ"];

var result = items.filter(function( item ) {
  
  return item === 'バナナ';
  
});

console.log( result );

実行結果

["バナナ", "バナナ"]

「filter()」メソッド内の処理に注目してください！

文字列「バナナ」と引数「item」を比較することで、配列要素に含まれる「バナナ」だけを抽出しています。実行結果を見ると、見事に「バナナ」だけが抽出されて他の値は削除されているのが分かりますね。ちなみに条件式を「item !== ‘バナナ’」のように否定にすれば、バナナだけを削除することも可能です！

まとめ

今回は、JavaScriptで配列要素の削除を行う方法について学習しました！

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！