Photo by
nako
Reactを使うためのJavaScriptの超入門⑫（バグを探してみましょう②）
前回の第11回ではデバッグについて説明しました😊
① バグを直すことをデバッグという
② デバッグは「ディベロッパーツール」を使うと便利
🍀Windows ⇒ 「Ctrl」＋「Shift」＋「I」（または「F12」）
🍀Mac ⇒ 「Opt」 + 「Cmd」 + 「I」
③ 「ディベロッパーツール」の「Console（コンソール）」を見る
前回のコードをもう一度見てみましょう😊（バグがあります🐝）
<!DOCTYPE html>
<html lang= "ja">
<head><title>タイトル</title></head>
<body>
<script>
function ReturnName(name){
return name + 'さん'
}
let a;
a=ReturnName('太郎');
document.write(b); ← ここがバグの部分です🐝
</script>
</body>
</html>
本日は、「Console（コンソール）」という場所の中身を見てみましょう😊
赤字で次のように書かれています🍀
Uncaught ReferenceError: b is not defined
なんだか難しそうですが、実はとっても素直に書いてあります🤗
Uncaught：つかめなかった
ReferenceError：参照エラー
b is not defined：「b」は定義されていません。
つまり、bが定義されていなかったので、エラーになったのですね😲
確かにコードを見ると、aは定義されているものの、bは定義されていませんでした😅
これくらいの短いコードなら、bがどこにあるのかすぐにわかると思います📕
でも長いコードですと、見つけるのが大変そうですね💦
そんなとき、青い部分を見てみましょう💎
Sample a-11.html:15
：の前の「Sample a-11.html」はこのファイル名です📱
では、この「15」は何でしょう🙄❓
これはバグが発生しているコードの行数になります😊🌹
選択してみるとこの画面になります📝
黄色になっている部分が今回のバグの部分です🌈
ここを直せばいいんですね😄🎶
今回はこの辺りで終わりにしたいと思います😊
なお、このJavaScriptを発展させ、「React」を使うと、より高度なWebアプリを作ることができるようになります🤗✨✨
そのReactについて実践的な情報共有をするオンライン勉強会が12月18日（金）に開催されます😊🍀
↓ 詳しくはこちら
「Tech Stand #2 React Native」
Reactによってどんなことができるのだろう❓とご興味をもたれた方、参加費は無料ですので、ぜひぜひ参加してみてください🤗✨✨
いいなと思ったら応援しよう！
