JavaScriptの基本構文を理解しよう！初心者向け解説

JavaScriptを学び始めるときに 「構文のルールがわからない…」 と思ったことはありませんか？
本記事では JavaScriptの基本的な構文ルール をわかりやすく解説します！

1. 変数の宣言

JavaScriptでは、データを格納するための 「変数」 を使います。
変数を宣言するには let、const、var の3つの方法があります。

変数の書き方

javascriptコピーする編集するlet name = "太郎";   // 変更可能な変数
const age = 25;      // 変更不可能な変数
var city = "東京";   // 昔の方法（今はあまり使わない）

ルール

• let は 後から値を変更できる
• const は 後から値を変更できない
• var は 古い書き方なので、基本的には使わない方がよい

2. データの型（型の種類）

JavaScriptには いくつかのデータ型 があります。

主なデータ型

書き方の例

javascriptコピーする編集するlet message = "こんにちは";  // 文字列
let number = 100;           // 数値
let isHappy = true;         // 論理値
let fruits = ["Apple", "Banana", "Grapes"];  // 配列
let person = { name: "太郎", age: 25 };      // オブジェクト

3. 条件分岐（if文）

if 文を使うと 「もし○○なら…」という条件分岐 ができます。

書き方

javascriptコピーする編集するlet score = 85;

if (score >= 80) {
    console.log("合格です！");
} else if (score >= 60) {
    console.log("再試験");
} else {
    console.log("不合格です");
}

ポイント

• if の条件が true の場合、そのブロック {} 内のコードが実行される
• else if で 複数の条件を追加 できる
• else は どの条件にも当てはまらなかった場合 に実行される

4. 繰り返し処理（ループ）

ループを使うと、同じ処理を何度も繰り返す ことができます。

for文（回数が決まっている場合）

javascriptコピーする編集するfor (let i = 1; i <= 5; i++) {
    console.log("これは " + i + " 回目のループです");
}

while文（条件を満たす間繰り返す）

javascriptコピーする編集するlet count = 1;
while (count <= 5) {
    console.log("カウント：" + count);
    count++;
}

5. 関数（function）

関数は「処理をまとめる」ための仕組み です。
同じ処理を 何回も使いまわせる ので便利です！

基本の書き方

javascriptコピーする編集するfunction sayHello() {
    console.log("こんにちは！");
}

sayHello(); // こんにちは！ と表示される

引数と戻り値

javascriptコピーする編集するfunction add(a, b) {
    return a + b;
}

let result = add(5, 3);
console.log(result);  // 8

• function add(a, b) → a と b という値を受け取る
• return a + b; → 計算結果を返す
• let result = add(5, 3); → 関数の戻り値を result に代入

6. 配列とオブジェクト

配列の操作

javascriptコピーする編集するlet fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Banana
fruits.push("Grape");   // 配列に追加
console.log(fruits);    // ["Apple", "Banana", "Cherry", "Grape"]

オブジェクトの操作

javascriptコピーする編集するlet person = { name: "太郎", age: 25 };
console.log(person.name); // 太郎
person.age = 26;  // 値を変更
console.log(person);  // { name: "太郎", age: 26 }

7. イベント処理

ボタンをクリックしたときの処理 などを追加できます。

ボタンをクリックしたときに動作する処理

htmlコピーする編集する<button id="myButton">クリックしてね！</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
    alert("ボタンがクリックされました！");
});
</script>

8. JavaScriptのコメント

コードに 説明を書いておく ことができます。

コメントの書き方

javascriptコピーする編集する// これは1行コメント

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

💡 コメントを使うと、コードが理解しやすくなる！

まとめ

JavaScriptの基本的な構文を押さえておけば、プログラムが書きやすくなります！
今回学んだ内容を復習しましょう！

✅ 変数の宣言（let, const）
✅ データの型（文字列、数値、論理値、配列、オブジェクト）
✅ 条件分岐（if文）
✅ ループ（for, while）
✅ 関数（function）
✅ 配列とオブジェクト
✅ イベント処理（ボタンのクリックなど）
✅ コメントの使い方

この知識を使えば、JavaScriptの基本がしっかり身につきます！
実際にコードを書いて練習してみましょう🎉