有料プラン

フロントデバッグ道場 呪われたウィジェット供養の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などの実務の開発をベースに、学習コンテンツを作成しています。

  1. コンソールと画面が教えてくれる、見つけやすい呪いを払います。

  2. 画面と内部の値がずれる、再現しにくい呪いを払います。

  3. スタックトレースを読み、複数の呪いが同時にかかった一枚に挑みます。

JavaScript 第1コースのバッジ 未獲得

このコースを終えると取れるバッジ

JavaScript 第1コース

0 / 10 レッスン

このコースの動く図解

動かしながら、仕組みや変化を目で確かめられます。