icon
icon

JavaScriptでfilterを使う方法【初心者向け】

初心者向けにJavaScriptでfilterを使う方法について解説しています。配列の中身から特定の条件に当てはまる要素を取り出すメソッドです。いくつかサンプルでプログラムを書いているので、参考にしてみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

JavaScriptでfilterを使う方法について解説しています。

配列の中身を条件に合うものだけ取り出せるメソッドで、頻繁に使うものでは無いかもしれませんが、知っておくといざという時便利でしょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

filterとは

filterとは配列の内容を特定の条件で絞り込むメソッドです。

コールバック関数で指定した条件で個々の要素を判定して、条件に合う要素だけを取り出すときに利用します。

 

filterの書き方

filterを利用するときは、配列に対してfilterメソッドを指定します。

array.filter(callback [,that]);

arrayには予め作成した配列オブジェクトを指定します。

callbackには、配列要素の値「value」、配列要素の数値インデックス「index」、配列要素を格納している配列オブジェクト「arrayObj」を指定出来ます。

各配列要素に対して、callbakが真を返した要素が新しい配列として生成されます。

callcakが真を返さなかった要素はスキップされ、新しい配列には含まれません。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

以下は実際にfilterメソッドを利用して配列から特定条件を取り出すサンプルです。

 

配列の中から奇数だけを取り出す

var data = [1, 4, 7, 12, 21];
var result = data.filter(function(value) {
  return value % 2 === 1;
});
console.log(result);

 

配列の中から5未満の数字を除外する

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
function isMinNum(value) {
  return (value >= 5);
}
var filterNum = numbers.filter(isMinNum);
console.log(filterNum);

 

文字列の中から条件に合った文字列を抽出する

var items = ["item1", "item2", "item3"];
var filterItems = items.filter(function(value) {
  return value === "item2";
});
console.log(filterItems);

 

まとめ

filterを利用すると、特定の条件に合致した配列要素だけを取り出すことが出来ます。

判定条件によっては有用に使えるシーンが多いメソッドなので、ぜひ覚えておきましょう。

Javascriptにおける配列についてもで詳しく解説しているので、合わせてご覧ください。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する