JavaScript配列のfilter()関数：配列から必要な値だけを抽出する

定義と使用方

配列のfilter()関数は、コールバック関数を使用して配列の要素をフィルタリングします。

この関数を使用すると、配列の要素の中から必要な値だけを簡単に抽出できます。
条件をコールバック関数として記述すると、その条件を満たす要素だけが新しい配列として返されます。

特徴

フィルタリングの条件はコールバック関数内で適用します。
・条件を満たす場合はtrueを、満たさない場合はfalseを返すように記述する必要があります。
元の配列はそのまま保持され、条件を満たす要素だけで構成された新しい配列が返されます。

基本の例

簡単な例を通して説明してみます。
次は、filter()関数を使用して配列の要素の中から偶数だけをフィルタリングし、フィルタリングされた配列として返す例です。

JavaScript

// フィルタリングする配列
const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 開発者が直接作成したコールバック関数
function isEven(value) {
    return value % 2 === 0; // 偶数の場合はtrueを返す
}

// 配列の要素を走査し、フィルタリングされた配列として返す
const result = num.filter(isEven);
console.log(result); // 出力：[2, 4, 6, 8, 10]

例のように、コールバック関数は各要素に対して条件を評価し、要素をフィルタリング（保持）する場合はtrueを、そうでない場合はfalseをreturnで返す必要があります。

filter()関数は各要素を順に処理し、コールバック関数でreturnとしてtrueを返した要素だけを集めて新しい配列として返します。

filter()関数の使用方法 filter()関数の使用方法を視覚的に表すと、次のようになります。

/* filter()関数は配列の中から指定した条件の要素だけをフィルタリングする目的で使用されます。 */

// 次の例は、配列の要素の中から小文字だけをフィルタリングすることが目的です。
[a, B, c, D].filter(小文字) 👉 [a, c]

構文

arrはfilter()関数を適用する配列です。

パラメーター

filter()関数のパラメーターの説明
`callbackFn`	必須です。配列の各要素を処理するコールバック関数です。コールバック関数は配列の要素を引数として受け取り、結果として`true`または`false`を返します。`true`を返すとその要素はフィルタリングされた配列に含まれ、`false`を返すと含まれません。コールバック関数のパラメーター: `callbackFn(element[, index[, array]])` `element`: 現在処理中の配列の要素 `index`: オプション。現在処理中の配列要素のインデックス `array`: オプション。`filter()`を呼び出した配列自体
`thisArg`	オプションです。`callbackFn`関数内で使用する`this`の値として指定するものです。

最初のパラメーターであるコールバック関数（callbackFn）に関連して、関数の形ごとの構文形式は次の通りです。

JavaScript

// アロー関数
filter((element) => { /* … */ })
filter((element[, index]) => { /* … */ })
filter((element[, index[, array]]) => { /* … */ })

// コールバック関数
filter(callbackFn)
filter(callbackFn[, thisArg])

// インラインコールバック関数
filter(function (element) { /* … */ })
filter(function (element[, index]) { /* … */ })
filter(function (element[, index[, array]]) { /* … */ })
filter(function (element[, index[, array]]) { /* … */ }[, thisArg])

戻り値

フィルタリングされた配列です。フィルタリングされた要素がない場合は空の配列になります。

コールバック関数の動作原理

filter()関数は、与えられた配列の要素を開発者が直接作成したコールバック関数を使用して、希望する条件に従ってフィルタリングし、条件を満たす要素だけで構成されたフィルタリング済みの配列として返す関数です。

filter()関数のコールバック関数は、配列をフィルタリングするために使用されます。このコールバック関数は、与えられた配列の各要素に対して呼び出され、その結果に応じて要素がフィルタリングされるかどうかが決まります。以下は、filter()関数のコールバック関数が呼び出される過程を順序通りに説明したものです。

JavaScript filter()関数で使用されるコールバック関数の構造

/**
 * コールバック関数
 *
 * @param {*} element 配列の各要素
 * @param {number} index 配列のインデックス（任意）
 * @param {Array} array 元の配列（任意）
 * @return {boolean} フィルタリング条件を満たす場合はtrue、そうでない場合はfalseを返す
 *
 * コールバック関数は、名前付き関数（ユーザー定義関数）や匿名関数などで使用できます。
 * もちろん、すべてのコールバック関数はアロー関数としても使用可能です。
 */

/* コールバック関数を名前付き関数で使用する場合 */
function callbackFn(element[, index[, array]]) { // 名前付き関数の定義
	// フィルタリングするロジック：フィルタリングされた結果を返す必要があります。
}

arr.filter(callbackFn); // 定義した名前付き関数名を引数として直接渡す

/* コールバック関数を匿名関数で使用する場合 */
arr.filter(function (element[, index[, array]]) {
    // フィルタリングするロジック：フィルタリングされた結果を返す必要があります。
});

