JavaScriptのfilter()で配列から条件に合う要素を簡単に抽出する方法

1. filter()メソッドとは？

1. filter()メソッドとは？

JavaScriptのfilter()メソッドは、配列の中から条件に合う要素だけを新しい配列として取り出すための便利な機能です。元の配列はそのままで変更されません。たとえば、数字の配列から偶数だけを抽出したい場合に使えます。

2. 基本的な使い方

2. 基本的な使い方

filter()は、配列の各要素に対してコールバック関数を呼び出します。この関数がtrueを返した要素だけが抽出され、新しい配列として返されます。

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evenNumbers);

[2, 4, 6]

上記の例では、配列numbersの中から偶数だけを抽出して、新しい配列evenNumbersに入れています。

3. arrow関数でさらに簡単に

3. arrow関数でさらに簡単に

ES6以降は、アロー関数を使ってもっと簡単に書くことができます。

const numbers = [10, 15, 20, 25];
const over15 = numbers.filter(num => num > 15);
console.log(over15);

[20, 25]

このように、条件が一行で書ける場合はアロー関数が便利です。配列の中から15より大きい数字だけを抽出しています。

4. 文字列の配列でfilter()を使う

4. 文字列の配列でfilter()を使う

filter()は文字列の配列でも使えます。例えば、特定の文字を含む文字列だけを取り出すことができます。

const fruits = ['apple', 'banana', 'grape', 'orange'];
const aFruits = fruits.filter(fruit => fruit.includes('a'));
console.log(aFruits);

['apple', 'banana', 'grape', 'orange']

この例では、文字列に「a」が含まれる要素だけを抽出しています。includes()は文字列に特定の文字が含まれているかを調べるメソッドです。

5. オブジェクトの配列をfilter()で抽出する

5. オブジェクトの配列をfilter()で抽出する

オブジェクトの配列でもfilter()は使えます。例えば、商品の価格が特定の値以上のものだけを取り出す場合です。

const products = [
  { name: 'Book', price: 1200 },
  { name: 'Pen', price: 200 },
  { name: 'Notebook', price: 800 }
];
const expensive = products.filter(product => product.price > 500);
console.log(expensive);

[
  { name: 'Book', price: 1200 },
  { name: 'Notebook', price: 800 }
]

ここでは、価格が500円より高い商品だけを抽出しています。オブジェクトのプロパティを条件に指定できるのが便利です。

6. 複数条件で抽出する

6. 複数条件で抽出する

filter()では条件を複数組み合わせることもできます。論理演算子を使って複雑な条件も書けます。

const numbers = [5, 10, 15, 20, 25];
const filtered = numbers.filter(num => num > 10 && num < 25);
console.log(filtered);

[15, 20]

この場合、10より大きく25より小さい数字だけを抽出しています。&&は「かつ」を意味する論理演算子です。

7. 元の配列は変更されない

7. 元の配列は変更されない

filter()を使っても元の配列は変わりません。新しい配列が返されるだけです。

const nums = [1, 2, 3, 4, 5];
const even = nums.filter(n => n % 2 === 0);
console.log('元の配列:', nums);
console.log('抽出後:', even);

元の配列: [1, 2, 3, 4, 5]
抽出後: [2, 4]

この特徴を覚えておくと、データを安全に扱えます。

8. まとめとしての活用例

8. まとめとしての活用例

filter()はデータ分析やフォーム入力の検証など、さまざまな場面で役立ちます。配列から条件に合う要素だけを取り出すことで、必要なデータだけを扱えるようになります。

例として、年齢が18歳以上のユーザーだけを抽出する場合:

const users = [
  { name: 'Alice', age: 17 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 16 }
];
const adults = users.filter(user => user.age >= 18);
console.log(adults);

[
  { name: 'Bob', age: 20 }
]

このように、filter()を使うと必要な情報だけを簡単に抽出できます。複雑な条件でも関数を工夫すれば自由自在にデータを選べる便利なメソッドです。

まとめ

まとめ

この記事では、JavaScriptのfilter()メソッドについて基本から応用まで詳しく解説しました。filter()は配列の中から特定の条件に合う要素だけを抽出して新しい配列として返す便利な機能です。元の配列を変更せず安全にデータを扱えることから、数値配列、文字列配列、オブジェクト配列など幅広い用途に対応できます。例えば、数字の配列から偶数だけを抽出したり、文字列の配列から特定の文字を含む要素だけを取り出したり、商品の価格や年齢などの条件に応じたオブジェクトを抽出することが可能です。

filter()の最大の特徴は条件関数を柔軟に設定できることです。単一条件はもちろん、複数の条件を論理演算子で組み合わせて複雑な条件でも抽出できます。さらに、ES6以降はアロー関数を使うことで、コードを簡潔に書けるようになりました。これにより、可読性が高く、保守性のあるコードを書くことが可能です。

また、filter()はデータ分析やフォームの入力検証、ユーザー管理など日常のプログラミングで非常に役立ちます。条件に合う要素だけを取り出すことで、必要なデータを効率的に扱うことができ、無駄なデータ処理を避けることができます。初心者でも理解しやすいメソッドですが、条件の書き方や論理演算子の使い方を覚えておくとより自由自在に活用できます。

例えば、次のようにアロー関数で条件を簡潔に書くことができます。

 const scores = [65, 80, 90, 45, 70]; const passing = scores.filter(score => score >= 70); console.log(passing);

 [80, 90, 70]

この例では、70点以上のスコアだけを抽出しています。条件を変更するだけで簡単に別のデータセットにも応用可能です。

オブジェクト配列の場合も、プロパティを条件にして特定のデータを取り出すことができます。たとえば、ユーザーの年齢や商品の価格などを条件にして、必要な情報だけを抽出することで、効率的なデータ操作が可能になります。

また、filter()は元の配列を変更しないため、元のデータを保持しながら新しい配列で条件に合うデータを扱える点も大きなメリットです。この特性を理解することで、配列操作における安全性や保守性を高めることができます。

さらに、filter()を他の配列メソッドと組み合わせることで、より高度なデータ操作も可能です。例えば、map()やreduce()と組み合わせて条件に合うデータを変換したり集計したりすることで、柔軟で効率的なプログラムを構築できます。

総じて、JavaScriptのfilter()メソッドは配列操作の基本でありながら非常に強力です。条件関数の工夫次第で、数値や文字列、オブジェクトの抽出処理を簡単かつ効率的に行うことができます。初心者でも取り組みやすく、実務や学習において役立つ重要な知識です。