VIDEO LESSON

JavaScriptのArray.prototype.filter()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 8:08動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回はフィルターを紹介します。
0:03これは、配列の中から条件に合う要素だけを取り出して、新しい配列を作るメソッドです。
0:10すべての要素を一つずつ判定関数に渡し、条件を満たした要素だけを残します。
0:17たとえば、タスクの一覧から未完了のものだけを抜き出したり、点数の一覧から合格点以上だけを残したりできます。
0:26この動画では、書き方と引数、戻り値、記事の基本例、判定関数の引数、浅いコピーの注意点、
0:32そして応用例まで、実行結果と一緒に学びます。
0:37元の配列を壊さずに絞り込める点が、フィルターの大きな特長です。
0:43条件を自分で書けるため、数値でも文字列でもオブジェクトでも、同じ考え方で使えます。
0:50まず動作環境を確認します。
0:52記事の互換性情報では、クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一・五以降、
0:56サファリでは三以降で使えます。
1:00ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。
1:04これらの数値はエムディーエヌの互換性データに基づく目安です。
1:08フィルターは非常に古くから使えるメソッドで、現在の主要な環境では広く対応しています。
1:14追加の読み込みは不要で、配列に最初から関数として備わっていることを実機で確認済みです。
1:20対応開始の版は推奨版という意味ではない点にも注意しましょう。
1:24ブラウザーでもノードでも同じ書き方で動くため、学習したコードをそのまま試せます。
1:29書き方を確認します。
1:31対象の配列に続けてフィルターと書き、カッコの中に判定関数を渡します。
1:36リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:43判定関数は各要素に対して先頭から順番に呼ばれ、結果がトゥルーシー、つまり真とみなされる値なら、
1:48その要素が新しい配列に残ります。
1:53判定関数には、今の要素、その位置、配列自体が渡されます。
1:57第二引数にディスアーグを指定すると、判定関数の中で使うディスの値を決められます。
2:04戻り値は条件を満たす要素の新しい配列で、該当がなければ空の配列になり、元の配列は変更されません。
2:12まずは、この基本の形と、戻り値が常に配列になることを押さえましょう。
2:17記事の基本例を見ます。
2:19学習という完了済みのタスクと、復習という未完了のタスクが入った配列があります。
2:25この配列にフィルターを呼び、ドーンがフォールスの要素、つまり未完了の要素だけを残します。
2:32実行すると、復習だけが入った配列が表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:39判定はドーンの否定という短い式で書かれています。
2:43条件を一つの式で表すのが、この例のポイントです。
2:47まずはこの形を、絞り込みの基本として覚えてください。
2:51一段ずつ、どの要素が残り、どの要素が外れるのかを思い浮かべながら読むと理解が深まります。
2:57判定関数に渡される引数を詳しく見ます。
3:01判定関数は三つの引数を受け取ります。
3:04一つ目は今調べている要素の値、二つ目はその要素の位置、三つ目は対象の配列自体です。
3:10スライドの例では、十、二十、三十という配列から、位置が一ではない要素だけを残し、
3:15結果は十と三十になりました。
3:19実機でも同じ結果でした。
3:21通常は値だけを使うことが多いのですが、位置を条件にしたい場合に二つ目の引数が役立ちます。
3:28必要な引数だけを書けばよく、途中までで省略しても構いません。
3:33引数の順番は、値、位置、配列の順と覚えてください。
3:37配列自体の引数は、全体の長さと比べたい場合などに使うことがあります。
3:43実例として、数値の絞り込みを見ます。
3:46一から六までの配列について、二で割った余りがゼロという条件でフィルターをかけると、
3:51偶数の二、四、六だけが残ります。
3:55実機でも同じ結果でした。
3:58別の例では、十、二十、三十、四十の配列から、二十以上の要素だけを残し、二十、
4:02三十、四十が返りました。
4:06条件式を書き換えるだけで、偶数だけ、基準以上だけ、範囲の中だけといった、
4:11さまざまな絞り込みが同じ書き方で表せます。
4:16数値の検証や、合格者の抽出など、実務でもよく使う形です。
4:21条件は一つの式で短く書くほど、読み返したときに意図が伝わりやすくなります。
4:27文字列とディスアーグの例を見ます。
4:30まず、アップル、バナナ、キウイという単語の配列から、長さが五以上の単語だけを残すと、
4:34アップルとバナナが返ります。
4:39実機でも同じ結果でした。
4:41次に、基準値十五を持つオブジェクトをディスアーグとして渡す例です。
4:46通常の関数で書いた判定関数の中でディスを参照すると、その基準値を使って判定できます。
4:53結果は二十と三十でした。
4:55アロー関数ではディスが外側の値になるため、ディスアーグを使いたいときは通常の関数で書く点がポイントです。
5:03基準を外から渡せると、判定関数を再利用しやすくなります。
5:08文字列の長さや数値の範囲など、条件の材料はプロパティや値から自由に選べます。
5:14記事の境界例で、浅いコピーの仕様を確かめます。
5:18ドーンがフォールスのオブジェクトを一つ持つ配列から、フィルターでその要素を取り出します。
5:25取り出した先でドーンをトゥルーに書き換えると、元の配列側のドーンもトゥルーに変わります。
5:33スライドの例でも結果はトゥルーで、実機でも同じ結果でした。
5:38これは、フィルターが作るのは新しい配列の入れ物だけで、中のオブジェクト自体はコピーされず、
5:43同じ参照が共有されるためです。
5:48配列の入れ物と、中に入るオブジェクトの参照を分けて考えると、更新時の不具合を防げます。
5:55中身まで独立させたい場合は、取り出した後にオブジェクト自体をコピーする工夫が必要です。
6:02注意する仕様を確認します。
6:04まず、条件に合う要素が一つもない場合、エラーにはならず、空の配列が返ります。
6:11空の配列にフィルターをかけた場合も、同じく空の配列です。
6:15実機でも同じ結果でした。
6:17次に、判定はトゥルーそのものではなく、トゥルーシーかどうかで行われます。
6:23ゼロや空文字やヌルは残らず、値があるものだけが残るため、ブーリアンをそのまま渡すと、
6:28不要な値を取り除く定番の書き方になります。
6:33また、フィルターは元の配列を変更しません。
6:37結果を受け取る変数を用意し忘れないようにしましょう。
6:41空の配列が返る仕様のおかげで、結果をそのまま次の処理へ渡しても壊れにくくなります。
6:48応用例として、メソッドチェーンを見ます。
6:50一から五までの配列に、まずフィルターで三以上の要素だけを残し、続けてマップで各要素を十倍に変換すると、
6:55三十、四十、五十という配列が得られます。
7:00実機でも同じ結果でした。
7:01絞ってから変換するという流れは、データ処理で最もよく使う組み合わせの一つです。
7:07似たメソッドとの違いも整理しましょう。
7:09ファインドは条件に合う最初の一個だけを返しますが、フィルターは合う要素すべてを配列で返します。
7:16一個でよいのか、全件ほしいのかで使い分けてください。
7:19処理の順番を言葉で説明できるようになると、チェーンの読み書きで迷いにくくなります。
7:25まとめです。
7:26フィルターは、配列の要素を判定関数で一つずつ調べ、条件に合う要素だけを新しい配列へ取り出すメソッドです。
7:34ポイントは三つです。
7:35まず、判定関数には値と位置と配列が渡され、結果がトゥルーシーの要素が残ること。
7:41次に、該当がなければ空の配列が返り、元の配列は変更されないこと。
7:46そして、取り出したオブジェクトは元のものと参照が共有されるため、書き換えの影響に注意することです。
7:54まずは記事の基本例と境界例を実行し、結果を予測してから確かめてみてください。
8:00お疲れさまでした。
8:01絞り込みが書けるようになれば、検索や表示の切り替えなど、画面のデータ処理にも応用できます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Array.prototype.filter()で条件に合う要素だけを新しい配列へ取り出す方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのArray.prototype.filter()の使い方：引数・戻り値・実例と注意点 →