Reactを使うためのJavaScriptの超入門⑪（バグを探してみましょう①）
前回の第10回では文字を強調する「タグ」について説明しました😊
🌹 ①<strong>～</strong> ⇒ 囲まれた内容を強調
🌹 ②<b>～</b> ⇒ 囲まれた文字を装飾
（②は、あまり使わない方がよい）
今まで、関数や戻り値、メソッドなどについて説明してきたので、少しずつ、コードが複雑になってきました🙄
そうなると、プログラム上、誤りも出てくると思います📝
この誤りをバグ（bug：「虫」という意味）といいます🐝
誤り（バグ）があれば、それを取り除く（直す）必要がありますね😲
このバグを取り除く（直す）作業をデバッグ（debug:「除虫する」という意味）といいます📱
では、実際にコードを見てみましょう😊（バグがあります🐝）
<!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>
どこにバグがあるでしょうか🙄❓
実は、この部分がおかしくなっていました😅
document.write(b);
「a」という変数を表示させたかったのに、「b」と記載しておりました💦
これくらいの短いコードならば、すぐに見つけることができるかもしれません😉
でもコードが長くなってくると大変ですね😅
こんなバグを見つけてくれるのが、「ディベロッパーツール」です🍀
その名の通り、「開発者用（developer）のツール（tool）」ですね📕
ここで「何かダウンロードかな。。」と思った方もいるかもしれません🙄
実は、ダウンロードは必要ありません🤗
ファイルを開いた状態で、次のように選択してください✨
①Windowsの場合 ⇒ 「Ctrl」＋「Shift」＋「I」（または「F12」だけ）
②Macの場合 ⇒ 「Opt」 + 「Cmd」 + 「I」
すると次のような画面が現れます🌹
右上の方に①「Elements」、②「Console」、③「Sources」、④「Network」とあります🌹
この「Console（コンソール）」という部分がデバッグを行うためのツールとなります🐝
ちなみにIT用語辞典の定義です📝
コンソールとは、制御盤、操作卓などの意味を持つ英単語。大型機械や電子機器などの操作や監視のための装置を一か所に集めた盤状あるいは卓状の装置のこと。転じて、コンピュータの入出力装置や、文字の入出力による対話的な操作システム、OSの中核部分を制御できる操作画面などを表す。
つまり、バグなどの重要な情報を制御するための画面ですね💻
では、この画面をどう見ていくかについては、次回にしていきたいと思います😊
なお、このJavaScriptを発展させ、「React」を使うと、より高度なWebアプリを作ることができるようになります🤗✨✨
そのReactについて実践的な情報共有をするオンライン勉強会が12月18日（金）に開催されます😊🍀
↓ 詳しくはこちら
「Tech Stand #2 React Native」
Reactによってどんなことができるのだろう❓とご興味をもたれた方、参加費は無料ですので、ぜひぜひ参加してみてください🤗✨✨
いいなと思ったら応援しよう！
