JavaScript のコントロールフロー

Volardev 編集部 April 17, 2026

コントロールフロー（Control Flow）とは、プログラム内のステートメント（文）が実行される順序のことです。デフォルトでは、JavaScript はコードを上から下へ、そして左から右へと実行します。
コントロールフローに関連するステートメントを使用することで、条件、ループ、または特定のキーワードに基づいて、その実行順序を意図的に変更することが可能になります。

1. デフォルトのフロー（Default Flow）

デフォルトのフローでは、コードは記述された順に逐次実行（Sequentially）されます。

1.1 逐次実行の例

以下のコードは、変数 x → 変数 y → 変数 z の順に処理されます。

let x = 5;
let y = 6;
let z = x + y;

2. 条件分岐によるコントロールフロー

条件分岐を使用すると、特定の条件に基づいて「意思決定」を行い、フローを分岐させることができます。

if
if...else
switch
三項演算子 (? :)

2.1 条件による分岐の例

年齢（age）の値に応じて、変数 text の値が分岐します。

let text = "不明";

if (age >= 18) {
  text = "成人";
} else {
  text = "未成年";
}

3. ループ（反復処理によるフロー制御）

ループを使用すると、特定のコードブロックを複数回繰り返し実行させることができます。

for
while
do...while

3.1 反復処理の例

条件（i < 5）が false になるまで、処理を繰り返します。

for (let i = 0; i < 5; i++) {
  text += "数値は " + i + "<br>";
}

4. ジャンプステートメント（Jump Statements）

ジャンプステートメントを使用すると、フローを急激に変更（中断・スキップ）させることができます。

break - ループまたは switch 文を終了して脱出する
continue - ループの現在の反復をスキップし、次の反復へ進む
return - 関数から脱出し、値を返す
throw - エラーをスローし、例外処理（エラーハンドリング）へジャンプする

4.1 ループの終了例

ループカウンター（i）が 3 になった時点で、ループを強制終了（break）させます。

for (let i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "数値は " + i + "<br>";
}

5. 関数によるフロー（Function Flow）

関数は、呼び出し可能（Callable）で再利用可能なコードブロックです。
コード内に記述されていても、その関数が呼び出された（Call）ときに初めて実行されます。

5.1 関数の実行例

2つの数値の積を計算する関数：

function myFunction(p1, p2) {
  return p1 * p2;
}

// ここで関数を呼び出すことで、関数のフローが実行される
let result = myFunction(4, 3);

6. JavaScript はシングルスレッドである

JavaScript はシングルスレッド（Single-Threaded）で動作する言語です。これは、一度に一つのこと（タスク）しか実行できないことを意味します。

すべてのタスクは、前のタスクが完了するのを待つ必要があります。
このため、ファイルの取得リクエストなどの時間のかかる操作（スローオペレーション）が発生すると、その間アプリケーションの動作が停止（フリーズ）してしまう可能性があります。

モダンな開発では、この制約を回避するために非同期処理（Promise や async/await）を活用しますが、まずはこの「上から順に、一つずつ」という基本原則を理解しておくことが重要です。