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}
この場合、x
は5
より小さいので、"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}
この場合、x
は5
なので、"x is 5"
が表示されます。
三項演算子(条件演算子)
構文
1condition ? valueIfTrue : valueIfFalse
if
文を短く書きたい場合、三項演算子を使うこともできます。
例
1const number = 7;
2const result = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"
この場合、number
が7
なので、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}
この例では、day
が1
の場合、"Weekday"
が表示されます。
switch
vs. if
if
文は複雑な条件や範囲をチェックする場合に適しています。例えば、変数x
が10以上かつ20以下のような複雑な条件はswitch
では書けません。switch
文は値が特定のものに一致するかをチェックする際に、コードを読みやすく整理できる場合があります。
まとめ
switch
文は複数の値に対する条件分岐を簡潔に書くために使います。- 各
case
の最後にbreak
を使わないと、次のcase
も続けて実行(フォールスルー)されることがあります。 default
はどのケースにも一致しない場合に実行される部分です。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。