はじめに
この実験では、参加者は JavaScript における条件分岐の世界に深く突き入り、判断を行いプログラムのフローを制御するための様々な手法を探求します。この実験では、単一分岐のif文、if...else論理、多条件文、スイッチ文などの重要な概念を扱い、さまざまな条件構造に関する実践的な経験を提供します。
実際のコーディング演習を通じて、学習者は条件論理の実装、異なる分岐手法の比較、および特定のプログラミングシナリオに最適なアプローチを選択する方法を習得します。年齢検証、成績評価、ケース処理に関する段階的な例を通じて作業することで、参加者は JavaScript の条件付きプログラミング機能に堅牢な基礎を築きます。
単一分岐の if 文を理解する
このステップでは、JavaScript における基本的な単一分岐のif文について学びます。この文を使うと、特定の条件に基づいて条件付きでコードを実行できます。
まず、単一分岐のif文を調べるための JavaScript ファイルを作成しましょう。WebIDE を開き、~/projectディレクトリに新しいファイルconditional-basics.jsを作成します。
// 簡単な年齢検証の例を作成する
let age = 18;
// 単一分岐の if 文
if (age >= 18) {
console.log("You are eligible to vote!");
}
この例では、if文がageが 18 以上であるかどうかをチェックします。条件が真の場合、波括弧{}内のコードブロックが実行されます。
スクリプトを実行して出力を見てみましょう：
node ~/project/conditional-basics.js
出力例：
You are eligible to vote!
次に、条件が偽の場合にif文がどのように機能するかを示す別の例を試してみましょう：
// 前のファイルを変更する
let temperature = 15;
if (temperature < 10) {
console.log("It's cold outside. Wear a jacket!");
}
この場合、温度が 15（10 未満ではない）であるため、スクリプトを実行しても何も表示されません。
if...else 条件論理を実装する
このステップでは、JavaScript におけるif...else条件論理について学びます。これにより、条件が真か偽かに応じて異なるコードブロックを実行できます。
WebIDE を開き、~/projectディレクトリに新しいファイルconditional-else.jsを作成します。if...elseの機能を示す簡単な例を作成しましょう：
// 簡単な成績評価の例を作成する
let score = 75;
if (score >= 60) {
console.log("Congratulations! You passed the exam.");
} else {
console.log("Sorry, you did not pass the exam.");
}
この例では、if...else文がscoreが 60 以上であるかどうかをチェックします。条件が真の場合、合格メッセージが表示されます。そうでなければ、不合格メッセージが表示されます。
スクリプトを実行して出力を見てみましょう：
node ~/project/conditional-else.js
出力例：
Congratulations! You passed the exam.
次に、スコアを変更してelse部分を示すようにスクリプトを変更しましょう：
// 前のファイルを変更する
let score = 45;
if (score >= 60) {
console.log("Congratulations! You passed the exam.");
} else {
console.log("Sorry, you did not pass the exam.");
}
このスクリプトを実行すると、異なる出力が表示されます：
出力例：
Sorry, you did not pass the exam.
if...elseを異なる種類の条件とともに使用できる方法を示す別の例を作成しましょう：
// ファイルに別の例を追加する
let isRaining = true;
if (isRaining) {
console.log("Take an umbrella with you.");
} else {
console.log("Enjoy the sunny day!");
}
この例は、if...elseがブール型の条件とともにどのように機能するかを示しています。
多条件の if...else if...else 文を作成する
このステップでは、JavaScript におけるif...else if...else文を使って複数の条件を使ってより複雑な判断シナリオを処理する方法を学びます。
WebIDE を開き、~/projectディレクトリに新しいファイルmulti-condition.jsを作成します。
// 成績分類の例を作成する
let score = 85;
if (score >= 90) {
console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
console.log("Great job! You got a B grade.");
} else if (score >= 70) {
console.log("Good work! You got a C grade.");
} else if (score >= 60) {
console.log("You passed. You got a D grade.");
} else {
console.log("Sorry, you failed the exam.");
}
この例では、if...else if...else文が順番に複数の条件をチェックします。評価が真になる最初の条件のコードブロックが実行され、残りの条件はスキップされます。
スクリプトを実行して出力を見てみましょう：
node ~/project/multi-condition.js
出力例：
Great job! You got a B grade.
次に、スコアを変更して異なる条件がどのように機能するか見てみましょう：
// 異なるスコアシナリオを試す
let score = 55;
if (score >= 90) {
console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
console.log("Great job! You got a B grade.");
} else if (score >= 70) {
console.log("Good work! You got a C grade.");
} else if (score >= 60) {
console.log("You passed. You got a D grade.");
} else {
console.log("Sorry, you failed the exam.");
}
このスクリプトを実行すると、異なる出力が表示されます：
出力例：
Sorry, you failed the exam.
異なるシナリオで多条件論理を示す別の例を作成しましょう：
// 天候条件の例
let temperature = 25;
if (temperature > 30) {
console.log("It's very hot outside.");
} else if (temperature > 20) {
console.log("The weather is warm and pleasant.");
} else if (temperature > 10) {
console.log("It's a bit cool today.");
} else {
console.log("It's cold outside.");
}
この例は、if...else if...elseが異なる結果を持つ複数の条件を処理するためにどのように使えるかを示しています。
複数のケースを処理するための switch 文を使用する
このステップでは、JavaScript のswitch文について学びます。これは、単一の変数に対する複数の条件を処理するための代替方法を提供します。
WebIDE を開き、~/projectディレクトリに新しいファイルswitch-statement.jsを作成します。
// switch 文を使った曜日の例を作成する
let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
case 4:
console.log("Thursday");
break;
case 5:
console.log("Friday");
break;
case 6:
console.log("Saturday");
break;
case 7:
console.log("Sunday");
break;
default:
console.log("Invalid day");
}
この例では、switch文がdayの値をチェックします。各caseは特定の値を表し、値が一致したときに対応するコードブロックが実行されます。break文は、次のケースにフォールスルーするのを防ぎます。
スクリプトを実行して出力を見てみましょう：
node ~/project/switch-statement.js
出力例：
Wednesday
次に、defaultケースを示す別の例を作成しましょう：
// switch 文を使った成績分類
let grade = "B";
switch (grade) {
case "A":
console.log("Excellent performance!");
break;
case "B":
console.log("Good job!");
break;
case "C":
console.log("Satisfactory performance.");
break;
case "D":
console.log("Needs improvement.");
break;
default:
console.log("Invalid grade.");
}
このスクリプトを実行すると、以下のように表示されます：
出力例：
Good job!
複数のケースが同じコードブロックを共有できる方法を示しましょう：
// switch 文を使った週末の検出
let day = 6;
switch (day) {
case 6:
case 7:
console.log("It's the weekend!");
break;
default:
console.log("It's a weekday.");
}
この例は、同じアクションで複数のケースを処理する方法を示しています。
if 文と switch 文を比較して選択する
このステップでは、if文とswitch文の主な違いを学び、それぞれのアプローチをいつ使用するかを理解します。
WebIDE を開き、~/projectディレクトリに新しいファイルconditional-comparison.jsを作成します。
// さまざまなシナリオで if 文と switch 文を比較する
// シナリオ 1: 単純な等値チェック
let fruit = "apple";
// if 文を使用する
if (fruit === "apple") {
console.log("If Statement: It's an apple.");
} else if (fruit === "banana") {
console.log("If Statement: It's a banana.");
} else {
console.log("If Statement: Unknown fruit.");
}
// switch 文を使用する
switch (fruit) {
case "apple":
console.log("Switch Statement: It's an apple.");
break;
case "banana":
console.log("Switch Statement: It's a banana.");
break;
default:
console.log("Switch Statement: Unknown fruit.");
}
// シナリオ 2: 複雑な条件
let score = 85;
// 複雑な条件に対しては if 文が適しています
if (score >= 90 && score <= 100) {
console.log("Excellent grade (A)");
} else if (score >= 80 && score < 90) {
console.log("Good grade (B)");
} else if (score >= 70 && score < 80) {
console.log("Satisfactory grade (C)");
} else {
console.log("Needs improvement");
}
// switch 文は範囲ベースの条件や複雑な条件にはあまり適さない
スクリプトを実行して出力を見てみましょう：
node ~/project/conditional-comparison.js
出力例：
If Statement: It's an apple.
Switch Statement: It's an apple.
Good grade (B)
忘れないでおくべき主な違い：
if文はより柔軟で、複雑な条件を処理できますswitch文は正確な値の一致に最適if文は異なる型を比較し、複雑な論理演算子を使用できますswitch文は厳密な等値チェックに限定されています
これらのポイントを説明するための最後の例を作成しましょう：
// if 文と switch 文の選択
function recommendConditional(input) {
// 単純な正確な値の一致には switch 文を使用する
switch (input) {
case "red":
case "blue":
case "green":
console.log("Use switch for simple value checks");
break;
// より複雑な条件には if 文を使用する
default:
if (typeof input === "number" && input > 0 && input < 100) {
console.log("Use if for range and type checking");
} else {
console.log("Complex conditions are better with if statements");
}
}
}
recommendConditional("blue");
recommendConditional(50);
まとめ
この実験では、参加者は JavaScript における条件分岐技術を探求し、さまざまな種類の条件文に焦点を当てました。この実験は、単一分岐のif文を理解することから始まり、年齢検証や温度チェックなどの特定の条件に基づいてコードを実行する方法を示しました。学習者は、指定された条件が真の場合にのみコードを実行する簡単な条件論理を作成する練習を行いました。
その後、この実験はより高度な条件技術に進み、二方向分岐を処理するif...else文、複雑な判断を行う多条件のif...else if...else文、および複数のケースシナリオを処理するswitch文を含みます。参加者は、異なる条件アプローチを比較する方法を学び、JavaScript プログラミングにおける各方法の構文と実際の応用を理解しました。
