Ne:Code道場～JavaScript 配列の便利なメソッド①：filterの巻～

はじめに

この記事ではJavaScriptの配列の便利なメソッドについて、概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、配列の便利なメソッドについて理解を深めてゆきましょう。

配列の要素の内、特定の条件に当てはまるものを数えるニャ！

複数のものをひとまとめにしている配列、その要素の内、特定の条件に当てはまるもののみを操作するシーンは結構多いと思います。まずは、猫弟子が記載するコードを見てみましょう。

// BMIの情報を配列でまとめて持っているニャ
// この中からBMIが25以上の要素が何個あるのか数えるニャ！
// ・・・目で見れば数えられる、っていうのは、言わないお約束ニャ。。！
let bmiList = [22, 30, 20, 40, 25, 21];
　
// 数え上げるための専用の箱（変数）を宣言するニャ
// 初期値として邪魔なにならない数、「ゼロ」を代入しているニャ
let count = 0;
　
// 今回は折角だから、「for-of」で回してみたニャ☆
for (let bmi of bmiList) {
  // BMIの値が、25以上の場合のみ個数を数えるようにしているニャ
  if (bmi >= 25) {
    count++;
  }
}
// 最後に結果を出力するニャ！
console.log(`BMIが肥満ゾーン（25以上）なのは、合計${count}人いるニャ！`);

猫弟子が書いたコードは、しっかりここまでの文法を把握し、要求を満たすものになっています。猫弟子も無事書き上げることができて満足そうです。
以前の記事に「車輪の再発明」という記載しましたが、実はこのコードももともとある「車輪」を活用すると、よりシンプルに記載することができます。
ここでの「車輪」は、配列オブジェクトが持っている「filter」メソッドになります。
次の節で、filterメソッドを用いる場合の記載を見てゆきましょう。

配列オブジェクトのfilterメソッドについて教えてニャ？

では、先程の猫弟子が書いたコードをfilterメソッドを用いて書き直してみましょう。

let bmiList = [22, 30, 20, 40, 25, 21];
　
// ニャニャ？？count変数が姿も形も無くなっているニャ！
　
// ニャンと！繰り返し処理や、条件分岐もドロンと消えているニャ？！
　
// はニャ？！こんな書き方ができるのかニャ！目からウロコニャ
console.log(`BMIが肥満ゾーン（25以上）なのは、合計${bmiList.filter(bmi => bmi >= 25).length}人いるニャ！`);

filterメソッドは、コールバック引数を受け取り、その中で条件に合致した要素のみを抽出することができます。（ここでは、「bmi >= 25」、BMIが25以上という条件で抽出しています）抽出した結果は抽出条件に合致した要素の「配列」になっているので、そのままlengthを用いることができるのですね。
では、せっかくなので、このタイミングで定数についても触れましょう。

定数って何ニャ

これは、配列から一旦横道に逸れての補足です。上記のサンプルコード、「25」という数字は、パッと見どういう数字かよくわかりませんよね。でもその数字には意味があり、「肥満の下限ボーダーとなる数字」だと言えます。
このようなパッと見よくわからない値が条件などに用いられている場合、そのよくわからなさから、「マジックナンバー」と呼ばれます。魔法がかっているように、判別しにくい値のことですね。そのような値は、固定値（変更出来ない値）としつつ、名前をつけて上げる機能があります。それが「定数」です。

let bmiList = [22, 30, 20, 40, 25, 21];
　
// 「const」っていう宣言子を用いているニャ
// 名前の書き方も、全部大文字とアンダースコア区切りで、普通の変数と違うニャ
const FAT_LOWER_LIMIT = 25;
　
// 値に名前が付いたことで、読みやすさがアップしていると感じたニャ
// 「bmiが肥満以上だったら」と読めるコードになっているニャ！
// 25とベタに書いていた文字のところも定数出力に変更されているニャ
console.log(`BMIが肥満ゾーン（${FAT_LOWER_LIMIT}以上）なのは、合計${bmiList.filter(bmi => bmi >= FAT_LOWER_LIMIT).length}人いるニャ！`);

