JavaScriptのfilterとは？基本的な書き方や連想配列などについて解説

JavaScriptにはさまざまなメソッドがあり、知っておくと便利なものが多くあります。

その中でも、今回は、あらゆる場面で役立つfilterについて取り上げます。

filterの書き方や実例、その他の関連情報などを紹介していきます。

ぜひ、参考にしてみてください。

JavaScriptのfilterとは？

JavaScriptにおけるfilterとは、配列の内容を特定の条件によって絞り込み、新しい配列を作成するメソッドです。

プログラム初心者の場合、for文やif文を使って、処理を書く場合が多いでしょう。

しかし、実はfor文やif文を使うよりも、filterを使った方が、簡単に配列およびリストの要素を絞り込むことができます。

filterメソッドは、コールバック関数によって、配列の各要素を判定し、条件に合格した要素だけを取り出す時に使用します。

JavaScriptのfilterを使用する際には、callbackとthisArgという表現を理解しておく必要があります。

callbackとは、コールバック関数で条件を指定し、判定を実行することを指します。

thisArgとは、コールバックを実行する際に、thisとして使用する値のことを指します。

JavaScriptのfilterの基本的な書き方

filterの書き方について紹介します。

配列に対してfilterメソッドを指定します。

そして、arrayには、事前に作成した配列オブジェクトを指定しましょう。

callbackにおいては、配列要素の値である「value」、配列要素を格納している配列オブジェクト「arrayObj」、そして配列要素の数値「index」を指定できます。

各配列要素に対して、callbakで合致した要素が、新しい配列として生成されます。

callbakで合致しなかった要素はスキップされるため、新しい配列に含まれることはありません。

JavaScriptのfilterの実例

filterの実例は、下記の通りです。

   var newArray = array.filter(function(item) {
     return condition;
   });

item引数については、配列内の要素を参考にし、filterはこの要素とconditionを比較し、チェックします。

これは、オブジェクトの場合、プロパティーにアクセスする際に役立ちます。

そして、このitemが条件を満たせば、新しい配列に送信されます。

連想配列について

連想配列とは

連想配列とは、自動的に割り当てられる数字をキーとして持ち、自由に任意の文字列を割り振ることができる配列です。

キーを任意に指定できることで、そこに格納されている値が何を指しているか、容易に想像することができます。

さらに、配列の要素から、特定の値を探して使用したいという場合でも、キーを指定しやすいです。

また、JavaScriptでも配列を使うことができます。

変数のリストを、キーと値の配列よりも便利に使うことができます。

JavaScriptの連想配列は、通常の配列が格納位置を示すために数値を使用するのに対して、文字列を使用するようにしたものです。

しかし、仕組みとしては、オブジェクトのプロパティーを使用し、文字列と格納された値を関連付けるものであるため、別物です。

連想配列の作り方

連想配列の作り方について、配列には三つの作り方がありますが、連想配列は初期値を入れた状態では作れません。

配列は"array"、連想配列は"Object"と宣言しましょう。

配列と連想配列では、変数のタイプとしての違いはなく、全てObjectという点に注意してください。

連想配列の追加

連想配列の要素を追加する方法は、何種類かありますが、オブジェクトの要素のように追加するのであれば、連想配列にする変数をドット表記で書きましょう。

ブラケットを記述して追加する場合、ブラケット内に文字列を記述すると、その文字列をキーとする要素を追加できます。

map関数とアロー関数

map関数とは

map関数とは、配列内のすべての要素に対して、指定した同様の処理を行い、新しい配列を作ることができる関数です。

処理結果を新しい配列として返してくれるため、pushを行う必要がありません。

callback関数を配列の要素ごとに呼び出し、 その結果から新しい配列を作成します。

callbackは、値が割り当てられているインデックスでのみ実行されます。

削除されたインデックスや、値が割り当てられたことのないインデックスは、実行されません。

callbackは、要素の値やインデックス、配列オブジェクトといった三つの引数を使って実行されます。

map関数によって処理される要素の範囲は、callbackの最初の呼び出しの直前に設定されるようになっています。

呼び出し後に追加された要素は、callbackの対象になりません。

仮に削除される、あるいは変更された配列の要素が存在する場合、コールバックへわたされた値が、mapの到達した時の値になります。

要素が削除されていた場合、対象にはなりません。

アロー関数とは

アロー関数とは、functionの定義をより短く記述できる関数のことで、ECMAScript2015からできるようになりました。

