AI駆動開発_ChromeDevTools入門_新人向け

う さう さ研 修 工房 実 践ガ イド 新人エンジニアのための Chrome DevTools入門 AIが書いたコードを、自分の目で確かめる力をつける Console / Network / Sources の使い方、はじめの一歩 うさうさ先生 監修

目次 01 なぜ新人こそDevToolsか 05 Sourcesパネル入門 02 DevTools全体像 06 AIとの協働ワークフロー 03 Consoleパネル入門 07 Tips & ショートカット 04 Networkパネル入門 08 まとめ・次の一歩 うさうさ研修工房｜新人のためのChrome DevTools入門 2

なぜ新人こそDevToolsか AIが書いたコードを、そのまま信じない。まず自分の目で確かめる 何が起きているか、見えない不安 AIが書いたコードは、正しく動いているのか止まっているのか分かりにくい エラーが出ても、意味が分からない 赤い文字を見ただけで、そこで思考が止まってしまう 先輩に聞く前に、自分で確かめたい 「まず自分で調べてみて」と言われたときの、最初の一歩になる AIの答えを、そのまま信じるのは危険 AIも間違えることがある。事実で確かめる習慣を、早いうちに身につける うさうさ研修工房｜新人のためのChrome DevTools入門 3

DevTools全体像 まず押さえたい6つのパネル Elements Console Sources 見た目のズレを、コードを直接触りながら確 認できる ログとエラーを見る、最初に覚えるべきパネ ル コードを一行ずつ止めながら、動きを目で追 える Network Performance Application 通信の中身を確認できる、API理解の入口 「なんか重い」の原因を、数字で確かめられ る 保存されているデータをのぞいて見られる うさうさ研修工房｜新人のためのChrome DevTools入門 4

Consoleパネル入門 まずはここから。エラーと仲良くなる第一歩 赤色の行 エラーの場所を、色で見分ける 赤字はエラー、黄色は警告。まずは色を見るだけで状況がつかめる console.log() 変数の中身を、その場で確認 「今この値はどうなっている？」をコードに書き足すだけで確認できる エラー行クリック エラー文をクリックして、原因の行へ エラーメッセージの右側のリンクを押すと、該当のコードにジャンプする Errorsフィルタ 自分に関係あるログだけを表示 大量のログの中から、エラーだけに絞り込んで見やすくする うさうさ研修工房｜新人のためのChrome DevTools入門 5

Networkパネル入門 AIが呼んでいるAPIが、ちゃんと動いているかを確かめる Fetch/XHR 自分のAPI通信だけに絞り込む 画像やCSSなどのノイズを除き、通信だけに集中して見られる Status 200 / 404 / 500 の意味を知る 成功か失敗か、まずはステータスコードだけ見られれば十分 Response 返ってきたデータの中身を見る サーバーから何が返ってきているかを、その場で確認できる Timing 通信にかかった時間を確認 「なぜ遅いのか」を調べる、最初の手がかりになる うさうさ研修工房｜新人のためのChrome DevTools入門 6

Sourcesパネル入門 コードを一行ずつ止めて、動きを自分の目で追いかける Breakpoint 行番号をクリックして一時停止 怪しい処理の手前に印をつけて、そこで一度止めてみる 変数を覗く 止まった場所で、変数の中身を確認 「このとき、この値は何だったのか」をその場で確かめられる ステップ実行 一行ずつ進めながら、流れを追う コードがどんな順番で動いているかを、目で追いかけられる Watch 気になる変数だけ、常に表示 毎回確認したい変数を、見張り役として登録しておける うさうさ研修工房｜新人のためのChrome DevTools入門 7

AIとの協働ワークフロー DevToolsは「AIに何を伝えるか」をはっきりさせるための道具 1 2 3 4 5 エラー発生 DevToolsで確認 AIに質問 答えを検証 直して共有 画面やAPIで、想定外の動きが起き る まずConsole/Network/Sourcesで 事実を見る 見た事実（エラー文やログ）を添 えて相談する AIの提案を、DevToolsで実際に確 かめる 確認できたら、先輩にも見せて次 に進む ポイント：AIの答えは「たぶん合ってる」で終わらせない。DevToolsで確かめてから、次に進む。 うさうさ研修工房｜新人のためのChrome DevTools入門 8

Tips & ショートカット 覚えておくと、明日から手が止まりにくくなる小技 エラー文は省略せずAIに貼る ショートカット ⌘/Ctrl + Opt/Shift + I そのままコピペすると、AIが状況を正確に判断しやすい DevToolsを開閉 わからない用語はまず検索 MDNや公式ドキュメントを見てからAIに聞くと理解が深まる ⌘/Ctrl + Shift + C 要素選択モード 小さく試して、小さく直す ⌘/Ctrl + P（Sources） ファイル検索 ⌘/Ctrl + [ ／ ] パネル間を移動 Esc Consoleドロワー切替 一度に全部直そうとせず、一箇所ずつ確認しながら進める 詰まったら先輩にも見せる DevToolsで確認した内容を見せると、質問が具体的になる うさうさ研修工房｜新人のためのChrome DevTools入門 9

まとめ・次の一歩 DevToolsは、新人の武器になる AIを信じつつ、鵜呑みにしない まずは、触ってみる 先輩に聞く前に、自分で確かめられるよう になる Console/Network/Sourcesで確かめてから 、次に進む習慣を 完璧を目指さず、小さく動かして確かめる ことから始めよう 次のステップ：次にエラーに出会ったら、AIに聞く前に一度DevToolsを開いてみましょう。 うさうさ研修工房