JavaScriptにおける条件分岐

JavaScriptにおける条件分岐

この記事ではJavaScriptにおける条件分岐について説明します。

YouTube Video

JavaScriptにおけるif文

基本的な構文

1if (condition) {
2    // Code that executes if the condition is true
3}

JavaScriptのif文は、特定の条件が真か偽かによってコードの実行を制御するために使われる基本的な制御構造です。条件が真(true)であれば、そのブロックのコードが実行され、偽(false)であればスキップされます。

1let x = 10;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5}

この例では、xの値が5より大きいため、x is greater than 5がコンソールに表示されます。

else

基本的な構文

1if (condition) {
2    // Code that executes if the condition is true
3} else {
4    // Code that executes if the condition is false
5}

if 文に続けてelse文を使うことで、条件が偽の場合に実行するコードを指定することができます。

1let x = 3;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5} else {
6    console.log("x is 5 or less");
7}

この場合、x5より小さいので、"x is 5 or less"が表示されます。

else if

基本的な構文

1if (condition1) {
2    // Code that executes if condition1 is true
3} else if (condition2) {
4    // Code that executes if condition1 is false and condition2 is true
5} else {
6    // Code that executes if both condition1 and condition2 are false
7}

複数の条件をチェックしたい場合は、else ifを使います。最初のifが偽だった場合に次の条件がチェックされます。

1let x = 5;
2
3if (x > 10) {
4    console.log("x is greater than 10");
5} else if (x === 5) {
6    console.log("x is 5");
7} else {
8    console.log("x is 5 or less");
9}

この場合、x5なので、"x is 5"が表示されます。

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

構文

1condition ? valueIfTrue : valueIfFalse

if文を短く書きたい場合、三項演算子を使うこともできます。

1const number = 7;
2const result = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

この場合、number7なので、Oddが表示されます。

まとめ

  • if 文は条件が真か偽かによって実行するコードを制御します。
  • else を使って条件が偽の場合の動作を指定できます。
  • else if を使って複数の条件をチェックできます。
  • 三項演算子を使って簡潔に条件分岐を書くことも可能です。

JavaScriptにおけるswitch文

基本構文

 1switch (expression) {
 2    case value1:
 3        // Code that executes if the expression matches value1
 4        break;
 5    case value2:
 6        // Code that executes if the expression matches value2
 7        break;
 8    default:
 9        // Code that executes if no cases match
10}

JavaScriptのswitch文は、1つの式(通常は変数)を複数の値(ケース)と比較し、それに応じた処理を実行するために使います。if文と同じように条件分岐を行いますが、複数の条件がある場合に読みやすくなることが多いです。

 1let fruit = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5        console.log("This is an apple");
 6        break;
 7    case "banana":
 8        console.log("This is a banana");
 9        break;
10    default:
11        console.log("Unknown fruit");
12}

この例では、fruit"apple"なので、"This is an apple"がコンソールに表示されます。

break の役割

各ケースの最後にbreakを入れることで、そのケースの処理が終わった後にswitch文を抜けます。breakを書かない場合、そのまま次のケースも実行されてしまいます(これをフォールスルーと言います)。

フォールスルーの例

 1let color = "red";
 2
 3switch (color) {
 4    case "red":
 5        console.log("This is red");
 6    case "blue":
 7        console.log("This is blue");
 8    default:
 9        console.log("Unknown color");
10}

この場合、color"red"なので、"This is red"の後にbreakがないため、続けて"This is blue""Unknown color"も表示されます。

defaultの使い方

defaultはどのcaseにも一致しない場合に実行される部分です。if文におけるelseに相当します。

 1let animal = "dog";
 2
 3switch (animal) {
 4    case "cat":
 5        console.log("This is a cat");
 6        break;
 7    case "bird":
 8        console.log("This is a bird");
 9        break;
10    default:
11        console.log("Unknown animal");
12}

この場合、animal"dog"なので、defaultに該当し、"Unknown animal"が表示されます。

複数の値に同じ処理をする

複数のケースに対して同じ処理をしたい場合、caseを続けて書くことができます。

 1let day = 1;
 2switch (day) {
 3    case 1:
 4    case 2:
 5    case 3:
 6    case 4:
 7    case 5:
 8        console.log("Weekday");
 9        break;
10    case 6:
11    case 7:
12        console.log("Weekend");
13        break;
14    default:
15        console.log("Unknown day");
16}

この例では、day1の場合、"Weekday"が表示されます。

switch vs. if

  • if文は複雑な条件や範囲をチェックする場合に適しています。例えば、変数xが10以上かつ20以下のような複雑な条件はswitchでは書けません。
  • switch文は値が特定のものに一致するかをチェックする際に、コードを読みやすく整理できる場合があります。

まとめ

  • switch文は複数の値に対する条件分岐を簡潔に書くために使います。
  • caseの最後にbreakを使わないと、次のcaseも続けて実行(フォールスルー)されることがあります。
  • defaultはどのケースにも一致しない場合に実行される部分です。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video