JavaScriptの配列(array)の要素を削除(remove)する方法について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptの配列(array)の要素を削除(remove)する方法について解説しています。Arrayオブジェクトのspliceメソッドを使うことで配列の要素を削除することができます。配列の基本と要素の操作方法を覚えましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptの配列(array)の要素を削除(remove)する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptの配列(array)の要素を削除(remove)する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

arrayとは

「配列」という意味の英単語です。JavaScriptでも配列を扱うArrayオブジェクトが用意されています。また、Arrayオブジェクトは、配列を操作するためのメソッドを多数持っています。

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

removeとは

「取り除く」という意味の英単語です。プログラムでデータから何かを取り除くような処理を作る場合、remove〜のようなメソッド名をつけることが多いです。「取り除く」処理は作る機会も多いので「remove」という英単語を覚えておくとメソッド名が一般的でわかりやすくなります。

JavaScriptに標準で組み込まれたremove〜という名前のメソッドを1つ紹介します。HTMLのElementから属性を取り除くremoveAttributeメソッドです。

下記のようなdiv要素にhidden属性をつけて非表示にしたものを用意しました。

<div id="target" hidden>ここは表示されません。</div>

このdiv要素をJavaScriptで取得し、hidden属性を取り除くと非表示のdivの中身が表示されます。

let target = document.getElementById('target');
target.removeAttribute('hidden');

 

配列の要素を削除する記述方法

配列の要素を削除するには、Arrayオブジェクトのspliceメソッドを使います。spliceメソッドは、配列の要素を取り除くだけではなく、置き換えや追加もできます。

引数は、第1引数だけが必須で変更を開始するインデックスです。例えば、第一引数に2を指定した場合要素の2から後ろの要素が対象になります。そのときに第2引数を省略した場合は要素の2以降が全て削除されます。

第2引数は、取り除く要素の数です。例えば、第2引数に1を指定した場合は、第一引数で指定した要素の後ろの要素が1つ削除されます。

戻り値は取り除いた要素の配列です。spliceメソッドを使って操作すると、操作した配列が変更されます。取り除いた要素を使わない場合は戻り値を受け取らなくてもかまいません。

2つの引数の指定方法をふまえて、配列から1つ削除する場合は下記のような記述になります。

【配列オブジェクト】.splice( 【削除したい要素のインデックス】, 1);

 

配列データから要素を削除してみよう

それでは具体的に配列から要素を削除する例を2つ紹介します。操作する配列は下記のものを使います。

let array = ['1番目', '2番目', '3番目', '4番目', '5番目'];

3番目の要素を削除する例

array.splice(2, 1); //["1番目", "2番目", "4番目", "5番目"]

要素のインデックス(番号)は0から始まるので、3番目は2となります。第1引数で指定した3番目から、第2引数で指定した1つを削除という動きになります。

3番目の要素から後ろを全て削除する例

array.splice(2); //["1番目", "2番目"]

第2引数を省略することで、後ろ全てを削除という動きになります。

 

まとめ

配列の要素を削除する方法を紹介しました。spliceメソッドの引数の指定次第で柔軟な操作ができます。

 

監修してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。