つくる 作品一覧の絞り込みと並び替え

解説

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

• 絞り込みの条件は引数を増やさず、1 つのオブジェクトにまとめて受け取ります
• 指定が無いときの既定値と、0 件のときの戻り値を先に決めておきます

条件が増えるたびに引数が増えていく

第2章で map filter find reduce sort と分類がそろいました。今回はそれをまとめて、作品一覧の表示データを 1 本の関数で組み立てます。最初にぶつかるのは、条件の受け取り方です。

絞り込みの条件が増えるたびに引数を足していくと、呼び出し側がこうなります。

pickNotes(notes, 30, null, true, false);

3 番目が何なのか、呼ぶ側は関数の定義を開かないと分かりません。順番を 1 つ間違えても、エラーにならず結果だけがずれます。条件はまとめて 1 つのオブジェクトで受け取ります。

pickNotes(notes, {});                        // 全部
pickNotes(notes, { minMinutes: 30 });        // 30 分以上
pickNotes(notes, { month: "2026-05" });      // その月だけ
pickNotes(notes, { minMinutes: 30, month: "2026-05" });

キーに名前が付いているので、呼び出しの行だけ読めば何をしているか分かります。指定されなかったキーは「条件なし」として扱います。

const minMinutes = typeof options.minMinutes === "number" ? options.minMinutes : 0;
const month = options.month ? options.month : null;

options.minMinutes || 0 でも多くの場合は同じ結果になります。ただし 0 を渡したときと未指定のときを区別できません。数値であることを型で確かめておくほうが安心です。

条件が 3 つ以上なら早期 return で並べる

条件を 1 行の論理式に詰め込むと、どれが効いているのか読めなくなります。filter に渡す関数の中で、合わないものから順に false を返していく形にします。

notes.filter((note) => {
  if (note.draft) {
    return false;
  }
  if (note.minutes < minMinutes) {
    return false;
  }
  return true;
});

条件が増えても行を 1 つ足すだけで済み、どの条件で落ちたのかも追いやすくなります。

0 件のときに何を返すか先に決める

一覧の配列、件数、合計、分類。返す形を先に書き出しておくと、途中の書き方を変えても呼び出し側は影響を受けません。そして 0 件のときも、同じ形を返します。

// 呼び出し側が毎回確かめる必要が出る
return null;

// 空のまま、形をそろえて返す
return { items: [], count: 0, total: 0 };

null を返すと、受け取った側は使うたびに存在確認を書くことになります。空配列と空オブジェクトと 0 をそのまま返せば、そのあとの map も length も落ちません。

キー名と変数名が同じなら、{ items, count } のように名前だけを並べて書けます。中身の分かる名前を付けた変数をそのまま返せるので、組み立ての途中に名前が付き、あとから読む人に親切になります。

解説

この関数の中では document を触らない、と決めておきます。配列を受け取って値を返すだけにしておけば、画面が無い状態でも戻り値を見るだけで確かめられます。

よくある間違い

• 元の配列に直接 sort を呼ぶ — 同じ引数で 2 回呼んだのに結果が変わる、という原因の分かりにくい不具合になります。2 回呼んで結果を比べるのが、壊していないかを見る手軽な確かめ方です
• 順位を振ってから並べ替える — 番号を付けたあとに sort すると、並びと番号がずれた一覧ができます。並べ替えが先、番号は最後です
• 0 件になる条件を試さない — しきい値を大きくする、存在しない値を渡す、空配列を渡す。この 3 つを通しておけば、画面につないだあとで落ちる場面はほとんど無くなります

1. 関数名は buildWorksView とし、引数は作品の配列 works と条件のオブジェクト options の 2 つを受け取る
2. published が true の作品だけを対象にし、options.minViews があれば views がその値以上、options.tag があれば tags にその値を含むものに絞る
3. 対象を views の多い順に並べ、items は 1. 学習ログ (200回) の形の文字列の配列にする
4. 戻り値は items と count と total と byYear の 4 つのキーを持ち、byYear は年を文字列にしたキーと件数の数値のオブジェクトにする
5. 元の works は書き換えず、0 件のときは空配列と空オブジェクトと 0 を返す