undefined が出る｜基礎を学ぶ

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

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

初段 / 目安 20分

琥珀さんが声をひそめます。「お知らせ欄にね……『undefined』って堂々と表示されてるんだ。商店街の恥だから今日中に」。

開いてみると、たしかに出ています。お知らせの一覧はちゃんと3件並んでいて、日付も本文も正しく出ています。それなのに、タイトルの位置にだけ undefined と表示されています。

undefined が画面に出たときは、まず落ち着いてください。エラーではありません。JavaScript でオブジェクトに存在しないプロパティを読むと、例外を投げずに undefined が返ります。React はそれを受け取って、そのまま文字として画面に出します。「読めなかった」と怒られるのではなく、「読めなかったという事実」がそのまま画面に貼り出されるわけです。

だから、この呪いの正体はほぼ必ず 参照している名前と、データにある名前がずれている ことです。よくあるのは、綴りの打ち間違い、キャメルケースとスネークケースの取り違え、階層を1つ飛ばした参照の3つです。

切り分けの順番は決まっています。1つめは、データの実物を見ることです。console.log(news) と1行入れて、コンソールで実際のオブジェクトを開きます。これで「データにはどんな名前で入っているのか」が確定します。憶測でコードを読み直すより速くて確実です。

2つめは、そのデータの名前と、JSX で書いた名前を並べて見比べることです。今回は片方に打ち間違いがあります。データ側が正しいのか、参照側が正しいのかは、他の使われ方を見て判断してください。

なお、item.a.b のように階層を辿る途中が undefined だと、こちらは undefined の表示では済まずエラーで画面が落ちます。そういう場面で使うのが item.a?.b というオプショナルチェーンです。ただし今回は1階層の読み違いなので、?. を足しても undefined は消えません。?. は落ちるのを防ぐ道具であって、正しい値を出す道具ではない という区別は覚えておいてください。

完成条件

お知らせ3件それぞれのタイトルが正しく表示される
画面のどこにも undefined が出ていない
日付と本文の表示は今のまま変えない

進め方

初期コードのお知らせデータは、正しい名前で入っています。呪われているのは参照している側です。データの構造をよく見てから、JSX の中の参照を直してください。

直したら、3件すべてのタイトルが出ていることを目で確かめてください。1件だけ直して安心するのがデバッグでいちばんよくある取りこぼしです。

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

供養が済むと、琥珀さんが胸をなでおろします。「恥が……消えた……」。