Articles
TypeScript入門
TypeScriptにおける条件分岐

TypeScriptにおける条件分岐

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

YouTube Video

TypeScriptにおけるif文

TypeScriptにおけるif文は、指定した条件がtrueの場合にコードを実行し、条件がfalseの場合には実行しないという分岐処理を行います。if文は、JavaScriptと同じ構文を持っており、TypeScriptの型安全性を活かして条件分岐を行います。

基本構文

if文の基本構文は次のようになります。

1if (condition) {
2    // Code to execute if the condition is true
3} else if (anotherCondition) {
4    // Code to execute if the first condition is false
5    // and the another condition is true
6} else {
7    // Code to execute if all conditions are false
8}
  • condition が true の場合、その次のブロック内のコードを実行します。
  • condition が false で、anotherCondition が true の場合、その次のブロック内のコードを実行します。
  • どの条件も false の場合、最後の else ブロック内のコードを実行します。

例1: 基本的なif-else文

以下の例では、変数xが10以上かどうかを判定し、結果を出力します。

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

例2: if-else if-else文

複数の条件をチェックする場合には、else ifを使用して分岐を追加します。

 1let score: number = 85;
 2
 3if (score >= 90) {
 4    console.log("Excellent");
 5} else if (score >= 70) {
 6    console.log("Passed");
 7} else {
 8    console.log("Failed");
 9}
10// Outputs: Passed

例3: 型チェックを含めたif文

TypeScriptの型チェック機能を活かして、特定の型の条件分岐を行うことも可能です。例えば、変数の型をtypeof演算子でチェックし、適切な処理を行います。

 1let value: any = "Hello";
 2
 3if (typeof value === "string") {
 4    console.log("The value is a string: " + value);
 5} else if (typeof value === "number") {
 6    console.log("The value is a number: " + value);
 7} else {
 8    console.log("The value is of another type");
 9}
10// Outputs: "The value is a string: Hello"

例4: ネストされたif文

if文の中にさらにif文を入れて、複雑な条件をチェックすることもできます。

 1let age: number = 25;
 2let isMember: boolean = true;
 3
 4if (age >= 18) {
 5    if (isMember) {
 6        console.log("You are a member and 18 years old or older");
 7    } else {
 8        console.log("You are not a member but 18 years old or older");
 9    }
10} else {
11    console.log("You are under 18 years old");
12}
13// Output
14// You are a member and 18 years old or older

三項演算子（条件演算子）

構文 

1condition ? valueIfTrue : valueIfFalse

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

例 

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

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

まとめ

  • if文は、条件に応じて実行する処理を決定するための基本的な制御構文です。
  • else ifを使って複数の条件を処理できます。
  • typeofを使用することで、TypeScriptの型を活かした条件分岐が可能です。
  • ネストされたif文で複雑な条件処理ができます。
  • 三項演算子を使って簡潔に条件分岐を書くことも可能です。

TypeScriptでは、型安全性を考慮したif文を使うことで、コードの信頼性を向上させることができます。

TypeScriptにおけるswitch文

TypeScriptにおけるswitch文は、複数の条件に基づいてコードを分岐させるための制御構文です。if-else if文を使って複数の条件を評価する代わりに、switch文を使うことで、特定の値に応じた分岐処理を簡潔に記述できます。

基本構文 

 1switch (expressionToEvaluate) {
 2    case value1:
 3        // Code to execute if the expression evaluates to value1
 4        break;
 5    case value2:
 6        // Code to execute if the expression evaluates to value2
 7        break;
 8    default:
 9        // Code to execute if none of the conditions match
10}

switch文では、caseで指定した値と評価する式が一致する場合、そのcaseブロックが実行されます。breakがないと、次のcaseブロックが続けて実行されるので注意が必要です。defaultブロックはどのcaseにも一致しなかった場合に実行されます。

例1: 基本的なswitch文

以下の例では、曜日を表す数値（0〜6）が与えられ、その値に応じて対応する曜日名を出力します。

 1let day: number = 3;
 2
 3switch (day) {
 4    case 0:
 5        console.log("Sunday");
 6        break;
 7    case 1:
 8        console.log("Monday");
 9        break;
10    case 2:
11        console.log("Tuesday");
12        break;
13    case 3:
14        console.log("Wednesday");
15        break;
16    case 4:
17        console.log("Thursday");
18        break;
19    case 5:
20        console.log("Friday");
21        break;
22    case 6:
23        console.log("Saturday");
24        break;
25    default:
26        console.log("Invalid day");
27}
28// Outputs: Wednesday

例2: defaultを使用した例

defaultは、すべてのcaseに一致しなかった場合に実行されるため、予期しない値に対処するのに便利です。

 1let statusText: string = "pending";
 2
 3switch (statusText) {
 4    case "success":
 5        console.log("Operation succeeded");
 6        break;
 7    case "error":
 8        console.log("An error occurred");
 9        break;
10    case "pending":
11        console.log("Processing");
12        break;
13    default:
14        console.log("Unknown status");
15}
16// Outputs: Processing

例3: 複数のcaseで同じ処理を実行

複数のcaseに対して同じ処理を実行したい場合、caseを連続して記述することで実現できます。

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

例4: breakを省略した場合の処理

breakを省略すると、次のcaseもそのまま実行される「フォールスルー」という動作が発生します。

 1let rank: number = 1;
 2
 3switch (rank) {
 4    case 1:
 5        console.log("Gold");
 6    case 2:
 7        console.log("Silver");
 8    case 3:
 9        console.log("Bronze");
10    default:
11        console.log("Not ranked");
12}
13// Outputs:
14// Gold
15// Silver
16// Bronze
17// Not ranked

このように、caseに一致した後も次のcaseが実行されてしまうため、不要なフォールスルーを防ぐために、通常はbreakを使用します。

まとめ

  • switch文は、複数の条件に基づく分岐処理を簡潔に書ける制御構文です。
  • 各caseにはbreakを使って処理の終了を明示する必要があります。
  • defaultブロックは、どのcaseにも一致しなかった場合に実行されます。
  • 複数のcaseで同じ処理を行うことも可能です。

TypeScriptにおけるswitch文は、コードの可読性を保ちつつ、複数の条件を効率的に処理するのに役立ちます。

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

YouTube Video

TypeScriptにおけるミュータブルとイミュータブルTypeScriptにおける条件分岐のベストプラクティス