レッスン1：JavaScriptって何？

📖 導入 — ページを「動かす」には？

HTMLでページの骨格を作り、CSSで見た目を整えました。でも、まだ何かが足りません。

ボタンを押したらメッセージが出る
入力した文字がリストに追加される
クイズに答えると正解・不正解が表示される

こういった「動き」を作るのが JavaScript の仕事です！

📝 JavaScriptとは？

JavaScript（ジャバスクリプト）は、ウェブページに「動き」や「インタラクション」をつけるためのプログラミング言語です。

役割	言語
骨格・構造	HTML
見た目・デザイン	CSS
動き・プログラム	JavaScript

JavaScriptはHTMLファイルの中に <script> タグを使って書けます。<body> の一番下に置くのが基本です。

<script>
  // ここにJavaScriptを書く
</script>

console.log() は、ブラウザの「コンソール」に文字を表示する命令です。

console.log("はじめてのJavaScript！");

🤔 考えてみよう：console.log("Hello!") の "Hello!" を自分の名前に変えたらどうなる？開発者ツールで確認してみよう！

💡 デバッグの基本：console.log() は「今ここで何が起きているか」を確認するツールです。わからなくなったら console.log() で確認する習慣をつけましょう。

💻 やってみよう！

HTMLファイルを用意する
practice フォルダに index.html を作り、以下を書いてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <h1>JavaScriptをはじめよう</h1>

    <script>
      console.log("はじめてのJavaScript！");
    </script>
  </body>
</html>

ブラウザで開いてコンソールを確認する
index.html をブラウザで開き、コンソールを開きます（F12 → 「Console」タブ）。
コンソールを確認する
はじめてのJavaScript！ と表示されたら成功です！ 🎉
自分の情報を表示してみる
```
console.log("名前：〇〇");
console.log("学年：中学〇年生");
console.log("好きなこと：〇〇");
```
〇〇 の部分を自分の情報に書き換えて確認してみましょう。

🛠️ 開発者ツールを開こう

JavaScriptの結果を確認するには、ブラウザの「開発者ツール」を使います。

Windows：F12 キーを押す
Mac：Cmd + Option + I を押す
または、ページ上で右クリック →「検証」を選ぶ

開いたら「コンソール」タブをクリックしてください。ここにJavaScriptの結果が表示されます。

📖 エラーメッセージの読み方

コンソールに赤いメッセージが出ても、慌てなくて大丈夫です。エラーメッセージは「ここがおかしいよ」というヒントです。読み方を知っておくと、問題をすぐに解決できるようになります。

1. エラーメッセージの基本構造

コンソールに表示されるエラーは、次の3つの情報で構成されています。

部分	意味
`ReferenceError`	エラーの種類（何が問題か）
`myVar is not defined`	具体的な内容（どこが問題か）
`script.js:5`	ファイル名と行番号（どこで起きたか）

よく出るエラーの種類：

ReferenceError：存在しない変数や関数を使おうとしたとき
TypeError：使えない操作をしようとしたとき（例：null に対して操作する）
SyntaxError：コードの書き方が間違っているとき（例：括弧の閉じ忘れ）

2. 具体例で読んでみよう

Uncaught ReferenceError: myVar is not defined

「myVar という変数が定義されていません」→ 変数名のタイポ、または宣言前に使っている。

// ❌ 間違い
let myvar = "こんにちは";
console.log(myVar); // ReferenceError!

// ✅ 正しい
let myVar = "こんにちは";
console.log(myVar);

Uncaught SyntaxError: Unexpected token '}'

「予期しない } があります」→ 括弧や波括弧の閉じ忘れ・多すぎ。

// ❌ 間違い
if (score > 80) {
  console.log("合格");
}} // SyntaxError!

// ✅ 正しい
if (score > 80) {
  console.log("合格");
}

Uncaught TypeError: Cannot read properties of null

「null のプロパティを読み取れません」→ getElementById() で指定した id が HTML に存在しない（タイポ）。

// HTML に id="massege"（スペルミス）がある場合
const el = document.getElementById("message"); // null が返る
el.textContent = "こんにちは"; // TypeError!

// ✅ HTML の id と JavaScript の文字列を一致させる

3. エラーが出たときの3ステップ

⚠️ エラーが出ても、パソコンは壊れません。落ち着いて次の3ステップを試してみましょう。

① エラーメッセージを読む
コンソールの赤いメッセージを見て、「エラーの種類」と「具体的な内容」を確認する。

② 行番号を確認する
script.js:5 のように書かれている数字が、エラーが起きた行番号。VS Code でその行を確認する。

③ エラー文をそのままコピーして検索する
Uncaught ReferenceError: xxx is not defined をそのままコピーして検索する。同じエラーで困った人の解決策が見つかることが多い。

⚠️ よくあるミス

= と === の混同：= は「代入」、=== は「比較」。if (x = 5) は常に true になってしまうので注意。
大文字・小文字の区別：JavaScriptは大文字・小文字を区別する。Console.log() はエラーになる。console.log() と書こう。
スクリプトの読み込み位置：<script> タグは </body> の直前に書くのが基本。<head> に書くとHTMLが読み込まれる前に実行されてエラーになることがある。

📌 まとめ

✅ JavaScript はウェブページに動きをつけるプログラミング言語
✅ HTML・CSS・JavaScriptの3つがウェブ開発の基本セット
✅ <script> タグの中にJavaScriptを書く
✅ console.log("文字") でコンソールに文字を表示できる

🚀 次のレッスンへ

次のレッスンでは、データを保存する「変数」について学びます！

🔍 もっと調べてみよう：「JavaScript console.log 使い方」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！