ボタンが反応しない
ボタンが反応しないフロントデバッグ道場 呪われたウィジェット供養の10問
React で書かれた壊れたウィジェットを、自分の手で直していく演習専用コースです。解説はありません。症状と完成条件だけを読み、原因を突き止めて直します。手が止まったときのために、方針・調べ方・部分解の3段階のヒントを各問に用意しています。他の道場と違い、白紙からではなく「動いているように見えて壊れているコード」から始まります。関数名のタイポ、フォームの既定動作、key 忘れ、プロパティ名の取り違えといった見つけやすい呪いから始まり、state の直接変更、useEffect の無限ループ、set 直後の古い値、非同期応答の追い越しといった再現しにくい呪いへ進み、最後は5つの呪いが同時にかかったウィジェットを1つずつ払います。1問15分から45分、全10問で約4.5時間です。React入門を終えて「エラーが出ると手が止まる」と感じている方に向いています。
レッスン
10件
所要時間
約4.5時間
ランク
中級
15分・登録なしで読めます
動く図解・ボタンが反応しない
動く図解・ボタンが反応しない
できるようになること
症状から原因を絞り込み、壊れた箇所を自分で見つけられる
state を直接書き換えると再描画されない理由を、直した経験として説明できる
useEffect の依存配列が毎回作り直されると無限ループになることを見抜ける
set した直後の値がまだ古い理由を理解し、イベントの値を使い分けられる
非同期の応答が追い越す競合を、最新かどうかの判定で防げる
前提知識・必要な環境
必須
- • React入門を終えていること
- • useState と useEffect を自分で書いたことがあること
環境
ブラウザ完結(インストール不要)
このコースに入っているもの
触れる図解
8本
手を動かす演習
10問
監修
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
コンソールと画面が教えてくれる、見つけやすい呪いを払います。
画面と内部の値がずれる、再現しにくい呪いを払います。
スタックトレースを読み、複数の呪いが同時にかかった一枚に挑みます。
このコースを終えると取れるバッジ
JavaScript 第1コース
0 / 10 レッスン
このコースの動く図解
動かしながら、仕組みや変化を目で確かめられます。