Day1 後半のゴール
後半では、前半で作った「Hello World」をさらに発展させ、
JavaScript を書くときに必ず使う基本テクニックを体験していきます。
特に次の4つを深掘りします。
console.logを使った練習<script>タグの書き方のバリエーション- コメントの書き方
- エラーが出たときの読み方(初心者が最初にぶつかる壁)
前半で「動いた!」という成功体験をしたので、
後半では「書く → 保存 → ブラウザで確認」を何度も繰り返し、
“手を動かす感覚” をしっかり身につけます。
console.log を使った練習
console.log は「プログラマーの懐中電灯」
console.log() は、JavaScript を学ぶ上で最強の味方です。
プログラマーは、コードの中で何が起きているかを確認するために、
しょっちゅう console.log() を使います。
初心者のうちは「画面に表示されないから地味」と思うかもしれませんが、
実はプロでも毎日使うほど重要な機能です。
いろいろな値を出してみる
文字列を出す
<script>
console.log("JavaScriptを学習中!");
</script>
数字を出す
<script>
console.log(2025);
</script>
計算結果を出す
<script>
console.log(10 + 20);
</script>
複数の値を出す
<script>
console.log("合計は", 10 + 20);
</script>
深掘り:なぜ console.log が重要なのか
JavaScript は「画面に見えないところで動く処理」が多い言語です。
そのため、内部で何が起きているかを確認するために、console.log() が“目”の役割を果たします。
セキュリティの観点でも、
「どんなデータが入ってきているか」を確認するのは非常に重要です。
不正な値が入ってきたら、そこで気づけるからです。
scriptタグの書き方のバリエーション
body の最後に書くパターン
初心者にもっともおすすめなのが、</body> の直前に <script> を書く方法です。
<body>
<h1>JavaScriptの練習</h1>
<script>
console.log("bodyの最後で実行されました");
</script>
</body>
この書き方のメリットは、
HTML が読み込まれた後に JavaScript が実行されるため、
HTML の要素を安全に操作できることです。
head に書くパターン(初心者はまだ使わなくてOK)
<head>
<script>
console.log("headで実行されました");
</script>
</head>
ただし、HTML が読み込まれる前に実行されるため、
HTML の要素を操作しようとするとエラーになることがあります。
外部ファイルを読み込むパターン
<script src="main.js"></script>
JavaScript が長くなってきたら、
HTML と分けて書く方が圧倒的に読みやすくなります。
コメントの書き方
コメントは「未来の自分へのメモ」
コードは書いた瞬間は理解できますが、
1週間後には「これ何だっけ?」となるのが普通です。
コメントは、未来の自分や他の開発者のためのメモです。
一行コメント
// これは一行コメントです
console.log("Hello");
JavaScript複数行コメント
/*
ここは複数行コメントです。
長い説明を書くときに使います。
*/
console.log("World");
JavaScript深掘り:コメントはセキュリティにも役立つ
セキュリティの観点では、
「なぜこの処理が必要なのか」をコメントに残すことが重要です。
理由がわからないコードは、
後から修正するときに危険なバグを生む可能性があります。
エラー体験と読み方
エラーは「失敗」ではなく「ヒント」
初心者が最初につまずくのが「エラー」です。
でも、エラーはあなたを責めているわけではありません。
むしろ「ここが違うよ」と教えてくれる親切な存在です。
よくあるエラー例
スペルミス
consol.log("Hello"); // console のスペルミス
JavaScriptブラウザのコンソールにはこう出ます。
Uncaught ReferenceError: consol is not defined
意味は「consol なんて知らないよ」ということです。
カッコの閉じ忘れ
console.log("Hello";
JavaScriptエラー:
Uncaught SyntaxError: missing ) after argument list
意味は「カッコが閉じられていないよ」です。
深掘り:エラーを読める人は強い
プログラミングは「エラーと仲良くなる」ことが上達の近道です。
エラーを恐れず、むしろ「ヒントをくれる味方」と思ってください。
セキュリティの世界でも、
エラーの内容を正しく理解できる人は非常に強いです。
エラーは「異常の兆候」を教えてくれるからです。
まとめ:今日の後半で身につけたこと
後半では、JavaScript を書く上で必須の基礎を体験しました。
console.logを使って内部の動きを確認する<script>タグの書き方を理解する- コメントでコードを整理する
- エラーを読み、修正する力をつける
これらは、今後30日間ずっと使い続けるスキルです。

