今日の参考コード

結構今回は難しいです。

なので、同じことを二回に渡って説明したいと思います。

がんばろう〜

初めての filter

さてまずはコードを見てみましょう。

初めて使う機能でも、我々にはテストという強い味方がありますから、これを使うことでどんなことが起きるのかを確かめることができます。

それから以下のようにテストコードを示すことで、他人にその機能を示すことも容易です。

初めての "filter"
describe("filter", () => {
  const members = ["nakanishi", "jim", "john"];

  // filter を使って、条件を絞り込む
  const res = members.filter(member => {
    return member === "john";
  });

  it("絞り込まれているか", () => {
    const expected = ["john"];
    expect(res).toEqual(expected);
  });
});

まずは filter の使用対象が、 members という配列がしまわれた変数であることを確認してください。

.filter() の中に色々書いてあるのは一旦置いておきましょう。

filter は配列に対して使える

.filter() 配列に対して実行していますね。

そう、配列だったらどんなものでも、この .filter() が実行できます。

以下のコードは、わかりやすくするために filter() の () の中はあえて空白にしています。 実際にはこれではエラーがでます。

// 直接配列に
const res1 = ["nakanishi", "jim", "john"].filter()

// 変数にしまわれた配列に
const members = ["nakanishi", "jim", "john"];
const res2 = members.filter()

では配列以外では？

例えば文字列や、数字に使うとエラーが出ます。

filter メソッドは基本的に 配列 の専売特許です。

// エラーが出る
const res1 = "my strings".filter()

// エラーが出る
const strings = "my strings"
const res2 = strings.filter()

filter メソッドは配列に対して使えるということがわかりました。

配列に .filter() とつなげるだけでこんなことが起こるのは、最初から JavaScript が用意してくれているから

さて、何も自分では用意していないのに、なぜ「配列の後ろに .filter() とつなげるだけで」こんな機能が発動するのでしょうか。

実は、これは JavaScript が最初から用意してくれているからです。

こんなふうに JavaScript が最初から用意していくれているものはたくさんあります。

例えば array.length も自分は何もしていないのに用意されていましたよね。

自分では用意していないのになぜ実行できるかというと、JavaScript が最初から用意してくれているからです。

こういう最初から用意されているものの一つが、array.filter() です。

.filter() と . でつなぐのは、平たく言えば object のプロパティにある関数にアクセスしている

.filter() と最後に () をつけるということは、このプロパティにあるのは関数なんです。

これ、前回やりましたよね？ x オブジェクトのプロパティに、関数が入っているパターンです。

これ、進研ゼミでやったやつだ！のやつです。(over thirty の人にしかわからない、インターネットスラングかも)

JavaScript が、勝手に、array に対しては、filter という関数を用意してるってことです。

それを今回は実行しています。

filter の役割は、配列の中から特定の条件に当てはまるものだけを抽出すること

さて、filter の役割については今まで一切説明してきませんでした。

filter は、配列の中から、条件が一致したものだけを抽出するために使う関数です。

そういう機能だと思って最初のコードをあらためてみてみましょう。

初めての "filter"
describe("filter", () => {
  const members = ["nakanishi", "jim", "john"];

  // filter を使って、条件を絞り込む
  const res = members.filter(member => {
    return member === "john";
  });

  it("絞り込まれているか", () => {
    const expected = ["john"];
    expect(res).toEqual(expected);
  });
});

そう、filter を使って、配列の中から、"john" という値の場合の element だけを取り出していますね。条件にあった要素だけを抽出しています。

でも。今のところ、条件の絞り込みの仕方はわかりませんし、まだ説明していません。

それは次回にしましょう！！

宿題

まずは以下のコードをテストにコピペします。

初めての "filter"
describe("filter", () => {
  const members = ["nakanishi", "jim", "john"];

  // filter を使って、条件を絞り込む
  const res = members.filter(member => {
    return member === "john";
  });

  it("絞り込まれているか", () => {
    const expected = ["john"];
    expect(res).toEqual(expected);
  });
});

その上で、"john" の部分を色々かえて、テストを実行してみてください。

変えるところ
const res = members.filter(member => {
    return member === "変えよう";
  });

すると当然ですが、テストの結果も変えないと、テストが通りませんよね。変えましょう。

test も変更しよう
it("絞り込まれているか", () => {
    const expected = ["ここも変える必要あり"];
    expect(res).toEqual(expected);
  });

色々値を変えてみて、それでいてテストを通るようにしてください。

イメージとしては、まだ明確にはわからない filter の仕様を理解する気持ちで！

今日は以上です〜！