JavaScriptの配列から特定の要素を削除する方法を徹底解説

JavaScriptでプログラミングをしていると、数値が格納された配列から特定の要素だけを削除したい場面によく出くわします。例えば、次のような配列から「5」という値をすべて取り除きたい場合などです。

const arr = [2, 5, 9, 1, 5, 8, 5];

この記事では、フレームワークに頼らず、素のJavaScript（コアJavaScript）だけで実装する方法を解説します。目標は、以下のように直感的に呼び出せるメソッドを作ることです。

array.remove(値);

splice()を使った削除メソッドの実装

配列から要素を削除する際に便利なのが、Arrayオブジェクトが標準で持つ splice() メソッドです。これを活用し、指定した値と一致する要素をすべて削除する関数を作成してみましょう。

サンプルコード

const arr = [2, 5, 9, 1, 5, 8, 5];

const removeInstances = function(el){
   const { length } = this;
   for(let i = 0; i < this.length; ){
      if(el !== this[i]){
         i++;
         continue;
      } else {
         this.splice(i, 1);
      };
   };
   // 要素が1つでも削除されればtrue、なければfalseを返す
   if(this.length !== length){
      return true;
   };
   return false;
};

Array.prototype.removeInstances = removeInstances;

console.log(arr.removeInstances(5));
console.log(arr);

コードのポイント解説

このコードの動作を順番に見ていきましょう。

• 初期の長さを記録： const { length } = this; で処理前の配列の長さを保存しておきます。
• ループ内でのインデックス制御： 値が一致しない場合は i++ でインデックスを進めますが、一致して splice() で削除した場合はインデックスを進めません。これは、削除によって後続の要素が前に詰められるためです。ここがバグを防ぐ重要なポイントです。
• 戻り値の設計： 処理後に配列の長さが変わっていれば少なくとも1つの要素が削除されたことを意味するので true を返し、変更がなければ false を返します。
• プロトタイプへの追加： Array.prototype に登録することで、すべての配列からメソッドとして呼び出せるようになります。

実行結果

コンソールに出力される結果は以下の通りです。

true
[ 2, 9, 1, 8 ]

「5」に該当する要素が3つすべて削除され、残りの要素 [2, 9, 1, 8] だけが配列に残っていることが確認できます。

補足：よりシンプルな代替手法

元の配列を書き換えたくない場合は、ES2015以降で使える filter() メソッドを使うのもおすすめです。

const result = arr.filter(item => item !== 5);
console.log(result); // [ 2, 9, 1, 8 ]

filter() は新しい配列を返すため、副作用がなく安全に扱えます。用途に応じて、元の配列を直接変更する splice() 方式と、イミュータブルな filter() 方式を使い分けるとよいでしょう。