filter()関数の動作順序です。

filter()関数を呼び出すとき、フィルタリングする配列がコールバック関数に渡されます。
filter()関数は、フィルタリングする配列の最初の要素を選択し、この要素をコールバック関数の最初のパラメーター（element）として渡します。
コールバック関数が呼び出され、渡された要素はコールバック関数内で使用できます。このコールバック関数内で必要な条件を適用し、returnキーワードを使用して、その要素がフィルタリング条件を満たすかどうかを判断します。
コールバック関数がtrueを返すと、現在の要素はフィルタリングされた配列に含まれます。falseを返すと、現在の要素はフィルタリングされた配列に含まれません。
filter()関数は、次の配列要素を選択し、このプロセスを繰り返します。
すべての配列要素に対するコールバック関数の呼び出しが完了すると、filter()関数はフィルタリングされた結果を含む新しい配列を返します。
返された配列には、コールバック関数でtrueを返した要素だけが含まれます。

このようにして、filter()関数のコールバック関数は、与えられた配列をフィルタリングし、フィルタリングされた結果を返します。
コールバック関数は開発者が定義した条件に基づいてフィルタリングを行うため、さまざまなフィルタリング操作を実行できます。

filter()とmap()関数は、似たような構文を使用するため、混同しやすい点があります。
JavaScriptのmap()関数とfilter()関数の違いを確認してください。

さまざまな活用例

filter()関数は、さまざまな配列のフィルタリング操作に使用でき、以下はその一部の例です。

配列の重複要素を削除する

filter()関数を使用して配列の重複要素を削除するには、少し複雑なアプローチが必要です。一般的に、重複要素を削除するには2つの配列を使用して重複を確認し、削除する必要があります。以下の例は、filter()関数を使用して重複要素を削除する方法を示しています。

JavaScript filter()関数で配列の重複要素を削除する

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = numbers.filter((element, index, arr) => {
    // 現在の要素が以前に出現していない場合のみtrueを返す
    return arr.indexOf(element) === index;
});

console.log(uniqueNumbers); // 出力：[1, 2, 3, 4, 5]

コードの補足説明
配列のindexOf()関数は、配列内で引数として渡された要素を探し、最初に見つかった（出現した）要素のインデックスを返します。

上の例では、numbers配列に重複した要素があるか確認するために、indexOf()関数を使用しています。indexOf()関数は、配列内で特定の値が最初に現れるインデックスを返します。

arr.indexOf(element) === indexという条件は、その値が最初に現れるインデックスと現在のインデックスが同じ場合にtrueを返します。

filter()関数は、コールバック関数を使用して配列の要素を1つずつ順に処理し、条件に合った要素だけを返します。

複数条件でのフィルタリング

複数条件を使用する場合、filter()関数内のコールバック関数で複数の条件を組み合わせればよいです。例えば、数字の配列から偶数かつ5未満の要素だけを抽出する複数条件の例を示します。

JavaScript filter()関数で配列から偶数かつ5未満の要素だけを抽出

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const filteredNumbers = numbers.filter(element => {
    // 複数条件を組み合わせてフィルタリング
    return element % 2 === 0 && element < 5;
});

console.log(filteredNumbers); // 出力：[2, 4]

element % 2 === 0 && element < 5という条件は、偶数かつ5未満の要素の場合にtrueを返します。

2次元配列のフィルタリング

今回は、2次元配列から特定の条件を満たす要素をフィルタリングする簡単な例を示します。次の例では、studentsという2次元配列を作成し、年齢が30以上の学生だけをフィルタリングします。

JavaScript filter()関数で年齢が30以上の学生だけをフィルタリング

// 2次元配列の作成
const students = [
    ["Alice", 25],
    ["Bob", 30],
    ["Charlie", 22],
    ["David", 35]
];

// 年齢が30以上の学生だけをフィルタリング
const filteredStudents = students.filter(student => {
    // student配列の2番目の要素（年齢）が30以上の場合のみtrueを返す
    return student[1] >= 30;
});

console.log(filteredStudents); // 出力：[["Bob", 30], ["David", 35]]

この例では、filter()関数を使用してstudents配列を順に処理し、各サブ配列の2番目の要素（年齢）が30以上の場合のみtrueを返してフィルタリングしています。

文字列配列から長さが5以上の文字列をフィルタリング

JavaScript

const words = ["apple", "banana", "cherry", "date", "fig"];
const longWords = words.filter((word) => word.length >= 5);
console.log(longWords); // 出力：[ "apple", "banana", "cherry" ]

コードの補足説明
配列のlengthプロパティは、配列に含まれる要素の数を数値で返します。

これらの例は、filter()関数をさまざまな状況で活用する方法を示しています。必要に応じて、filter()関数を使用して配列を希望する方法でフィルタリングできます。