◎デバッグとは
意味:バグを無くす
デバックは、プログラミングに問題があった時にそれを解決すること。
○初心者にとって特に重要!!→なぜ重要なのか?
・自走力を身につけるため
プログラマーとして仕事をするには、自分で問題を解決するのが重要
・学習効率を向上させる
一般的なデバッグの知識は付け焼き刃の知識ではない。
すべてのプログラミングの学習に通じる考え方なので応用が効く。
○どうやってやるのか?
STEP1
証拠集め(情報収集)
STEP2
証拠を解釈(情報の意味を把握)
STEP3
犯人を推理(原因を推測)
・具体的に
STEP1
証拠集め(情報収集)
・エラーが、出ている確認! 一番大事
エラーは、最大のヒントです。ダイイングメッセージみたいなもの
読まないのはもったいない!!
・どういう場合に動かなくなるのか?
何をした時に動かなくなるのか?
どこまで動いている?
ブレークポイントなどを使いどこまで確実に動いているのか確認する
※もし証拠がない場合でも、証拠がないことが証拠と言えます👍
実際はどうするのか?
・HTML・CSSなら現状確認
どういうCSSが適用されているのかまずは確認する。
computedの欄を見る。
・サーバーサイド、フロントエンドなら
まずは、エラーがでていないかチェック
サーバーサイドだならターミナル フロントエンドならコンソールを確認する。
STEP2
証拠を解釈(情報の意味を把握)
①エラーメッセージの意味は?
エラーメッセージに答えが書いている場合
がほとんど。だが、エラーメッセージを読んでその意味を理解しないといけない。
翻訳ツールを使おう!
それでも意味が分からなければググって意味を調べよう
Deeplという翻訳ツールがおすすめ‼️
②同じ状況に陥っている人を探す
エラーメッセージもなくて動かない場合もある。そういうときは同じことが起こっている人がいないかググって確認しよう。
○具体例
undefind method 〇〇 nil:NilClassと出たとする
まずは翻訳する
未定義メソッド 〇〇 nill:NIllClass
ググる
エラー文を見た時に、エラーの上の方に書いてある undefind method name’ for nil:NilClass
という文言が原因究明のヒントになる。この文は何の値も入っていない空のメソッドに対してnameが適用されているから。エラーになっているということを意味している。
※ライブラリを読むのも良いです👌
STEP3
犯人を推理(原因を推測)
問題のある箇所をよく見てみよう
状況が把握できている状態で問題の箇所をよく見れば正解がわかるかも?
ブレークポイントで怪しいところを確認
原因と思われるところをブレークポイントで値を確認する。犯人はお前だ!と言いつける気分でやること。
○具体例
undefind method 〇〇 nil:NilClassと出た場合
まずはエラーが起こってる箇所を見直す
エラーメッセージの意味がわかっている状態で見れば意外にわかったりする。
何行目で起こっているかも出ている。
なぜNillになっているのか確認する
ブレークポイントを設定して、該当するインスタンスの値を確認する。そして、なぜそれがNillになっているのか考える。
○まとめ
デバックは、謎解きです!
証拠集め(情報収集) 証拠を解釈(情報の意味を把握) 犯人を推理(原因を推測)
初め二つは初心者でもできる!!間違えても大丈夫👍
この二つをやると、推理がよりできるようになる。
初心のうちは、最低30分!!!!は考えて悩もう!それでも分からなければ人に聞こう🙆