JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript:JavaScript文法の基礎 - Day1:JavaScriptとは・環境構築

JavaScript JavaScript
スポンサーリンク

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日間ずっと使い続けるスキルです。

タイトルとURLをコピーしました