Frontend Academy · レッスン

制御フロー: if、else、switch、for、while

if/elseとswitchで分岐し、forとwhileでループし、breakとcontinueで反復処理を制御します。

「制御フロー: if、else、switch、for、while」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

制御フローとは何でしょうか？

制御フローは、どのコードを何回実行するかを決めます。JavaScript には、条件に基づいて実行経路を分岐させる条件分岐（if/else、switch）と、処理を繰り返すループ（for、while、do/while）があります。

if / else if / else

最も基本的な条件分岐です。括弧内の条件は truthy/falsy として評価されます。複数の条件は else if で連結できます。最後の else は、どの条件にも一致しない場合のフォールバックです。

const score = 75;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}

三項演算子

三項演算子は、インラインで if/else を簡潔に記述する構文です。condition ? trueValue : falseValue の形式で使用します。単純な代入や JSX 式に適しています。三項演算子の入れ子はすぐに読みにくくなるため、避けてください。

const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';

// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>

switch文

switch は、厳密等価で値を複数の case と比較します。各 case の後に break を記述して、フォールスルーを防いでください。default は一致する値がない場合を処理します。

const day = 'Monday';
switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  case 'Monday':
    console.log('Start of work week');
    break;
  default:
    console.log('Weekday');
}

forループ

典型的な C スタイルの for ループです。初期化; 条件; インクリメントの順に記述します。既知の回数だけ繰り返す場合や、配列をインデックスで反復する場合に適しています。

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

// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

for...ofループ

for...of は、任意のイテラブル（配列、文字列、Map、Set）の値を反復処理します。インデックスが不要な場合は、インデックスベースの for ループよりも簡潔に書けます。

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const char of 'hello') {
  console.log(char); // h e l l o
}

for...inループ

for...in は、オブジェクトの列挙可能な プロパティキー を反復処理します。配列には使用せず、代わりに for...of または配列メソッドを使用してください。

const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

whileループ

while ループは、条件が truthy である間、処理を実行します。あらかじめ反復回数がわからない場合に使用します。たとえば、ユーザーが有効な値を入力するまで入力を読み取る場合です。

let attempts = 0;
let success = false;
while (!success && attempts < 3) {
  // try something
  attempts++;
  success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);

do...whileループ

do...while は、条件を確認する前に本体を少なくとも1回実行します。本体を実行してからでないと終了条件を評価できない場合に便利です。

let input;
do {
  input = prompt('Enter a number:');
} while (isNaN(Number(input)));

breakとcontinue

break は、現在のループを直ちに終了します。continue は、現在の反復処理の残りをスキップして、次の反復処理に移ります。どちらも for、while、do/while ループで使用できます。

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;  // skip 3
  if (i === 7) break;     // stop at 7
  console.log(i);         // 0 1 2 4 5 6
}

短絡評価

&& は最初の falsy 値、または最後の値を返します。|| は最初の truthy 値、または最後の値を返します。??（nullish coalescing）は、左辺が null または undefined の場合にのみ右辺を返します。

const name = user && user.name;    // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000;  // 3000 only if port is null/undefined

確認問題

本体が少なくとも1回実行されることが保証されているループはどれですか？

まとめ: JavaScriptの制御フロー

分岐には if/else を使用します。複数の個別の値には switch を使用します。既知の回数の反復には for ループを使用します。イテラブルには for...of を使用します。反復回数が不明な場合は while を使用します。少なくとも1回の実行が必要な場合は do...while を使用します。break はループを終了し、continue は反復処理をスキップします。簡潔な条件分岐には短絡演算子を使用します。

よくある質問

「制御フロー: if、else、switch、for、while」レッスンは無料ですか？

はい。「制御フロー: if、else、switch、for、while」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「制御フロー: if、else、switch、for、while」で何を学びますか？

if/elseとswitchで分岐し、forとwhileでループし、breakとcontinueで反復処理を制御します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「制御フロー: if、else、switch、for、while」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

変数: let、const、varとスコープ
データ型: string、number、boolean、null、undefined
関数: 宣言、式、アロー関数
制御フロー: if、else、switch、for、while

← Frontend Academyに戻る