C
JavaScript 一覧
前へ5 / 21次へ
JavaScript/基礎/Lesson 05

制御フロー — if · for · while · switch

45分·theory
このチャプター
4/5

制御フロー — if · for · while · switch

🎯 このレッスンを読み終えたら

このレッスンを読み終えると、以下の3つを自信を持って実践できるようになります。

  • ▸✅ if-else · switch · 三項演算子を いつ使うか の判断
  • ▸✅ ?? (nullish) と || (falsy) の決定的な違い
  • ▸✅ for · for-of · for-in · forEach の await 互換性

学習目標を チェックリストとして手元に置き、すべて答えられるようになったらレッスンを閉じましょう。

if / else / 三項演算子 — *分岐* の3つの表現

最も基本的な if

javascript
const score = 85;

if (score >= 90) {
    console.log('A');
} else if (score >= 80) {
    console.log('B');     // 出力される
} else {
    console.log('C');
}

条件は truthy/falsy で評価されます。0、''、null、undefined、NaN、false が falsy。それ以外はすべて truthy。

javascript
if (user) { ... }              // user が null/undefined でないとき
if (items.length) { ... }      // 配列に要素があるとき
if (!name) { ... }             // name が空文字列・null・undefined のとき

三項演算子 — 短い if の表現

javascript
const label = age >= 19 ? '成人' : '未成年';

値を返す if。React JSX 内では非常によく使われます:

jsx
<button>{isLoading ? '保存中...' : '保存'}</button>

三重三項 (a ? b : c ? d : e) は 可読性が下がるので避けましょう。if-else で書き直してください。

オプショナルチェーン + Nullish 合体演算子 — 分岐の短縮形

javascript
const city = user?.address?.city ?? '不明';

?. — 左辺が null/undefined なら 即座に undefined を返す（TypeError を回避）。
?? — 左辺が null/undefined のときのみ 右辺を使用。0 や '' はそのまま使われます。

javascript
const req = { page: 0 };

const page  = req.page ?? 1;    // ?? : null/undefined のときのみ 1 を使用
const page2 = req.page || 1;    // || : falsy ならすべて 1 を使用（0 も falsy）

console.log(page);    // 0   ← ✅ 0 そのまま（意図した値）
console.log(page2);   // 1   ← ⚠️ 0 が falsy なので 1 になる — 落とし穴！

|| との違いは バイブコーディングの定番の落とし穴。AI 生成コードの 80% が ?? を使います。

ループ4種 — for · while · for...of · for...in

古典的な for

javascript
for (let i = 0; i < 5; i++) {
    console.log(i);   // 0,1,2,3,4
}

インデックスを直接操作する必要があるとき（逆順の反復・スキップ）に便利。

while / do-while

javascript
let n = 0;
while (n < 3) {
    console.log(n++);
}

do {
    console.log('少なくとも一度');
} while (false);

条件が動的なとき（入力待ち・リトライループ）に使います。一般的な繰り返しには for-of の方が適しています。

for...of — 値 を反復（配列）

javascript
const arr = [10, 20, 30];
for (const v of arr) {
    console.log(v);   // 10, 20, 30
}

最もよく使われる配列のループ。break・continue が使えます（forEach との決定的な違い）。

for...in — キー を反復（オブジェクト）

javascript
const obj = { name: 'A', age: 30 };
for (const key in obj) {
    console.log(key, obj[key]);
}

注意: 配列に for...in を使うと インデックスが文字列 になり、継承されたプロパティが含まれる可能性があります — 配列は for...of、オブジェクトは for...in（または Object.entries）。

break · continue

javascript
for (const item of list) {
    if (item.skip) continue;     // 次の反復へ
    if (item.stop) break;        // ループを終了
    process(item);
}

forEach と for...of の違い — バイブコーディングの定番の質問

javascript
// forEach
[1,2,3].forEach(v => console.log(v));

// for...of
for (const v of [1,2,3]) console.log(v);
forEachfor...of
break/continue❌ 不可（return で次の要素へ）✅ 可能
async/await❌ 動作しない✅ 動作する
可読性メソッドチェーンに自然命令的

ルール: await または break が必要なら for...of、単純な変換なら map/filter/reduce（forEach は減少傾向）。

switch — case フォールスルーの落とし穴

基本的な switch

javascript
const role = 'admin';

switch (role) {
    case 'admin':
        console.log('管理者');
        break;        // *必須* の break
    case 'user':
        console.log('一般');
        break;
    default:
        console.log('未認証');
}

フォールスルー（fall-through）の落とし穴

javascript
switch (day) {
    case 'MON':
        console.log('月曜日');
        // break を忘れた → 下の case まで流れ込む
    case 'TUE':
        console.log('火曜日');
        break;
}

day === 'MON' の入力で「月曜日」と「火曜日」の両方が出力されます。break の抜け漏れはバグの原因第1位。

意図的なフォールスルー — 複数の case をまとめる

javascript
switch (day) {
    case 'SAT':
    case 'SUN':
        console.log('週末');
        break;
    default:
        console.log('平日');
}

オブジェクトリテラルで代替 — よりモダンな書き方

if-else や switch が長くなったら、オブジェクトマッピング がすっきりします:

javascript
const roleLabel = {
    admin: '管理者',
    user: '一般',
    guest: 'ゲスト'
};
console.log(roleLabel[role] ?? '未認証');

JSX・React コンポーネントの分岐でよく使われるパターン。

🤖 AI へのリクエスト例

  • ▸「この if-else チェーンを switch に変換して」
  • ▸「この switch で break の抜け漏れがないか確認して」
  • ▸「この分岐をオブジェクトマッピングにリファクタリングして」

制御フローを理解すると、AI に対してフローの変形を正確に指示 でき、AI が生成したコードのバグを見抜く ことができます。

⚡ 実際に試してみよう — if · for · switch

制御フローの核心4つ（if、三項演算子、for-of、switch）を一度に実行してみましょう。
✏️ JS 코드
📟 コンソール出力
▶ 実行ボタンを押してください
⚠️ ブラウザのサンドボックスで実行 — console.log()のみ対応、alert/fetchは不可
先に読むとよい概念: データ型
次のおすすめ: 型変換と等価比較
前へ一覧次へ
制御フロー — if · for · while · switch - JavaScript