プログラミングで様々なデータを扱っていると、必ずと言っていいほど配列型のデータを扱う機会があります。
JavaScriptでも配列を扱う機会は多く、Webページに対する操作でも頻繁に使うことになります。
そこで今回の記事では、JavaScriptで配列の不要になった要素を削除するための様々な方法について紹介していきます！
- 配列要素の「削除」とは？
- 「shift()」による削除
- 「pop()」による削除
- 「delete」による削除
- 「filter()」による削除
など、多岐に渡る内容で解説していきますので、せひ参考にしてみてください！
配列要素の削除とは？
詳しい使い方の解説をする前に、そもそも配列とは何か、配列要素を削除するとはどういうことなのかついて、基礎の部分をざっくりと説明していきます。
まず配列とは、複数の値を一つの塊として扱う変数のことを指します。
配列内に用意された値を格納するための場所を要素と呼び、一つ一つの要素にはインデックス番号が順に割り振られています。以下の例のように、各要素に対応する番号を指定することで、その場所に格納されたデータにアクセスすることができます。
【サンプルコード】
let items = ['A', 'B', 'C', 'D'];
console.log(items[1]); // => B配列要素の削除とは、この複数ある要素の中からいずれかを指定して、配列から取り除くことを言います。
配列には要素を削除するための様々なメソッドが用意されていますが、メソッドごとに削除できる要素の位置や数が異なるため、用途によって使い分けることが重要なポイントになってきます。
それぞれの特徴や詳しい使い方について解説していきますので、ぜひ最後まで読んでみてください。
shift()メソッドで先頭の要素を削除する
まず最初に、「shift()」メソッドでの削除方法について解説していきます。
shiftメソッドは、配列内の先頭にある要素を一つ削除するメソッドです。位置や数の指定はできないかわりに、コードを簡潔に済ませることができるのが特徴です。
shift()メソッドの使い方と基本構文
shiftメソッドの使い方は簡単で、要素を削除したい配列名の後ろに「.shift()」と付けるだけで削除ができます。
【基本構文】
配列名.shift();メソッドを使用すると、配列内の先頭要素（インデックス番号でいうと0番）が削除され、それ以降の要素は前に詰められてインデックス番号が更新されます。
サンプルコードを見ていきましょう。
【サンプルコード】
let items = ['東京', '大阪', '北海道', '静岡'];
console.log('削除前：' + items);
console.log('先頭 ：' + items[0]);
//先頭の要素を削除
items.shift();
console.log('削除後：' + items);
console.log('先頭 ：' + items[0]);【実行結果】
"削除前：東京,大阪,北海道,静岡"
"先頭 ：東京"
"削除後：大阪,北海道,静岡"
"先頭 ：大阪"shift()メソッドの返り値から先頭の要素を取得する
shiftメソッドは、削除した要素のデータを返り値として取得することもできます。
サンプルコードで実際の動きを見てみましょう。
【サンプルコード】
let items = ['東京', '大阪', '北海道', '静岡'];
//削除したデータを変数に代入
let val = items.shift();
console.log('削除した内容：' + val);【実行結果】
"削除した内容：東京"変数の代入式にshiftメソッドを使用することで、配列の先頭に格納されていた「東京」の文字列が「val」に格納されました。
このように、メソッドを使って値を取得することもできます。
unshift()メソッドで配列の先頭に要素を追加する
shiftメソッドとは反対に、配列の先頭に新しく要素を追加する「unshift()」というメソッドがあります。
unshiftメソッドを使用する際の基本構文は次の通りです。
【基本構文】
配列名.unshift(値);shiftメソッドの場合、一度に削除できる要素は一つのみですが、unshiftメソッドでは複数の値を同時に追加することもできます。
実際にメソッドを使用した場合の動きを、以下のサンプルコードで見てみましょう。
【サンプルコード】
let items = ['東京', '大阪', '北海道', '静岡'];
console.log('追加前：' + items);
console.log('先頭 ：' + items[0]);
//先頭に要素を追加
items.unshift('沖縄', '熊本');
console.log('追加後：' + items);
console.log('先頭 ：' + items[0]);【実行結果】
"追加前：東京,大阪,北海道,静岡"
"先頭 ：東京"
"追加後：沖縄,熊本,東京,大阪,北海道,静岡"
"先頭 ：沖縄"shiftメソッドでは先頭の要素が削除されていたのに対し、unshiftメソッドは新しく要素が追加されているのが分かると思います。
追加後にそれぞれのインデックス番号が変更されるのは、shiftとunshiftのどちらも同じです。unshiftメソッドの場合は、既存の要素がそれぞれ一つずつ後ろにずらされます。
pop()メソッドで末尾の要素を削除する
続いて、「pop()」メソッドを使った削除方法について解説していきます。
popメソッドは、配列内の末尾にある要素を一つ削除するメソッドです。
shiftメソッドと仕様が似ているのが特徴で、削除する要素の位置が異なる以外はほとんど同じ要領で扱うことができます。
また、一般的にプログラミング言語で末尾の要素を削除することを「ポップする」と表現することもありますので、この機会に覚えておきましょう。反対に、要素を末尾に追加することは「プッシュする」と表現します。
pop()メソッドの使い方と基本構文
popメソッドを使用する際の基本構文は次の通りです。
【基本構文】
配列名.pop();shiftメソッドと同様に、配列名の後に「.pop()」と付けるだけで簡単に削除することができます。
以下のサンプルコードで、具体例を見てみましょう。
【サンプルコード】
let items = ['東京', '大阪', '北海道', '静岡'];
console.log('削除前：' + items);
//末尾の要素を削除
items.pop();
console.log('削除後：' + items);【実行結果】
"削除前：東京,大阪,北海道,静岡"
"削除後：東京,大阪,北海道"popメソッドを使用したことで、末尾に格納されていた「静岡」の文字列が削除されました。
shiftメソッドの場合は、それぞれの要素が前に詰められることでインデックス番号が更新されていましたが、popメソッドは末尾の要素を削除するため、配列内の要素数が減るだけで既存要素の番号に変わりはありません。
pop()メソッドで削除した要素を返り値から取得する
popメソッドも、shiftメソッドと同様に返り値を取得することができます。
以下のサンプルコードで確認してみましょう。
【サンプルコード】
let items = ['東京', '大阪', '北海道', '静岡'];
//削除したデータを変数に代入
let val = items.pop();
console.log( '削除した内容：' + val );【実行結果】
"削除した内容：静岡"popメソッドの返り値を使用して、変数「val」に値を代入することができました。
push()メソッドで配列の末尾に要素を追加する
popメソッドにも、対となる追加用のメソッドが存在します。
配列の末尾に要素を追加したい場合には、「push()」メソッドを使用します。
【サンプルコード】
let items = ['東京', '大阪', '北海道', '静岡'];
console.log('追加前：' + items);
//末尾に要素を追加
items.push('沖縄', '熊本');
console.log('追加後：' + items);【実行結果】
"追加前：東京,大阪,北海道,静岡"
"追加後：東京,大阪,北海道,静岡,沖縄,熊本"このサンプルからも分かるように、pushメソッドを使用する場合もまた、複数の値を同時に追加することが可能です。
splice()メソッドで配列の中の指定した要素を削除する
次に、「splice()」メソッドを使った削除方法について解説をしていきます。
spliceメソッドもまた、配列要素を削除するためのメソッドの一つです。
先ほど紹介したshiftメソッドやpopメソッドが、固定位置の要素を一つだけ削除するメソッドだったのに対し、任意の箇所の要素を複数削除できるのがspliceメソッドの大きな特徴です。
splice()メソッドの使い方と基本構文
spliceメソッドを使用する場合は、削除したい要素の位置と数を引数で指定する必要があります。
【基本構文】
配列名.splice( 開始位置, 要素数 );開始位置には、削除したい要素のインデックス番号を指定します。その位置から、要素数で指定した数の分だけ順に要素を削除します。
例えば、splice( 0, 2 )と指定した場合、配列内の０番と１番の二つの要素を削除することになります。
spliceメソッドを使用した場合の実際の動きを、以下のサンプルコードで見てみましょう。
【サンプルコード】
let items = ['東京', '大阪', '北海道', '静岡'];
console.log('削除前：' + items);
//指定の要素を削除
items.splice( 1, 1 );
console.log('削除後：' + items);【実行結果】
"削除前：東京,大阪,北海道,静岡"
"削除後：東京,北海道,静岡"引数の開始位置に1を指定をしているため、1番の要素に格納されている「大阪」の文字列が削除されています。
要素数も同じく1を指定しているので、「大阪」のみが削除され、それ以外の要素は残ったままとなっています。
splice()メソッドで要素を削除する際のポイントと応用方法
spliceメソッドを使用して要素を削除すると、shiftメソッドの時と同様に削除した部分から後ろの要素が詰められ、インデックス番号が更新されます。
また、次の項目でも紹介しますが、spliceメソッドは一度に複数の要素を削除することができるので、削除後のインデックス番号や要素数に注意しながら使用しましょう。
続いて、spliceメソッドならではの応用的な使い方について解説していきます。
第2引数の個数を変更して複数の要素を削除する
既に何度か説明していますが、shiftメソッドやpopメソッドと異なる大きな特徴の一つとして、spliceメソッドは複数の要素を一度に削除することができます。
先ほどのサンプルでは、一つの要素を削除する場合のコードをお見せしましたが、今度は複数の要素を削除する場合のサンプルを紹介します。
【サンプルコード】
let items = ['東京', '大阪', '北海道', '静岡'];
console.log('削除前：' + items);
//指定の要素を削除
items.splice(1, 3);
console.log('削除後：' + items);【実行結果】
"削除前：東京,大阪,北海道,静岡"
"削除後：東京"要素数を変更したことで、削除された文字列が三つに増えているのが分かると思います。
このように、引数に二つ以上の要素数を指定することで、同時に複数の要素を削除することができます。
第3引数を指定すると要素の置換が可能
メソッドを使用する際に、第三引数以降に任意の値を指定すると、指定した箇所のデータとその値を置換することができるのです。
以下のサンプルコードを見てください。
【サンプルコード】
let items = ['東京', '大阪', '北海道', '静岡'];
console.log('置換前：' + items);
//指定の要素を置換
items.splice(0, 2, '千葉', '京都');
console.log('置換後：' + items);【実行結果】
"削除前：東京,大阪,北海道,静岡"
"削除後：千葉,京都,北海道,静岡"引数に指定した文字列が、それぞれ対応する要素と置換されています。置換できる数に限りはないので、指定した値の分だけ置き換えることができます。
また、削除する要素数を０にすることで、置換は行わずに新たに要素を追加することも可能です。
delete演算子で指定した要素を削除する
次は、配列に用意されているメソッドではなく、演算子の一つである「delete」を使用して削除する方法を紹介します。
基本的な使い方や応用方法について確認していきましょう。
delete演算子の使い方と基本構文
delete演算子は、指定したオブジェクのプロパティを削除する演算子です。
以下のように記述することで、簡単に配列の要素を削除することができます。
【基本構文】
delete 配列名[インデックス番号];以下のサンプルコードで、実際の動きを見てみましょう。
【サンプルコード】
let items = ['東京', '大阪', '北海道', '静岡'];
console.log(items);
//指定の要素を削除
delete items[0]
console.log(items);delete演算子を使用して要素を削除する場合、気を付けるべき点が一つあります。
これまで紹介したメソッドは、配列内の要素を完全に削除するため、使用後の配列は要素数が減少し、インデックス番号も必要に応じて更新されていました。
ところが、上の実行結果を見ると分かるように、delete演算子の場合は「undefined」が代わりに入ります。そのため、削除を行った後も要素数やインデックス番号は更新されません。
記述したコードの内容によっては、予期せぬ不具合を生む可能性もあるので、使用する場合には注意が必要です。
delete演算子の返り値を取得する
delete演算子もまた、メソッドの場合と同様に返り値を取得することが可能ですが、削除された値ではなく論理型（Boolean）が返されます。削除に成功した場合は「true」、失敗した場合には「false」が返却されます。
以下のサンプルコードで動きを見てみましょう。
【サンプルコード】
let items = ['東京', '大阪', '北海道', '静岡'];
//失敗例
let valF = delete items;
console.log(valF);
//成功例
let valT = delete items[0]
console.log(valT);【実行結果】
false
true余談ですが、delete演算子では配列の変数そのものを削除対象とすることはできません。そのため、変数を削除しようとして失敗し、falseが返却されています。（この場合、削除処理は行われません）
一方で、要素ごとの削除は可能なため、インデックス番号を指定した場合にはtrueが返却されています。
連想配列のキーを削除する
続いて、delete演算子で連想配列のキーを削除する方法について解説していきます。
連想配列とは、自動で割り振られるインデックス番号の代わりに、任意の文字列をキーとして指定することができる配列です。
基本構造は以下のような形になります。
【連想配列の例】
let userArr = {name: '太郎', age: 32, gender: '男'};連想配列の要素を削除したい場合にも、delete演算子を使用します。
以下がそのサンプルコードです。
【サンプルコード】
let userArr = {name: '太郎', age: 32, gender: '男'};
console.log(userArr);
//「.」で指定する方法
delete userArr.age;
//添字で指定する方法
delete userArr.gender;
console.log(userArr);【実行結果】
[object Object] {
age: 32,
gender: "男",
name: "太郎"
}
[object Object] {
name: "太郎"
}削除するキーを指定する方法は二つあります。
一つは「.（ドット）」を使って指定する方法、もう一つは添字で指定する方法です。
使用後の結果はどちらも同じなので、開発時のルールに従って適した方を使うといいでしょう。
なお、今回の例で使用した連想配列の書き方は、オブジェクト（Object）型のオブジェクトとして扱われるものです。そのため、実行結果では出力されているデータの形式が [object Object] と表示されています。
他にも、JavaScriptでは一意に定まるキーと値の組み合わせで構成されるマップ（Map）型のオブジェクトも存在します。
ObjectとMapはどちらも連想配列に似ていますが、特に一般的なプログラミング言語での連想配列に近い形で操作できるのはMapオブジェクトです。
filter()メソッドで特定の要素を抽出して削除する
続いて、「filter()」メソッドを応用して要素を削除する方法を紹介します。
filterメソッドは、配列内の要素を指定の条件で絞り込むために使用するメソッドです。
このメソッドを使うと、引数に渡した配列内の要素を反復処理して、指定した条件を満たす要素のみで構成した配列を新たに返してくれます。
以下のサンプルコードで、具体的な使用方法を見ていきましょう。
【サンプルコード】
let numbers = [1, 3, 11, 5, 8, 9, 2]
//5よりも大きい数値の要素を抽出
let resultArr = numbers.filter(function(val) {
return val > 5;
});
console.log(resultArr);【実行結果】
[11, 8, 9]filterメソッドの()内には、配列の各要素を引数として使用する関数を指定します。
関数内の処理で絞り込みたい条件を指定することで、条件に合った要素のみが抽出され、結果としてその他の要素が削除された配列を新たに取得することができます。
【応用】元の配列を変更せずに、要素を削除したあとの配列を取得するには？
要素の削除を行う時、元の配列には変更を加えず、削除した結果を別で保有したいケースもあるかと思います。
先ほどのfilterメソッドでも対応は可能ですが、条件指定では対応が難しい場合も中にはあります。その際に有用な方法の一つが、「slice()」メソッドを使う方法です。
sliceメソッドは、引数に開始位置と終了位置を指定することで、対応する箇所の要素を新しい配列として返してくれます。
その結果として、指定範囲外の要素が削除された配列を取得することができます。
【基本構文】
配列名.slice(開始位置, 終了位置)例えば、 slice(0, 2) と指定した場合、0番と1番の要素を含む新たな配列を取得することができます。
終了位置で指定した番号の要素は配列には含まれないので、指定の際には注意が必要です。
以下のサンプルコードで具体例を見てみましょう。
【サンプルコード】
let numbers = [1, 3, 11, 5, 8, 9, 2]
//5よりも大きい数値の要素を抽出
let resultArr = numbers.slice(1, 5);
console.log(resultArr);
console.log(numbers);【実行結果】
[3, 11, 5, 8]
[1, 3, 11, 5, 8, 9, 2]結果を見ると、元の配列は変わらないままに、別の配列として取得できているのが分かると思います。
オブジェクトのシャローコピーとディープコピー
配列を含むオブジェクト型は、他の変数に代入してコピーした場合に、コピー元と同じデータ先を参照します。そのため、片方の変数に変更を加えると、もう片方の変数にも影響を及ぼしてしまいます。
この問題を解決する際に使用するのが、シャローコピーとディープコピーです。
シャローコピー、ディープコピーとは、コピー元を参照する深さの度合いによって変わる呼び名のことです。
シャローコピーは、一次元配列などのネストされていない要素のみ、コピー元と参照を切り離してくれる特徴があります。
例えば、arr = [ 1, 2, [10, 20] ] といったように、入れ子状態になっている配列があるとします。
この配列がシャローコピーされた場合、０番目と１番目の要素は変更を加えてもコピー元に影響を与えませんが、２番目に格納されている配列内の要素に変更を加えると、コピー元の同じ要素にも変更が加えられます。
先ほど紹介したsliceメソッドなどは、このシャローコピーを使用して要素のコピーが行われています。
一方で、ディープコピーは全ての要素がコピー元を参照せずに切り離されます。
先ほどと同じ例で変更を加えた場合、ディープコピーで複製された変数では、入れ子になっている配列の要素を変更しても元の配列に変更は加えられません。
sliceメソッドが必ずシャローコピーされるように、使用するメソッドなどで挙動が変わるため、使用の際には注意が必要です。
toSpliced()メソッドで要素を削除したあとの配列を作成する
先ほどは、元の配列に変更を加えずに要素を削除する方法としてsliceメソッドを紹介しましたが、その他にも「toSpliced()」メソッドを使用する方法があります。
使用はSplicedメソッドとほぼ同じですが、元の配列に変更を加えずに新たな配列として取得できる特徴があります。
【サンプルコード】
let numbers = [1, 3, 11, 5, 8, 9, 2]
let resultArr = numbers.toSpliced(0, 5, 20);
console.log(resultArr);
console.log(numbers);【実行結果】
[20, 9, 2]
[1, 3, 11, 5, 8, 9, 2]状況に応じて使い分けるといいでしょう。
まとめ
今回は、配列要素を削除する方法について解説しました。
状況に応じて使用できるメソッドが多いため、慣れないうちは使い分けが難しいと感じてしまうかもしれませんが、色々と試しながら覚えていきましょう！
関連記事
- JavaScriptとは？初心者向けにできることや基本的な書き方を解説
- JavaScriptが初心者におススメな理由を現役プログラマーが解説
- 【JavaScript入門】簡単なサンプルコードを実行して習得
- 【JavaScript入門】getElementByIdの使い方をわかりやすく徹底解説
JavaScriptの勉強方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
