JavaScriptのfilter()とincludes()で配列をフィルター処理する方法

JavaScriptでは、filter()メソッドとincludes()メソッドを組み合わせることで、特定の要素を除外した新しい配列を簡単に作成できます。この記事では、具体的なコード例を通してその使い方を解説します。

サンプルデータの準備

まず、次のような名前の配列があるとします。

const names = ['John', 'David', 'Mike', 'Sam', 'Carol', 'Bob'];

filter()とincludes()によるフィルター処理

この配列から、除外したい名前（'David'、'Mike'、'Sam'、'Carol'）が含まれていない要素だけを取り出します。ポイントはincludes()の前に!（否定演算子）を付けることです。これにより、「除外リストに含まれていない」要素だけが残ります。

var nameObject = names.filter((allNameObject) => !['David', 'Mike', 'Sam', 'Carol'].includes(allNameObject));

filter()は元の配列を変更せず、条件を満たす要素だけで構成された新しい配列を返すため、安全にデータを加工できます。

完全なコード例

const names = ['John', 'David', 'Mike', 'Sam', 'Carol', 'Bob'];
console.log("元の配列：");
console.log(names);

var nameObject = names.filter((allNameObject) => !['David', 'Mike', 'Sam', 'Carol'].includes(allNameObject));
console.log("フィルター後：");
console.log(nameObject);

プログラムの実行方法

Node.js環境で上記のプログラムを実行するには、以下のコマンドを使用します。

node fileName.js

ここでは、ファイル名をdemo65.jsとして保存しています。

実行結果

プログラムを実行すると、以下のような出力が得られます。

PS C:\Users\Amit\JavaScript-code> node demo65.js
元の配列：
[ 'John', 'David', 'Mike', 'Sam', 'Carol', 'Bob' ]
フィルター後：
[ 'John', 'Bob' ]

仕組みの解説

• filter()：配列の各要素に対してコールバック関数を実行し、trueを返した要素だけを集めた新しい配列を作成します。
• includes()：指定した値が配列内に存在するかどうかを判定し、存在すればtrue、しなければfalseを返します。
• 否定演算子（!）：!includes(...)とすることで、「除外リストに含まれていない場合」にtrueとなり、その要素が結果に残ります。

この組み合わせは、ブラックリスト方式でのデータ抽出や、不要な項目の除去など、実務でも頻繁に使われるテクニックです。