JavaScript コース

1 STEP 1 / 7

JavaScriptとは？初心者向けわかりやすい解説【中高生向け】

⏱ 約25分やってみよう 1 クイズ 1

🎯 このレッスンで学ぶこと

JavaScriptとは何かを説明できます。
scriptタグの書き方がわかります。
console.log()でコンソールに文字を表示できます。
エラーメッセージの基本的な読み方がわかります。

📖 CSSコースの復習

CSSはウェブページの見た目を整える言語
セレクタ・プロパティ・値の3つで書く
Flexboxで要素を横並びにできる

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

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ファイルを用意する
VS Codeで my-practice フォルダを開き、新しいファイル index.html を作ってください。（HTMLコースで使った index.html とは別に、新しく作ってください）以下を書いてください。

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 をダブルクリックして Google Chrome などのブラウザで開き、F12（Mac: Cmd+Option+I）を押して開発者ツールを開きます。上部のタブから「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 に存在しない（タイポ）。

script.js

// 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が読み込まれる前に実行されてエラーになることがある。

💡 エラーは敵じゃない！「ここが間違ってるよ」と教えてくれる味方です。

まず1種類だけ覚えよう:
Uncaught ReferenceError: xxx is not defined
→ 「xxx という名前が見つからない」という意味

原因のほとんどはスペルミスです。console.log を consol.log と書いていないか、大文字・小文字が合っているか確認しましょう。エラーメッセージの読み方はエラー辞典でも調べられます。