【JavaScript】配列の要素を削除｜具体的なコードを紹介

（最終更新月：2023年11月）

✔以下のような方へ向けて書かれています

✔当記事を通じて伝える内容

• JavaScriptでの配列削除の基本的な方法
• 配列から要素を削除するさまざまな手法
• JavaScriptでの配列削除操作の具体的なコード例

当記事では、JavaScriptでの配列削除の基本から、さまざまな削除手法、具体的なコード例まで、詳しく分かりやすく解説しています。

ぜひ最後までお読みいただき、JavaScriptでの配列操作について理解を深めてください。

JavaScript配列の基本

こちらでは、JavaScriptの配列とその基本的な操作についてお伝えしていきます。

配列の基本を理解することで、データの整理や操作が効率的におこなえるでしょう。

• 配列要素の削除とは？
• 基本操作：配列の利用法

配列要素の削除とは？

配列は、複数のデータを順序付けて格納するためのデータ構造です。

時折、不要な要素を取り除く必要が生じることがあります。

この操作を「配列要素の削除」と呼びます。

正確な方法で要素を削除することは、データの整合性を保つために重要です。

基本操作：配列の利用法

JavaScriptの配列は、[]を使用して定義します。

要素へのアクセスや要素の追加、長さの取得など、基本的な操作がサポートされています。

const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]);  // apple
fruits.push("grape");
console.log(fruits.length);  // 4

配列の要素を削除する具体的手法

こちらでは、JavaScriptの配列から要素を削除するための具体的な手法とその詳細について解説していきます。

配列の要素を適切に削除することで、データの整理や更新がスムーズにおこなえるでしょう。

• shift()を用いた削除
• pop()を用いた削除
• splice()を用いた削除
• deleteを用いた削除
• filter()を用いた削除

shift()を用いた削除

shift()メソッドは、配列の最初の要素を削除し、その要素を返します。

このメソッドは、配列の長さを変更するものです。

• shift()の基本書式と使い方
• 手順解説: shift()での要素削除
• shift()の戻り値利用法
• 実践Tips: 削除要素の再追加方法

shift()の基本書式と使い方

shift()メソッドは、特定の引数を必要とせず、簡単に配列の最初の要素を削除できます。

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

手順解説: shift()での要素削除

上記の例では、shift()メソッドを使用して配列numbersの最初の要素1を削除。

この操作により、配列の長さがひとつ減少しました。

shift()の戻り値利用法

shift()メソッドは削除した要素を返すので、この戻り値を変数に格納して後で利用できます。

実践Tips: 削除要素の再追加方法

要素を削除した後で、再度その要素を配列に追加したい場合は、unshift()メソッドを使用します。

numbers.unshift(removed);
console.log(numbers);  // [1, 2, 3, 4]

pop()を用いた削除

pop()メソッドは、配列の最後の要素を削除し、その要素を返します。

このメソッドも配列の長さを変更するものです。

• pop()の基本書式と使い方
• 手順解説: pop()での要素削除
• pop()の戻り値利用法

pop()の基本書式と使い方

pop()メソッドは、特定の引数を必要とせず、簡単に配列の最後の要素を削除できます。

const animals = ["cat", "dog", "fish"];
const removedAnimal = animals.pop();
console.log(removedAnimal);  // fish
console.log(animals);  // ["cat", "dog"]

手順解説: pop()での要素削除

上記の例では、pop()メソッドを使用して配列animalsの最後の要素fishを削除しました。

この操作により、配列の長さが1つ減少しました。

pop()の戻り値利用法

pop()メソッドは削除した要素を返すので、この戻り値を変数に格納して後で利用できます。

splice()を用いた削除

splice()メソッドは、配列からひとつ以上の要素を削除し、必要に応じて新しい要素を追加できます。

• splice()の基本書式と使い方
• 手順解説: splice()での要素削除
• 実践Tips: 複数要素の削除と置換法

splice()の基本書式と使い方

splice()メソッドは、削除や追加を開始するインデックスと、削除する要素の数、追加する要素を引数として取ります。

const fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 2, "blackberry");
console.log(fruits);  // ["apple", "blackberry", "date"]

手順解説: splice()での要素削除

上記の例では、インデックス1から2つの要素を削除し、その位置に”blackberry”を追加しました。

実践Tips: 複数要素の削除と置換法

splice()メソッドを使用すると、複数の要素を一度に削除したり、削除した位置に新しい要素を追加できます。

deleteを用いた削除

delete演算子を使用して、配列から要素を削除することもできますが、これには注意が必要です。

• 手順解説: delete演算子での要素削除
• deleteの戻り値と連想配列キー削除法

手順解説: delete演算子での要素削除

deleteを使用して配列の要素を削除すると、その位置にundefinedが残ります。

const colors = ["red", "green", "blue"];
delete colors[1];
console.log(colors);  // ["red", undefined, "blue"]

deleteの戻り値と連想配列キー削除法

delete演算子は、操作が成功するとtrueを返します。

また、オブジェクトのプロパティを削除する際にも使用されます。

filter()を用いた削除

filter()メソッドは、特定の条件に一致する要素だけを新しい配列として返します。

これを利用して、条件に一致しない要素の削除が可能です。

• 実践Tips: filter()によるループ処理と削除書き方
• 応用: キーワードでの要素検索と削除

実践Tips: filter()によるループ処理と削除書き方

filter()メソッドは、配列の各要素に対してテスト関数を実行し、その関数がtrueを返す要素だけを新しい配列として生成します。

const numbers = [1, 2, 3, 4, 5];
const filtered = numbers.filter(num => num !== 3);
console.log(filtered);  // [1, 2, 4, 5]

上記の例では、値が3である要素を削除するためにfilter()メソッドを使用しました。

応用: キーワードでの要素検索と削除

filter()メソッドを使用して、特定のキーワードを含む要素を削除することも可能です。

const words = ["apple", "banana", "cherry", "date", "grape"];
const withoutA = words.filter(word => !word.includes('a'));
console.log(withoutA);  // ["cherry"]

この例では、文字’a’を含む要素を削除しています。

まとめ

当記事では、JavaScriptで配列から要素を削除する方法について学習してきました。

• 配列の要素を効果的に削除する技術を習得することで、データの操作や整理がよりスムーズにおこなえる
• JavaScriptの配列は非常に柔軟で、多くのメソッドや手法が提供される
• それぞれの方法には特有の特性や利点があり、適切な状況で適切な方法を選択することが重要

当記事を通じて、それらの手法の一部を学べました。

日常のコーディング作業において、これらの知識を活用して、より効率的なコードを書くことを心がけましょう。