変数が小文字始まりの大文字区切り、ラクダのコブのような「キャメル形式」での記載でしたが、定数は全部大文字でアンダースコア区切りの「アッパー形式」で記載しています。Googleのスタイルガイドに準拠しての記載です。
特徴的な記載なので、変数と違い、固定値であることが一目瞭然ですね。constは宣言子の一つで、初回代入以降に値を変えない場合の宣言に用います。再代入しようとするとエラーが発生するそんな宣言子です。
絶対変わらない値として、25であることが保証され、その25が、「肥満の下限」名前付きで用いることで、コード自体の読みやすさも上がっていることを体感いただければと思います。

コールバック関数の書き方がなんだか不思議ニャ

今までの記事で取り上げてきたコールバック関数は、中の処理を波括弧に記載していましたね。
最初にコールバック関数について触れた際の記載はこちら。

setTimeout(() => {
  alert("時間がきたニャ");  
}, 60000);

　
また、配列の中身の利用時のforEachの記載はこちら。

let cats = ["ミケ", "タマ", "トラ", "ニャンコ先生"];
cats.forEach(cat => {
  console.log(cat);
});

　
上記コードは、もとのコードとの比較しやすさ、見やすさを加味して、あえて波括弧を残していましたが、波括弧の中の処理が1行である場合は、波括弧なしでそのまま記載することができます。
例えば今回のサンプルコードを波括弧付きで記載すると以下のようになります。

bmiList.filter(bmi => { 
  return bmi >= FAT_LOWER_LIMIT
}).length

波括弧もさることながら、もとの記載にはなかった、「return」が書かれているのが特徴ですね。filterのコールバック関数は戻り値Booleanで作成する必要があり、そのBooleanの結果が「true」になる要素を抽出するということが可能になっています。
波括弧付きで書くと縦に間延びし、且つ、「return」も書かなければならないと少し冗長な印象がありますよね。なので、この手のBooleanを返すコールバック関数で、中身の処理が1行になる場合は、アロー関数を用いれば「return」も書かず、1行でコンパクトに記載することができます。
では、最後に、処理のまとめコメントをつけたコードを記載します。

const FAT_LOWER_LIMIT = 25;
let bmiList = [22, 30, 20, 40, 25, 21];
　
// filter(bmi、のbmiは、bmiListの各要素の値が順番に入ってくるニャ
// =>から先は、どういう値をfilterしたいのかの条件を記載しているニャ
// filterメソッドの戻り値は条件に合致した要素の配列になるニャ
// 配列なので、要素数を表す「length」を用いることができるニャ
console.log(`BMIが肥満ゾーン（${FAT_LOWER_LIMIT}以上）なのは、合計${bmiList.filter(bmi => bmi >= FAT_LOWER_LIMIT).length}人いるニャ！`);

最後に

配列の便利なメソッド（その①）について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

1. 今回は便利なメソッドとしてfilterを取り上げたニャ
   1. 繰り返し処理、条件分岐で書いていた処理が、このメソッドを呼び出すことでぐっとシンプルになるのを感じられたと思うニャ
2. 固定値は定数で名前づけしてゆくと良いニャ
   1. コードの理解を惑わす「マジックナンバー」も、定数化することで読みやすさアップに繋がるニャ
3. アロー関数の書き方で戻り値ありでもreturnを省略できる書き方を取り上げたニャ
   1. ES2015から利用可能になった「アロー関数」、記載のバリエーションに少しづつ慣れていくとコードをスッキリ書くことができると思うニャ

配列から特定の条件に合致する要素のみ抽出する時に用いられる、便利なfilterメソッドについて学びました。繰り返し処理、条件分岐で書ける内容ですが、提供されている便利なメソッドを用いることで、とてもシンプルに書くことができ、その結果、楽できる幅がぐっと広がってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
配列の便利なメソッドの活用方法をしっかり身につけつつ、今後の学習に繋げてゆきましょう。