thisやarguments、superなどを束縛しません。

アロー関数は、メソッドではない関数に最適ですが、コンストラクタとしては使用することができないため、注意しましょう。

アローとは矢(=>)を意味しており、引数を与えると値を返します。

また、無名関数はアロー関数で書くことができるため、覚えておくと良いかもしれません。

map関数にアロー関数を使用

map関数にアロー関数を使うと、下記のように短縮できます。

   tax_price = price.map(value => value*1.1 )

また、オプションで配列のindexも表示させることが可能です。

objectの配列における破壊的メソッド

bjectの配列における破壊的メソッドについて、例や非破壊的メソッドとの比較と合わせて紹介します。

破壊的メソッドとは

破壊的メソッドとは、対象となる元の配列の値を変えるメソッドのことを指し、レシーバであるオブジェクトそのものを変更します。

破壊的メソッドには、破壊する前の値をそのまま使い回すことができません。

つまり、別の変数にコピーしなければならないというデメリットがあることを覚えておきましょう。

破壊的メソッドの例

具体的には、push、splice、sortなどのメソッドがあります。

非破壊的メソッドとの比較

非破壊的メソッドとは、配列オブジェクトのコピーを作ってから変更し、コピーした配列を返すメソッドのことを指します。

例えばsliceは、引数に応じて文字列の中から、部分的に文字列を取り出すという非破壊的メソッドです。

破壊的メソッドは、レシーバであるオブジェクトそのものを変更してしまいますが、非破壊的メソッドの場合、レシーバ自体には変更がかかりません。

対照的な破壊的メソッドと非破壊的メソッドですが、破壊的メソッドを非破壊的に使用することもできます。

また、状況によっては、元の配列を変えずに、つまり非破壊的に、sortメソッドを実行したい時があります。

その時は、sortメソッドを実行する前に、Array.fromメソッドを実行します。

そして、元の配列のシャローコピーを作り、配列に対してソート処理を実行しましょう。

そうすれば、非破壊的にソートを行う事が可能です。

破壊的メソッドを非破壊的に実行したい、という状況は思いの外あります。

そういった状況で使うことができるため、ぜひ、覚えておきましょう。

findメソッドの活用

findメソッドの活用方法について紹介します。

findメソッドとは

findメソッドとは、提供されたテスト関数を満たす配列内における最初の要素の値を返すメソッドです。

includesメソッドのように、単純な比較演算子を使用するだけではありません。

各要素を関数に渡し、それがtrueを返すか、falseを返すか確認する必要があります。

findメソッドの使い方について

対象の文字列の先頭文字から順番に、オブジェクトのパターンとマッチするかを検索します。

マッチすれば"true"となり、マッチしなければ"false"が戻り値として返るようになっています。

まとめ

本日は、JavaScriptのfilterと、関連する用語について解説しました。

大事な点をもう一度振り返ると、以下です。

• JavaScriptのfilterとは、配列の内容を特定の条件によって絞り込み、新しい配列を作成するメソッド
• 連想配列とは、自動的に割り当てられる数字をキーとして持つかわりに、自由に任意の文字列を割り振ることができる配列
• map関数とは、配列内のすべての要素に対して、指定した同様の処理を行い、新しい配列を作ることができる関数
• アロー関数とは、functionの定義をより短く記述できる関数
• 破壊的メソッドとは、対象となる元の配列の値を変えるメソッド
• 非破壊的メソッドとは、配列オブジェクトのコピーを作ってから変更し、コピーした配列を返すメソッド
• findメソッドとは、提供されたテスト関数を満たす配列内における最初の要素の値を返すメソッド

filterは使える場面が多いメゾットのため、ぜひ、使えるようになっておくと良いでしょう。

フリーランスITエンジニア専門エージェント「HiPro Tech」 では、JavaScriptの案件も多く扱っています。

実際に当サービスを使い、JavaScriptを使う案件に参画しているエンジニアが数多くいます。

また、当サービスで扱うJavaScript案件の平均月額報酬は、約86.6万円で、高額な報酬を目指すことが可能です。

案件参画に向けて、案件の紹介だけでなく、面談前後のフォローや契約内容・契約延長の代理交渉などのサポートを行っています。

そのため、効率良く希望する案件を獲得できる可能性を高めることが可能です。

フリーランスエンジニアとして独立したいとお考えの人や、フリーランスエンジニアとして活躍の幅を広げたいとお考えの人は、ぜひ、無料登録してみてください。