つなげて組み立てる

解説

このレッスンで分かること

• どのメソッドも新しい配列を返すので、そのまま次のメソッドをつなげます
• つなぐ順番で、結果も、見る件数も変わります

次の行に渡すためだけの変数が並ぶ

1 行ずつ変数に受けて書くと、こうなります。

const active = skills.filter((skill) => skill.years >= 2);
const sorted = [...active].sort((a, b) => b.years - a.years);
const names = sorted.map((skill) => skill.name);

このコードは正しく動きます。ただし active と sorted は、次の行に渡すためだけに存在しています。名前を考える手間の割に、何も説明していません。

どのメソッドも配列を返すので、そのまま次のメソッドを呼べます。

const names = skills
  .filter((skill) => skill.years >= 2)
  .sort((a, b) => b.years - a.years)
  .map((skill) => skill.name);

上から順に「絞る」「並べる」「名前にする」と読めます。この形をパイプラインと呼びます。1 行が長くなるので、点の前で改行して縦にそろえるのが読みやすい書き方です。

ここで sort の前に複製が要らないのは、filter がすでに新しい配列を返しているからです。filter を外して skills.sort(...) から始めると、元の配列が並び替わります。パイプラインの先頭が元の配列そのものかどうかを、毎回確かめます。

順番を変えると結果が変わる

添字を使う処理は、必ず絞り込みの あと に置きます。map に渡す関数は第 2 引数で 0 から始まる添字を受け取れますが、先に番号を振ってから減らすと、番号の飛んだ一覧ができあがります。

// 番号が 1 から連続する
skills
  .filter((skill) => skill.years >= 2)
  .map((skill, index) => (index + 1) + ". " + skill.name);

計算量の面でも順番は効きます。filter を先に置けば、そのあとは減った件数だけを見ます。数件では差が出ませんが、件数が増えるほど効いてきます。

鎖が切れる場所を覚える

つなげられるのは、配列を返すメソッドどうしだけです。forEach は undefined を返すので、そこで鎖が切れて TypeError になります。join と reduce も配列を返さないので、必ず最後に置きます。

const text = skills
  .filter((skill) => skill.years >= 2)
  .map((skill) => skill.name)
  .join(" / ");
// "JavaScript / CSS"

join は空配列に呼ぶと空文字を返すので、0 件のときの分岐を書かずに済みます。

つなげすぎても読めなくなります。目安として 4 段を超えたら、意味のあるまとまりで一度変数に受けます。名前が付けられない切れ目なら、それはまだ 1 つの処理だということです。同じ絞り込みから一覧と集計の両方がほしいときも、変数に一度受けます。同じ条件を 2 回書くと、あとで直すときに片方だけ直す事故が起きます。

よくある間違い

• 途中で undefined を混ぜる — map の中で条件分岐して片方だけ return すると、次の段に undefined が流れ込みます。絞るのが先、形を変えるのが後です
• どの段で崩れたか調べずに直す — うまく動かないときは、一時的に段を分けて変数に受け、length や中身を 1 つずつ見ます。件数が減らないなら条件、並びがおかしいなら比較関数、undefined が混ざるなら return の書き忘れです

1. 関数名は buildGallery とし、引数は作品の配列 works と数値 minViews の 2 つを受け取る
2. published が true かつ views が minViews 以上の作品だけを対象にし、views の多い順に並べる
3. 要素の文字列は 1 から始まる順位を付けて 1. 学習ログ (200回) の形にそろえる
4. 元の works は書き換えず、対象が 0 件のときは空配列を返す