JavaScriptの制御構文（if文・for文）の基本を徹底解説！プログラムの流れをコントロールする方法

2026.05.20

JavaScript

JavaScriptを学び始めたばかりの際、プログラムが上から下へと単に実行されるだけでは、複雑な仕組みを作ることはできません。

「もし〜なら、この処理をする」「指定した回数だけ、この処理を繰り返す」といった、プログラムの流れをコントロールする仕組みが制御構文（せいぎょこうぶん）です。

この記事では、JavaScriptの最も基本となる制御構文である「if文（条件分岐）」と「for文（繰り返し処理）」について、初心者向けに分かりやすく解説します。

Contents

1 1. 条件によって処理を分ける「if文」の基本
- 1.1 1-1. 最もシンプルなif文の構造
- 1.2 1-2. 条件が成り立たなかった場合の処理（else / else if）
2 2. 同じ処理を繰り返す「for文」の基本
- 2.1 2-1. for文の基本書式
- 2.2 2-2. 配列と組み合わせた応用例
3 3. 実践：Canvasを使った制御構文のビジュアル表現
4 4. 制御構文を使用する際の注意点
- 4.1 4-1. 無限ループに気をつける
- 4.2 4-2. スコープ（変数の有効範囲）を意識する
5 5. まとめ
- 5.1 関連記事

1. 条件によって処理を分ける「if文」の基本

if文は、ある条件が「成り立つか（true）」「成り立たないか（false）」によって、実行する処理を切り替えるための構文です。

1-1. 最もシンプルなif文の構造

基本となる形は以下の通りです。

const score = 85;

if (score >= 80) {
  console.log("合格です！おめでとうございます。");
}

条件式（score >= 80）が正しい（真である）場合にのみ、後ろの{ }（波括弧）で囲まれた処理が実行されます。

1-2. 条件が成り立たなかった場合の処理（else / else if）

条件に当てはまらなかった場合の処理を追加するには else を、さらに別の条件を追加したい場合は else if を組み合わせます。

const score = 65;

if (score >= 80) {
  console.log("大変優秀です！");
} else if (score >= 60) {
  console.log("合格です。");
} else {
  console.log("不合格です。次回がんばりましょう。");
}

上から順番に条件が判定され、最初に当てはまったブロックの処理だけが実行されます。どの条件にも当てはまらなかった場合は、最終的に else の処理が実行されます。

注意ポイント： 条件分岐で使われる >=（〜以上）や ==（等しい）などの記号は「比較演算子」と呼ばれます。正しく使い分けることが重要です。

プログラムの「条件の組み立て方」についてさらに深く学びたい場合は、以下の記事を参考にしてください。
[内部リンク：JavaScriptの演算子一覧！比較・論理演算子の使い方をマスター]

2. 同じ処理を繰り返す「for文」の基本

for文は、決まった回数だけ処理を繰り返したい（ループさせたい）ときに使用する構文です。

2-1. for文の基本書式

for文の括弧の中には、繰り返しの条件を3つの要素に分けて記述します。

for (let i = 1; i <= 5; i++) {
  console.log(i + "回目の処理です。");
}

括弧の中（let i = 1; i <= 5; i++）では、以下の3つの設定をセミコロン（;）で区切って指定しています。

初期化式 (let i = 1): ループの回数を数えるための変数（カウンタ変数）を準備します。
条件式 (i <= 5): この条件が成り立つ間は、繰り返しを続けます。
変化式 (i++): 1回の処理が終わるたびに、変数 i に1を足します（インクリメント）。

上記のコードを実行すると、コンソールには1から5までのメッセージが順番に出力されます。

2-2. 配列と組み合わせた応用例

for文は、複数のデータをまとめて扱う「配列（Array）」と非常によく組み合わせて使われます。

const fruits = ["りんご", "みかん", "ぶどう", "バナナ"];

for (let i = 0; i < fruits.length; i++) {
  console.log("お皿にある果物: " + fruits[i]);
}

配列の要素は 0 番目から始まるため、初期化式は let i = 0 とします。また、fruits.length と記述することで、配列の要素数（この場合は4）を自動的に取得してループの条件に指定できます。

データを効率的に管理する「配列」の仕組みについては、こちらの記事で詳しく解説しています。
[内部リンク：JavaScriptの配列操作まとめ（map・filter・reduce）｜基本から使い分けまで徹底解説]

3. 実践：Canvasを使った制御構文のビジュアル表現

ここまでに学んだ if文 と for文 が、実際のWebサイトでどのように動くのかを画面上で視覚的に体験できるツールを用意しました。

以下のシミュレーターでは、条件分岐（if文）による色の変化や、繰り返し処理（for文）によるオブジェクトの連続描画をパラメーターを変えながら確認できます。

4. 制御構文を使用する際の注意点

プログラムを正しく動かすために、以下の2点に注意してください。

4-1. 無限ループに気をつける

for文の「条件式」がいつまでも成り立ったままになると、プログラムの処理が終わりを迎えずに動き続けてしまいます。これを無限ループと呼び、ブラウザがフリーズする原因になります。「変化式」の書き忘れなどに注意しましょう。

4-2. スコープ（変数の有効範囲）を意識する

if文やfor文の { } の中で const や let を使って宣言した変数は、その { } の外側では使用できません。これをブロックスコープと呼びます。

if (true) {
  let message = "こんにちは";
}
// ここで message を使おうとするとエラーになります

変数の有効範囲（スコープ）に関するルールは、プログラム全体のバグを防ぐために非常に重要です。詳しくは以下の記事をご覧ください。
[内部リンク：JavaScriptのスコープとは？var・let・constの違いを解説]

5. まとめ

JavaScriptの制御構文（if文・for文）について解説しました。

if文：条件の真偽（true / false）によって処理を分岐させる
for文：初期化式・条件式・変化式を使って、指定回数だけ処理を繰り返す

これら2つの構文を組み合わせることで、複雑なWebアプリケーションのロジックを組み立てられるようになります。何度もコードを書き、仕組みを体に馴染ませていきましょう。

[内部リンク：JavaScriptのwhile文とは？for文との違いを解説]
[内部リンク：JavaScriptの関数とは？基本と使い方を徹底解説]