JavaScript【JavaScript入門】filterで配列のデータを抽出する方法マサト2017/4/242019/4/8こんにちは、ライターのマサトです!今回は、配列を操作するメソッド「filter」について学習していきます!「filter」を使いこなせば、配列データの中から条件に一致した要素だけを簡単に抽出できるようになるので、非常に活用範囲が広いメソッドと言えます。使い方にちょっとしたコツが必要で、場合によっては想定していない動作をする場合もあるので注意が必要です。まとめそもそも「配列」とは?まずはそもそも「配列」とは何かについてきちんと理解しておきたい方は以下の記事を参考にしてください。「配列」の基本知識をきちんと身につけた上で今回の「filter」の解説を読み進めるとより理解度がアップしますので、「配列」の知識に不安のある方はぜひ確認しておいて下さい。)「filter」の中で、特定の条件を与えて配列データを取得したい内容を「コールバック関数」に書くことで、任意のデータを抽出して新しい配列を生成します。数値データなら「○○以下の数値だけ」を抽出したり、文字データなら「○○と同じ文字列だけ」を抽出するような使い方が出来ますね!filterで配列のデータを抽出してみよう!実際に、「filter」を使った事例を見てみましょう!次のサンプルでは、数値データが格納された配列に「filter」を使っています。このサンプルでは、コールバック関数に「5より小さい数値を返す」という条件を指定しているのが分かります。これにより、さまざまな数値が格納されている配列の中から5より小さい数値だけを新しい配列データとして出力することが出来るわけです。文字列の場合も同じで、次のサンプルは任意の文字列を抽出しています。);出力結果は...["user234"]となります。このサンプルでは、配列データの中から「user234」というユーザー名を抽出して、新しい配列に格納します。見つからなければ、空の配列だけが返ることになります。「array」は、現在処理している配列これらの引数を有効活用することで、JavaScriptのプログラミングがさらに便利なものになります。配列の重複を操作してみよう!それでは、コールバック関数の引数を活用した事例を見てみましょう!例えば、配列データの中に重複した同じデータが存在した時に、この重複データを排除するプログラムを作ってみます。サンプルでは、コールバック関数の引数「array」「value」と「indexOf」を使い、現在処理している配列に格納されている数値のインデックス番号を取得しています。先ほどのサンプルで試した比較を行い、「true」だった数値だけを返しているわけです。インデックス番号と同じ数値のインデックスだけを返すことで、重複データのみ排除した新しい配列が生成されるというわけですね。)このように、任意のオブジェクトを指定すると、コールバック関数内の「this」がオブジェクトを参照するようになるのです。そのため、配列以外からのデータも一緒に組み込んで処理したいようなケースで、とても便利に使えるでしょう。次のような配列とオブジェクトがあったとします。"スイカ"]となります。in文」を使ってオブジェクトの品名(プロパティ名)を取得し、配列の値と比較して同じモノだけを抽出しているのが分かります。最終的に、両方の品名で同じモノとして「イチゴ、スイカ」が抽出されていますね!まとめ今回は、配列を操作するメソッド「filter」を学習しました!ポイントだけをもう一度おさらいしておきましょう!「filter」は条件に一致した要素だけを抽出して新しい配列として格納する!コールバック関数は3つの値を取得することができる!第2引数として、任意のオブジェクトをコールバック関数内のthisとして利用可能!これらの内容を踏まえて、ぜひ自分だけの抽出条件を作って試してみてください。さらなる理解が深まるはずですよ!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。