Reactを使うためのJavaScriptの超入門⑬（console.logへの導入）
前回の第12回ではデバッグについて説明しました😊
🌹 ①「console」画面を実際に見てみました。
🌹 ②「Uncaught ReferenceError: b is not defined」
⇒一見難しそうですが、「b」が定義されていないと書いてありました。
前回はバグによって、そもそもプログラムがうまく動かない場合を説明しました😲
では、プログラムは動くものの、結果が違う場合、どのようにバグを見つければよいでしょうか🙄❓
例えば、次のようにしていきたいと考えました🍀
りんご １個 × ５人 ＝ ５個
みかん ５個 × ５人 ＝ ２５個
合計 ５個 ＋ ２５個 ＝３０個
でも、実際は次のようにコードを書いてしまいました😅
りんご ＝ １個 × ５人
みかん ＝ ５個 ＋ ５人 ← ここを間違った
合計 ＝ ５個 ＋ １０個
結果は当初想定していた「30個」ではなく、「15個」となってしまいました😲
これはみかんの部分で本来「×」としたかった部分を間違って「＋」としてしまったからです😅
でも、これは式自体は全て正しい計算ですので、プログラムは正常に動いてしまいます💦
<!DOCTYPE html>
<html lang= "ja">
<head><title>タイトル</title></head>
<body>
<script>
let Apple;
let Orange;
let Total;
Apple = 1 * 5;
Orange = 5 + 5;
Total = Apple + Orange;
document.write(Total);
</script>
</body>
</html>
まず、簡単なおさらいからです😉
let Apple;
ここは「Apple」という変数を使いますよーという「変数の宣言」でしたね😊
これによって「Apple」という変数を使うことができるようになりました😄
そして、
Apple = 1 * 5;
の部分の「*」は「×」（かける）を表しています📕
ちなみに「＋」（たす）と「‐」（マイナス）は同じですが、「÷」（割る）は「/」を使います📝
さて、では本題に戻ります💎
もともと「30」と表示されることを想定していたのですが、実際には「15」と表示されました🌹
では、なぜ「15」と表示されているのでしょう🙄❓
それは、この部分ですね📱
document.write(Total);
つまり、「Total」が「15」であるので「15」と表示されています📕
では、「Total」はどうやって計算されているのでしょうか❓
それがこの部分です⭐
Total = Apple + Orange;
つまり、AppleとOrangeのどちらかの値（実際には「Orange」）が誤っているので、Totalが間違っている可能性があります🍁
では、「Apple」、「Orange」の値はどのように調べればよいのでしょうか？
それが、console.logです🍀
このconsole.logの使い方については、次回にしていこうと思います😄
なお、このJavaScriptを発展させ、「React」を使うと、より高度なWebアプリを作ることができるようになります🤗✨✨
そのReactについて実践的な情報共有をするオンライン勉強会が12月18日（金）に開催されます😊🍀
↓ 詳しくはこちら
「Tech Stand #2 React Native」
Reactによってどんなことができるのだろう❓とご興味をもたれた方、参加費は無料ですので、ぜひぜひ参加してみてください🤗✨✨
いいなと思ったら応援しよう！
