【簡単】JavaScriptのFileterメソッドを使う方法

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

✔このような方へ向けて書かれた記事となります

「JavaScript filterの機能って何をするの？」

「JavaScript filterのコーディング方法を知りたい」

「JavaScript filterの実用的なコード見たい」

✔当記事を通じてお伝えすること

JavaScript filterの基本的な使い方
JavaScript filterの実装とその細かなテクニック
JavaScript filterを活用した具体的な例

当記事では、JavaScript filterの基本的な使い方から、その応用テクニックまで、具体的な例を用いて詳細に解説しています。

ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/05/19 14:24:31時点 Amazon調べ-詳細)

JavaScriptとは？

こちらでは、JavaScriptの基本的な概念とその可能性についてお伝えしていきます。

JavaScriptの概要
JavaScriptでできること

JavaScriptの概要

JavaScriptは、ウェブページに動的な機能を追加するためのプログラミング言語です。

HTMLとCSSと組み合わせることで、ユーザーとのインタラクションを向上させられます。

JavaScriptでできること

ウェブページのユーザビリティや機能性を高めるための多岐にわたるタスクをJavaScriptで実現できます。

アニメーションの実装
フォームのバリデーション
データの非同期通信

JavaScriptの配列について

配列は、複数の値をひとつの変数に格納するためのデータ構造です。

JavaScriptにおいて、配列は非常に多用される要素のひとつ。

その操作方法や利用シーンは多岐にわたります。

Filterメソッドとは？

こちらでは、JavaScriptの配列を操作するための強力なツール、Filterメソッドについて詳しく解説します。

Filterメソッドの基本概念
Filterメソッドの使い方と構文

Filterメソッドの基本概念

Filterメソッドは、配列の要素をテストし、テストをパスしたすべての要素から新しい配列を生成するためのメソッドです。

これにより、特定の条件に一致する要素だけを取り出せます。

Filterメソッドの使い方と構文

Filterメソッドの基本的な使い方と、その際の引数や返り値について詳しく見ていきましょう。

引数の役割
返り値について

引数の役割

Filterメソッドは、テスト関数を引数として受け取ります。

この関数は、配列の各要素に対して実行され、trueまたはfalseを返すものです。

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

filter内の引数「num」は、numbersの各要素を示します。

返り値について

Filterメソッドは、新しい配列を返す関数です。

この新しい配列には、テスト関数がtrueを返したすべての要素が含まれます。

Filterメソッドのさまざまな活用例

こちらでは、Filterメソッドを使用したさまざまな実用的な例を取り上げ、その使い方を詳しく解説します。

値によるフィルタリング
素数の抽出方法
JSONデータからの不要な内容の除去
配列からの検索方法
配列への影響を理解する（変更、追加、削除）

値によるフィルタリング

例えば、特定の値を持つ要素だけを抽出したい場合、Filterメソッドを使用します。

const fruits = ["apple", "banana", "cherry", "apple", "orange"];
const apples = fruits.filter(fruit => fruit === "apple");
console.log(apples); // ["apple", "apple"]

素数の抽出方法

数値の配列から素数だけを抽出することも可能です。

const numbers = [2, 3, 4, 5, 6, 7, 8, 9, 10];
const isPrime = num => {
    for(let i = 2; i < num; i++)
        if(num % i === 0) return false;
    return num !== 1;
};
const primes = numbers.filter(isPrime);
console.log(primes); // [2, 3, 5, 7]

JSONデータからの不要な内容の除去

JSONデータの配列から、特定の条件に一致する要素を除外できます。

const users = [
    {id: 1, name: "John", active: true},
    {id: 2, name: "Jane", active: false},
    {id: 3, name: "Doe", active: true}
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers); // [{id: 1, name: "John", active: true}, {id: 3, name: "Doe", active: true}]

配列からの検索方法

Filterメソッドを使用して、配列内の特定の条件に一致する要素を検索できます。

const products = [
    {id: 1, name: "Laptop", category: "Electronics"},
    {id: 2, name: "Shirt", category: "Apparel"},
    {id: 3, name: "Watch", category: "Accessories"}
];
const electronics = products.filter(product => product.category === "Electronics");
console.log(electronics); // [{id: 1, name: "Laptop", category: "Electronics"}]