JavaScript超入門：最初に理解すべき5つの文法

「JavaScriptって名前は聞くけど、何ができるの？」「どこから学べばいいか分からない…」

そんなお悩みを持つ初心者の方へ。

JavaScriptは、Webページに動きをつけたり、ボタンのクリックに反応させたりする魔法のような技術です。

この記事では、プログラミングが初めてでも分かるように、
最初に覚えるべき5つの基本文法を具体例と一緒に丁寧に解説します。

「まずは1歩目を確実に踏み出したい」そんなあなたにぴったりの内容です。

変数と定数の書き方を覚えよう
1. 結論：letとconstでデータを保存します
条件分岐（if文）を使ってみよう
1. 結論：条件に応じた処理を分けるには if を使います
  1. 例：テストの点数で判定
  2. よくある間違い：
繰り返し処理（for文）を理解する
1. 結論：同じ処理を何回もするときは for 文が便利です
  1. 説明：
  2. よくある間違い：
関数を定義して使い回す
1. 結論：関数にまとめると、何度も使えて便利です
  1. 例：
  2. よくある用途：
イベント処理とHTML連携の基本
1. 結論：HTMLと組み合わせると、ユーザーの操作に反応できます
  1. 例：ボタンを押すとメッセージを表示
  2. 注意点：
よくあるJavaScriptのエラーとその対処法
1. 結論：スペルミスと文法ミスが大半を占めます
  1. つまずきやすいポイント：
  2. 解決策：
完成コード：名前入力であいさつを表示するアプリ
まとめ：5つの文法で一気にレベルアップ

変数と定数の書き方を覚えよう

結論：letとconstでデータを保存します

JavaScriptでは、情報を変数や定数に保存して使い回します。

変数の例（変わるもの）：

let score = 90;
score = 100;

定数の例（変わらないもの）：

1	`const taxRate = 0.1;`

letは再代入OK、constは固定値という違いがあります。

よくある間違いと対策：

constで定義しておいてあとで値を変えようとしてエラーになる
→ 「後で変える可能性があるなら let にしましょう」

条件分岐（if文）を使ってみよう

結論：条件に応じた処理を分けるには if を使います

if文は、「ある条件が成り立つときだけ動かしたい」ときに使います。

例：テストの点数で判定

let score = 85;
 
if (score >= 90) {
  console.log("すごい！");
} else if (score >= 70) {
  console.log("よくがんばったね");
} else {
  console.log("つぎはもっとがんばろう");
}

よくある間違い：

=（代入）と==や===（比較）を混同する
→ ===は「型も値も同じか？」を判断します。

繰り返し処理（for文）を理解する

結論：同じ処理を何回もするときは for 文が便利です

たとえば「1〜5まで数える」ようなときは、こう書きます：

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

説明：

i = 1 はスタートの数
i <= 5 は終わる条件
i++ は1ずつ増える操作

よくある間違い：

i++ を忘れると無限ループになる
→ 必ず終了条件が成り立つように注意しましょう。

関数を定義して使い回す

結論：関数にまとめると、何度も使えて便利です

関数とは、「あるまとまった処理に名前をつけて何度も呼び出せるようにしたもの」です。

例：

function sayHello(name) {
  console.log("こんにちは、" + name + "さん");
}
 
sayHello("太郎");

よくある用途：

ボタンを押したときにメッセージを出す
数値を計算して表示する

イベント処理とHTML連携の基本

結論：HTMLと組み合わせると、ユーザーの操作に反応できます

JavaScriptの本領は、「Webページと連動して動くこと」です。

例：ボタンを押すとメッセージを表示

<button onclick="showMessage()">クリックしてね</button>
 
<script>
  function showMessage() {
    alert("こんにちは！");
  }
</script>

注意点：

onclick は HTMLタグ内でイベントを指定
alert() は画面にポップアップで表示する関数です

よくあるJavaScriptのエラーとその対処法

結論：スペルミスと文法ミスが大半を占めます

つまずきやすいポイント：

Uncaught ReferenceError：未定義の変数を使っている
SyntaxError：カッコやセミコロンの閉じ忘れ
TypeError：関数や値の使い方がまちがっている

解決策：

Google Chromeの開発者ツールでエラー文をチェック
コードエディタ（VSCodeなど）の補完機能を活用
小さく試して結果を確認しながら進める

完成コード：名前入力であいさつを表示するアプリ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptあいさつ</title>
</head>
<body>
  <h1>お名前を入力してください</h1>
  <input type="text" id="username" placeholder="名前を入力">
  <button onclick="greet()">あいさつする</button>
  <p id="output"></p>
 
  <script>
    function greet() {
      const name = document.getElementById("username").value;
      const message = "こんにちは、" + name + "さん！";
      document.getElementById("output").textContent = message;
    }
  </script>
</body>
</html>