「JavaScriptって名前は聞くけど、何ができるの？」「どこから学べばいいか分からない…」
そんなお悩みを持つ初心者の方へ。
JavaScriptは、Webページに動きをつけたり、ボタンのクリックに反応させたりする魔法のような技術です。
この記事では、プログラミングが初めてでも分かるように、
最初に覚えるべき5つの基本文法を具体例と一緒に丁寧に解説します。
「まずは1歩目を確実に踏み出したい」そんなあなたにぴったりの内容です。
変数と定数の書き方を覚えよう
結論：letとconstでデータを保存します
JavaScriptでは、情報を変数や定数に保存して使い回します。
変数の例（変わるもの）：
let score = 90;
score = 100;
定数の例（変わらないもの）：
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>
まとめ：5つの文法で一気にレベルアップ
JavaScriptの基本をマスターすれば、できることが一気に広がります。
- 変数・定数でデータを保存
- if文で条件によって分岐
- for文で繰り返し処理
- 関数で処理をまとめる
- イベントでユーザー操作に反応
これらを組み合わせることで、あらゆるWebアプリの基礎が身につきます。
最初はわからなくても、書いて動かしてみることが一番の近道です！
Japanese 
English