総合 5つの呪いを全部払え｜基礎を学ぶ

師範 / 目安 45分

琥珀さんが、ひときわ古そうなファイルを開いて言います。「前任者の最高傑作『商店街くじ引きウィジェット』……5つ呪われてる。全部供養できたら、商店街のフロントは正式に君の担当だ。健闘を祈る」。

道場の10問目、最後の依頼です。新しく覚えることはありません。ここまでの9問で1つずつ祓ってきた呪いが、1つのウィジェットにまとめて棲みついているだけです。

このウィジェットがやることは3つです。景品の一覧を取ってきて出す。抽選券を増やす。名前を入れて申し込む。それだけの画面に、5つの呪いが入っています。

最初にやることは、直すことではありません。症状を全部書き出すことです。 5つあると分かっているので、5つ見つかるまで手を動かさないでください。1つ見つけるたびに直したくなりますが、先に全体を見ておかないと、直した副作用で別の症状が隠れたときに気づけません。

見つけ方の道具は3つです。

画面 — 開いた瞬間の状態と、押したときの変化を見ます。何かが表示されない、何かが増えない、何かが消える。 コンソール — 赤いエラーは落ちた場所を教えてくれます。黄色い警告は「いつか事故る」の予言です。どちらも読み飛ばさないでください。 通信の回数 — この画面には className が calls の段落に通信回数が出ています。誰も触っていないのに増えていくなら、それ自体が症状です。

呪いの見取り図として、これまでの9問を並べておきます。この中のどれかが5つ、この画面に入っています。

繋ぎ忘れ、綴り違いでイベントが動かない
フォームの送信でページごと初期化される
一覧に key が無くて警告が出る
存在しないプロパティを参照して undefined が出る
state を直接書きかえて画面が更新されない
useEffect の依存にオブジェクトを渡して呼び続ける
set した直後に古い state を読む
遅れた応答が新しい結果を上書きする
途中が欠けたデータへの参照で落ちる

1つ直すたびに、必ず画面で確かめてください。 5つまとめて書き直して動かないと、どの直しが効いてどの直しが余計だったのか、もう分かりません。デバッグで一番高くつくのは、直しすぎて何が起きているか見失うことです。

なお、この画面には触ってはいけない場所があります。景品のデータは外から届くもので、こちらの都合では埋められません。通信の非常ブレーキ LIMIT と、1.5秒後の通信回数を書き留める見張りも、呪いではなく前任者が残した安全装置です。どちらも残したまま、欠けていても壊れない画面にしてください。

完成条件

景品の一覧

画面を開いてしばらく置いても、className が calls の段落が「通信 1 回」のまま増えない
前任者の見張りが出す「1.5秒後の通信回数」が 1 になる
景品が className が prize の要素として4件並ぶ
在庫の入っていない景品があっても落ちず、className が left の欄に調整中であることが分かる文が出る
一覧に key の警告が出ない

抽選券

「抽選券をもらう」を押すたびに、className が tickets の段落の数が1ずつ増える

申し込み

名前を入れて申し込むと、画面が初期化されずに className が done の枠が出る
その枠に、入れた名前と抽選券の枚数が読み取れる形で出る

進め方

順番に迷ったら、次の順で進めてください。

まず落ちるもの・止まらないものから。開いた瞬間に壊れるものが残っていると、他の症状を見る画面すら手に入りません
次に押しても動かないもの。イベントと state の呪いです
最後に警告。動くようになってからコンソールを掃除します

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

すべての供養が済むと、琥珀さんはウィジェットを一度だけ触って、満足そうに手を離します。「供養、完了だね。……前任者って誰かって? ふふ、僕だよ」。

奥からカメ師範が一枚の紙を持って出てきます。そこには フロントデバッグ道場・師範代を允許する と書かれていました。10問すべて、動いているように見えて壊れているコードから始めました。エラー文を最後まで読み、症状を言葉にし、直した結果を自分の目で確かめる。その手順が身に付いた人は、初めて見るコードの前でも落ち着いていられます。琥珀さんの呪いは、そのために掛けられたものでした。