自由拡張
このレッスンで分かること
- 欲しい機能を、使える文法の組み合わせに分解して設計できます
- 元の配列は残したまま、条件に合うものだけを集めて描き直せます
何を作るか決まらないと、手が止まる
最後は自分で決めて足す回です。ただ、何を作ってもいいと言われるのがいちばん手の止まる状況なので、案を 3 つ出します。どれもここまでの範囲だけで作れます。自分がいちばん復習したい章のものを選んでください。
| 案 | 作るもの | 主に使う章 |
|---|---|---|
| A 作品の絞り込み | 人気の作品だけを表示するボタン | 第5章 配列 / 第8章 DOM |
| B メモの検索 | 打った文字を含むメモだけ表示する | 第6章 関数 / 第9章 入力欄 |
| C 訪問回数カウンター | 何回目の訪問かをヘッダーに出す | 第2章 型変換 / 第10章 保存 |
合格条件は案 A で決めてあります。作品セクションに絞り込みボタンと件数表示を id で足し、published が true でかつ views が 100 以上のものだけを描けば通ります。描き直しには第8章で書いた renderWorks をそのまま使ってください。新しく作らず、渡す配列だけを変えます。合格条件は最低ラインで、上限ではありません。
いきなり書き始めると、たいてい途中で迷います。手を動かす前に 3 行だけ書き出してください。1 行目は何が見えるようになるか、2 行目は画面に足す要素の id、3 行目は覚えておく必要のある状態です。案 A なら状態は「いま絞り込んでいるかどうか」の 1 つだけです。この 3 行がそろえば、あとは埋めるだけになります。
JavaScript
// 見えるもの 作品の上にボタン 1 つと、その隣に件数表示
// 足す要素 ボタンと件数表示に付ける id を 2 つ
// 覚える状態 いま絞り込んでいるかどうかの真偽値 1 つ絞り込んだら、もとに戻せなくなった
絞り込みでいちばんやってはいけないのが、元の配列そのものから要素を消すことです。一度消したら復元できず、「すべて表示」に戻す手段がなくなります。元の配列はそのままにして、条件に合うものを別の配列に集めます。
JavaScript
const books = [
{ title: "はじめてのCSS", stock: 0 },
{ title: "配列の教科書", stock: 4 }
];
const picked = [];
for (const book of books) {
if (book.stock === 0) continue;
picked.push(book);
}
console.log(picked.length); // 1、books のほうは 2 件のまま空の配列を用意し、第5章の for-of で 1 件ずつ見て、条件に合わないものは continue で飛ばし、残ったものだけ push する。この形は覚えておく価値があります。条件を足していけば、今年のものだけ、名前に特定の文字を含むものだけ、と何にでも応用できます。
集める側で除外する条件と、描く側で除外する条件は、そろえておいてください。片方だけで弾くと、件数の表示と実際に並ぶカードの枚数がずれます。
いまどちらなのかを、変数 1 つで持つ
いま絞り込んでいるのか、全部見せているのか。この「いまどっちか」を状態と呼びます。状態は真偽値の変数 1 つで持つのがいちばん素直です。
JavaScript
let hideSoldOut = false;
soldOutButton.addEventListener("click", function () {
hideSoldOut = !hideSoldOut;
refresh();
});!hideSoldOut は第3章の否定です。true なら false、false なら true になるので、この 1 行で切り替えが書けます。
大事なのは、押されたときに状態をひっくり返したら、あとは描き直す関数に丸投げすることです。描き直し、件数の表示、ボタンの文字の入れ替え。画面に関わることを全部その関数に集めておくと、状態と画面がずれません。読み込んだときと押されたときの両方から同じ関数を呼べば、最初の表示と 2 回目以降の表示が食い違うこともなくなります。前回のテーマ切り替えで、見た目を変える仕事を 1 本にまとめたのとまったく同じ設計です。
ボタンの文字を状態に合わせて変えるのも忘れないでください。押したあともボタンが「人気の作品だけ見る」のままだと、いまどちらの状態なのか使う人には分かりません。三項演算子で出し分けるだけで、迷いが消えます。
よくある間違い
- 元の配列を書き換える —
works.splice(...)で消すと二度と戻せません。別の配列に集めて、描くときだけ差し替えます - 状態を変えたのに描き直しを呼ばない — 変数だけ変わって画面が黙っているので、壊れているように見えます。状態を変えた行の直後に描き直す関数を呼びます
- 件数を手で書く —
"1 件を表示中"のように直接書くと、条件を変えたときに必ずずれます。描いた配列のlengthから作れば、ずれようがありません
課題
- 作品セクションに、絞り込みボタン works-filter と件数表示 works-count を id で足す
- 描き直しは第8章で作った renderWorks をそのまま使う。新しく作らず、渡す配列だけを変える
- いま絞り込んでいるかどうかを真偽値の変数 1 つで持つ
- 元の works 配列は書き換えず、published が true でかつ views が 100 以上のものだけを別の配列に集めて描く
- 描き直しと件数の表示とボタンの文字の更新を 1 つの関数にまとめ、読み込み時と押されたときの両方から呼ぶ