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 : valueIfFalseif文を短く書きたい場合、三項演算子を使うこともできます。
例
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チャンネルもご覧ください。