【初心者向け】JavaScript基本文法まとめ｜これだけは押さえておきたい書き方！

1. 変数の宣言と代入

let, const, var

let name = "Taro"; // 値の変更あり
const age = 25; // 値を固定（再代入不可）
var city = "Tokyo"; // 昔の書き方（非推奨）

2. データ型の基本

3. コンソール出力（デバッグ）

console.log("こんにちは"); // 開発中によく使う

ブラウザの「開発者ツール（F12）」→「Console」で確認できます！

4. 条件分岐（if文）

let score = 80;

if (score >= 90) {
console.log("すごい！");
} else if (score >= 60) {
console.log("合格です！");
} else {
console.log("残念…");
}

5. 繰り返し（for文 / while文）

for文（決まった回数）

for (let i = 0; i < 5; i++) {
console.log("こんにちは " + i);
}

while文（条件がtrueの間）

let count = 0;
while (count < 3) {
console.log("ループ中");
count++;
}

6. 関数（function）

function greet(name) {
console.log("こんにちは、" + name + "さん！");
}

greet("Taro"); // 呼び出し

アロー関数（最近の書き方）

const greet = (name) => {
console.log(`こんにちは、${name}さん！`);
};

7. 配列とオブジェクトの扱い

配列（複数の値をまとめる）

let fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits[1]); // → バナナ

オブジェクト（名前付きの情報）

let user = { name: "Taro", age: 25 };
console.log(user.name); // → Taro

8. イベント（クリックなど）

<button id="myBtn">クリックしてね</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
alert("ボタンがクリックされました！");
});
</script>

9. DOM操作（HTML要素を変更する）

<p id="message">こんにちは</p>
<button onclick="changeText()">変更</button>

<script>
function changeText() {
document.getElementById("message").textContent = "こんばんは！";
}
</script>

10. コメントの書き方

// これは1行コメントです

/*
これは
複数行の
コメントです
*/

まとめ：まずは「書いて・動かして・慣れる」ことが大切！