JavaScriptにおける制御構文の基本と実践

JavaScriptのプログラム実行フロー

プログラムが実行される順序を制御することを「制御フロー(Control Flow)」と呼びます。JavaScriptでは、上から下へ順番に実行される「順次進行」、条件によって処理を分ける「条件分岐」、同じ処理を繰り返す「反復」の3つが基本要素となります。

1. 条件分岐構造

1.1 if 文のバリエーション

特定の条件が満たされた場合にのみ処理を実行します。単一の if、二者択一の if...else、そして複数の条件を評価する if...else if があります。

// 成績判定の例
const score = Number(prompt('スコアを入力してください (0-100):'));

if (score >= 90) {
    console.log('評価: S');
} else if (score >= 80) {
    console.log('評価: A');
} else if (score >= 70) {
    console.log('評価: B');
} else if (score >= 60) {
    console.log('評価: C');
} else {
    console.log('評価: D (再試験)');
}

1.2 三項演算子(条件演算子)

簡単な条件分岐を1行で記述できる構文です。条件 ? 真の場合の式 : 偽の場合の式 の形式をとります。

// 10未満の数字に0を付与する(ゼロパディング)
const inputVal = prompt('数値を入力してください:');
const result = inputVal < 10 ? '0' + inputVal : inputVal;
console.log('結果:', result);

1.3 switch 文

特定の変数の値に対して、複数の選択肢(case)を比較する場合に適しています。比較は厳密等価(===)で行われます。

  • case の最後には break を記述して、後続の処理へのフォールスルーを防ぎます。
  • どのケースにも該当しない場合は default が実行されます。

2. 反復構造(ループ)

2.1 for 文

指定した回数だけ処理を繰り返す際に最も一般的に使用されます。

// 指定された数だけ記号を連結する
const count = Number(prompt('繰り返す回数を指定してください:'));
let output = '';
for (let i = 0; i < count; i++) {
    output += '■';
}
console.log(output);

2.2 二重ループ(入れ子の構造)

ループの中にさらにループを記述することで、多次元的な処理(行列や格子状の出力)が可能になります。

// 直角三角形のパターン表示
const rows = Number(prompt('三角形の段数を入力:'));
for (let i = 1; i <= rows; i++) {
    let line = '';
    for (let j = 1; j <= i; j++) {
        line += '★';
    }
    console.log(line);
}

// 九九の表をコンソールに出力
let table = '';
for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= 9; j++) {
        table += `${j}×${i}=${i * j}\t`;
    }
    table += '\n';
}
console.log(table);

2.3 while 文と do...while 文

while はループの開始前に条件を評価し、do...while は少なくとも一度処理を実行してから条件を評価します。

3. ループの制御: continue と break

ループの挙動を詳細に制御するためのキーワードです。

  • continue: 現在の反復処理を中断し、次のループサイクルへ即座にスキップします。
  • break: ループ自体を完全に終了し、ブロックの外へ抜けます。

4. コーディング規約と命名規則

JavaScript開発における可読性を高めるための標準的なルールです。

4.1 識別子の命名

  • 変数名や関数名にはキャメルケース(camelCase)を使用します(例: userScore)。
  • 定数(再代入しない値)にはアッパースネークケースを使用することが一般的です(例: MAX_LIMIT)。

4.2 演算子とスペース

  • 演算子の前後には半角スペースを入れ、可読性を確保します(例: a + b)。
  • コードブロックの { } の前後には適切な改行とインデントを適用します。

タグ: javascript ProgrammingFundamentals ControlFlow WebDevelopment

6月23日 21:25 投稿