💡

オタクくん「ギャル先輩...!!! エラーが怖いです....」

2024/05/24に公開

オタクくんの悩み

オタクくん「ギャル先輩...!!! エラーが、怖いです....」

ギャル先輩「えっ、また何か困ってるの？てーか、オタクくんってパソコンに詳しそうなのに、そんなのも怖がってるの?www。」

オタクくん「いや、エラーが出るとどう対処していいかわからなくて、すごく不安になるんです。」

ギャル先輩「んー、そっか。じゃあ、あーしがエラー対処の基本から教えてあげる！」

ギャル先輩「まず、エラーが出たらエラーメッセージを読むことが大事だよ。」

オタクくん「エラーメッセージって、英語で長くて難しいんですよね…」

ギャル先輩「最初はそうかもだけど、慣れるとヒントがいっぱい詰まってるんだよ。例えばこんなの見たことある？」

ReferenceError: foo is not defined

オタクくん「見たことあります！でも、何が問題かわからなくて…」

ギャル先輩「これは、fooっていう変数が定義されてないってエラーだよ。つまり、どこかでfooを宣言し忘れてるんだね。」

オタクくん「じゃあ、どうやってエラーを解決すればいいんですか？」

ギャル先輩「次に、デバッグの基本を教えるね。まず、エラーが出た箇所を確認して、その前後のコードをよく見てみるの。」

オタクくん「具体的にはどうやるんですか？」

ギャル先輩「例えば、以下のコードでエラーが出たとするよ。」

function greet() {
    console.log(message);
}

greet();

オタクくん「あ、messageが定義されてないからエラーになるんですね。」

ギャル先輩「そうそう。だから、まずmessageを定義する必要があるんだ。」

function greet() {
    let message = "Hello, World!";
    console.log(message);
}

greet();

オタクくん「これでエラーが解決しました！」

オタクくん「他にエラー対処のコツはありますか？」

ギャル先輩「次は、デバッグツールを使うことだよ。ブラウザにはデベロッパーツールがあって、これを使うとコードの実行状況を詳しく見れるの。」

オタクくん「デベロッパーツールってどうやって使うんですか？」

ギャル先輩「例えば、ChromeならF12キーを押すと開けるよ。そこからコンソールタブを使ってエラーメッセージを確認したり、ソースタブでブレークポイントを設定してコードの流れを追ったりできるんだ。」

オタクくん「デバッグツール以外にも何かありますか？」

ギャル先輩「ログを活用するのも大事だよ。console.logを使って、どこで何が起きてるか確認するの。」

オタクくん「具体的にはどうやればいいですか？」

ギャル先輩「例えば、こんな感じでログを追加してみるといいよ。」

function greet() {
    let message = "Hello, World!";
    console.log("Message is set to:", message);
    console.log(message);
}

greet();

オタクくん「これで、変数の値がちゃんと設定されているか確認できるんですね。」

オタクくん「ギャル先輩、ありがとうございます！エラーが怖くなくなってきました。」

ギャル先輩「オタクくん、素直でいい子だねwww。でも、エラーは成長のチャンスだから、怖がらずにチャレンジしよう！」

オタクくん「はい、頑張ります！」