ボタンが反応しない｜基礎を学ぶ

フロントデバッグ道場呪われたウィジェット供養の10問

React で書かれた壊れたウィジェットを、自分の手で直していく演習専用コースです。解説はありません。症状と完成条件だけを読み、原因を突き止めて直します。手が止まったときのために、方針・調べ方・部分解の3段階のヒントを各問に用意しています。他の道場と違い、白紙からではなく「動いているように見えて壊れているコード」から始まります。関数名のタイポ、フォームの既定動作、key 忘れ、プロパティ名の取り違えといった見つけやすい呪いから始まり、state の直接変更、useEffect の無限ループ、set 直後の古い値、非同期応答の追い越しといった再現しにくい呪いへ進み、最後は5つの呪いが同時にかかったウィジェットを1つずつ払います。1問15分から45分、全10問で約4.5時間です。React入門を終えて「エラーが出ると手が止まる」と感じている方に向いています。

初段 / 目安 15分

昼のオフィスで、琥珀さんが手招きしています。「夜だけじゃなくて、昼の顔も見せようか。商店街サイトのフロント……前任者が残したウィジェットたちが、呪われてるんだ。動いてるように見えて、触ると壊れる。供養(デバッグ) を頼めるかな」。

この道場は全問、壊れたコードから始まります。ゼロから書くのではなく、すでにそこにある呪いを見つけて祓うのが仕事です。

最初の供養依頼はこれです。琥珀「スタンプラリーの『押す』ボタン、押しても無反応って苦情が3件。コードは……一見普通なんだよね」。

画面を見ると、スタンプの数が className="stamp-count" の段落に出ていて、ボタンもちゃんと並んでいます。押しても何も起きません。エラーで真っ赤になるわけでもなく、静かに無反応です。

こういうときにまず疑うのは イベントがそもそも正しく繋がっているか です。React では onClick に渡した関数が、クリックのたびに呼ばれます。名前が1文字ずれているだけで、繋がる相手はまったく別の関数になります。それでもエラーは出ません。JavaScript から見れば、どちらも「ちゃんと存在する関数」だからです。

エラーが出ないタイプの故障 が、いちばん見つけにくい呪いです。画面は普通に出ているし、コンソールも静かで、ただ何も起きない。ここで頼りになるのは、憶測ではなく実際に動かして確かめる手順です。

切り分けの手順は決まっています。まず、増やしたい処理の中に console.log を1行入れてボタンを押します。ログが出ないなら、その処理は そもそも呼ばれていません。呼ばれてすらいないなら、疑うべきは処理の中身ではなく繋ぎ方です。そこまで分かれば、あとは onClick に書いた名前と、このファイルにある関数の名前を並べて見比べるだけです。

完成条件

ボタンを押すたびに、className が stamp-count の段落の数が1ずつ増える
スタンプ数は state で持ったまま、そこは壊さない

進め方

初期コードのスタンプ数は最初から useState で持たせてあり、数を増やす処理も中身は正しく書いてあります。呪われているのは繋ぎの一点だけ です。大きく書き直す必要はありません。使われていない関数が1つ残っているはずなので、それも一緒に供養して構いません。

直したら、必ず自分でボタンを押して数が増えることを確かめてください。デバッグは「直したつもり」がいちばん危ないので、症状が消えたことを目で見るところまでが1セットです。

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

供養が済んだら、琥珀さんはこう言うはずです。「タイポって、いちばん人間らしい呪いだよね」。