JavaScriptで配列に特定の値が含まれるか確認する方法：includes()とfilter()の使い方を徹底解説

JavaScriptのincludes()メソッドは、配列の中から特定の要素を検索し、その要素が存在すればtrueを返します。一方、filter()メソッドも配列から要素を見つけるための手段ですが、includes()とは異なり、検索対象の要素そのもの（該当するオブジェクト）を返す点が特徴です。

例えば、商品注文のリストの中に「ベッドサイドキャビネット」の注文が含まれているかどうかを確認したい、といった場面を想像してみてください。このように、配列に特定の値が存在するかどうかを調べたいケースは開発現場で頻繁に発生します。

JavaScriptで配列に要素が含まれるか確認する2つの方法

JavaScriptの配列に特定の項目が含まれているかどうかを判定するには、主に以下の2つの方法があります。

• includes()：要素の存在有無をtrueまたはfalseで返す
• filter()：条件に一致する要素を抽出して返す

この記事では、まずincludes()メソッドを使って配列に特定の要素が含まれているかを確認する方法を解説し、続いてオブジェクトの配列から特定の値を持つ要素を探すfilter()メソッドの使い方についても紹介します。

includes()メソッドの基本

includes()メソッドは、配列が特定の値を含んでいるかどうかを判定します。指定した要素が見つかればtrue、見つからなければfalseを返します。構文は以下のとおりです。

array_name.includes(element, start_position);

includes()メソッドは2つの引数を受け取ります。

• element（必須）：検索したい値
• start_position（任意）：検索を開始するインデックス位置

戻り値はtrueかfalseのいずれかで、これらはJavaScriptにおけるブール値（Boolean）と呼ばれます。

なお、Array.includes()は文字列に対して使うString.includes()と同じように動作しますが、対象がオブジェクトの配列である点が異なります。

includes()の実行例

ここで、コーヒーショップを経営していると想定しましょう。「今日、エスプレッソの注文はあったか？」を確認したい場合、次のようなコードで今日の注文リストをチェックできます。

var todays_orders = ['Latte', 'Americano', 'Latte', 'Latte', 'Mocha', 'Cortado'];
console.log(todays_orders.includes('Espresso'));

このコードの実行結果は false です。

配列todays_ordersには「Espresso」という値が含まれていないため、includes()メソッドはfalseを返します。逆に、検索した要素が配列内に存在していれば、trueが返されます。

次に、「直近3件の注文の中にラテの注文はあるか？」を確認したいとしましょう。このような場合は、start_position引数を指定したincludes()メソッドを使います。

var todays_orders = ['Latte', 'Americano', 'Latte', 'Latte', 'Mocha', 'Cortado'];
console.log(todays_orders.includes('Latte', 3));

実行結果は true です。インデックス3以降の位置にラテの注文が存在するため、includes()はtrueを返しました。

filter()メソッドでオブジェクトの配列を検索する

先ほどの例では、文字列の配列に特定の値が含まれているかをincludes()で確認しました。しかし、オブジェクトの配列の中に特定の値を持つ要素があるかどうかを調べたい場合はどうすればよいのでしょうか？　そんなときに活躍するのがfilter()関数です。

filter()関数は、オブジェクトの配列を反復処理しながら特定の値を検索します。filter()が受け取る引数は1つで、値を検索するために使われるコールバック関数です。構文は以下のとおりです。

var filterArray = array_name.filter(function(item) {
	return item;
});

filter()の実行例

ここでは、注文されたコーヒーの名前と顧客の名前を含む、コーヒーショップの注文オブジェクトの配列を扱います。

「今日、John Appleseedという名前の人がコーヒーを注文したかどうか」を確認したいとします。Johnは常連客で、次回のコーヒーが割引になることになっているからです。

以下のコードは、John Appleseedが注文を行ったかどうかをチェックします。

var orders = [
{ drink: 'Cappuccino', name: 'John Appleseed' }, 
{ drink: 'Espresso', name: 'Mya Stuart' },
{ drink: 'Cappuccino', name: 'Emma Berry' }
];
var check_orders = orders.filter(order => (order.name === "John Appleseed"));
console.log(check_orders);

このプログラムの出力結果は以下のとおりです。

[{ drink: 'Cappuccino', name: 'John Appleseed' }]

まず、ordersという配列を宣言しています。この配列には、注文した人の名前と注文されたドリンクのリストが格納されています。次に、check_ordersという変数を宣言し、filter()関数を使って「John Appleseed」という名前の人が今日コーヒーを注文したかどうかを確認しています。

最後に、check_orders変数の値をコンソールに出力します。John Appleseedは実際に注文していたため、関数は彼の注文レコードを返しました。もし注文がなければ、空の配列が返されることになります。

filter()メソッドについてさらに詳しく学びたい方は、JavaScriptのfilter()やreduce()メソッドに関するチュートリアルもあわせて参考にしてみてください。

まとめ

includes()メソッドは、配列にある値が含まれているかどうかを確認し、結果に応じてtrueまたはfalseを返します。一方、filter()メソッドは、オブジェクトの配列に特定の値が含まれているかを判定し、条件を満たすオブジェクトが配列内に存在すれば、そのオブジェクト自体を返します。

用途に応じて両者を使い分けることで、配列操作のコードをより簡潔かつ効率的に書くことができます。ぜひ実際のコードで試してみてください。