つくる 作品データを API から読む
このレッスンで分かること
- 通信、絞り込み、描画、失敗の表示を、役割ごとに分けて 1 枚に同居させます
- 遅いとき、失敗したとき、空のときを、自分の手で起こして確かめます
1 本の関数に全部書くと、直す場所が分からなくなる
手で書いていた作品の配列を消して、外から届いたデータで同じ画面を出します。やることは多く見えますが、通信も絞り込みも並び替えも失敗の表示も、ひとつの関数に詰め込むと、並び順を直したいだけなのに通信のコードを読む羽目になります。今回の決まりは次のとおりです。
- 送る前に、状態表示へ読み込み中を出す
- 公開中の作品だけを残し、表示回数の多い順に並べる
- 表示回数が 100 以上の作品には、目立たせるクラスを付ける
- 状態表示には、実際に描いた件数を出す
response.okがfalseなら投げ、catchで一覧を空にして理由を出す
取る、選ぶ、描く に切る
役割は 3 つに分かれます。ひとつの関数に詰め込まず、分けたまま組み立ててください。
JavaScript
async function loadSkills() { } // 取る。通信のことだけ知っている
function pickSkills(skills) { } // 選ぶ。配列をもらって配列を返す
function paintSkills(skills) { } // 描く。配列をもらって画面を書き換える真ん中の「選ぶ」が今回の新顔です。条件で残して、順番を決めます。別の題材で書くと次の形になります。
JavaScript
function pickSkills(skills) {
return skills
.filter(function (skill) { return skill.visible; })
.sort(function (a, b) { return b.months - a.months; });
}sort は元の配列を並べ替えてしまう破壊的なメソッドですが、filter が新しい配列を作ったあとなので、ここでは元のデータに影響しません。filter を先に置くのは、見た目の都合ではなくこの理由からです。
描く側は、渡されたものを全部描きます。条件で飛ばす処理を描く側に書くと、選ぶ役割が 2 か所に散ってしまいます。描く側が判断してよいのは、見た目だけです。
JavaScript
function createSkillRow(skill) {
const row = document.createElement("li");
if (skill.months >= 12) {
row.classList.add("featured");
}
row.textContent = skill.name;
return row;
}画面に出す件数は、data.count ではなく実際に描いた配列の length から作ってください。絞り込んだあとなので、2 つの数はずれます。
描画のコードは、出どころが手書きから通信に変わっても書き直す必要がありませんでした。変わるところと変わらないところを分けて書いておくと、あとから来る変更に強くなります。今回変わったのは、出どころだけです。
遅いとき、失敗したとき、空のとき
書き終えたら、URL の後ろを変えて 3 通り試してください。練習用の口は、そのために返しかたを変えられるようにしてあります。
| 付ける指定 | 確かめられること |
|---|---|
?delay=800 | 読み込み中が見えて、そのあと消えるか |
?status=500 | 失敗の文が出て、カードが空になるか |
?empty=1 | 0 件のときに画面が壊れないか |
通信を使う画面は、うまくいったときだけ試しても完成しません。とくに 3 つ目は、実際に試さないと分からないところです。作品が 0 件で返ってきたときに、一覧が空になるだけで壊れないか。そこまで確かめて、ようやく作業が終わります。
読み込み直すボタンも同じです。2 回押してカードが二重にならないかを、必ず自分の目で見てください。二重になるなら、描き直す前に消す処理がどこかで抜けています。
よくある間違い
- 手で書いた配列を消し忘れる — 取ってきたデータで描いたあと、古い配列でもう一度描いてしまう形です。出どころはひとつに絞ります
- 失敗したときにカードを消し忘れる — 前のカードが残ったままエラー文だけが出ると、利用者には古いデータが最新に見えます。
catchの中で一覧を空に戻してください
課題
- fetch より先に #status へ「読み込み中」を入れる
- selectWorks は published が true のものだけを残し、views の多い順に並べて返す
- createWorkCard は views が 100 以上の作品に featured クラスを付ける
- #status に、実際に描いた件数を出す
- response.ok が false なら throw し、catch で一覧を空にしてエラー文を出す