TypeScriptのif else文の使い方を完全ガイド初心者でもわかる条件分岐と処理の切り替え方法

先生と生徒の会話形式で理解しよう

生徒

「TypeScriptで条件によって処理を分ける方法はありますか」

先生

「はいありますそのときに使うのがif else文です条件によって違う処理を実行できます」

生徒

「if文だけではだめなんですか」

先生

「ifだけでも使えますが条件が成り立たない場合の処理を書くときにelseを使うと分かりやすくなります」

1. if else文とは何か

TypeScriptのif else文とは条件に応じて処理を切り替えるための基本構文ですある条件が正しい場合は特定の処理を行いそうでない場合は別の処理を実行することができますこの仕組みを使うことでプログラムに判断力を持たせることができます

日常生活で考えるともし雨が降っていれば傘を持つそうでなければそのまま出かけるといった判断と同じですこのような条件分岐をプログラムで表現するのがif else文です

2. if文だけの基本的な使い方

まずはif文だけの基本を確認しましょう条件が正しい場合だけ処理を実行したいときに使います


let age = 20;

if (age >= 18) {
    console.log("成人です");
}


成人です

このように条件が正しいときだけ処理が実行されます条件が成り立たない場合は何も行われません

3. elseを使った分岐

if文にelseを組み合わせることで条件が成り立たない場合の処理を書くことができますこれにより必ずどちらかの処理が実行されるようになります


let age = 15;

if (age >= 18) {
    console.log("成人です");
} else {
    console.log("未成年です");
}


未成年です

このようにifとelseを組み合わせることで二つの結果を分けることができます条件分岐の基本形として非常に重要です

4. else ifで複数条件を扱う

条件が二つ以上ある場合はelse ifを使います上から順番に条件を確認して最初に一致した処理が実行されます


let score = 85;

if (score >= 90) {
    console.log("優秀です");
} else if (score >= 70) {
    console.log("合格です");
} else {
    console.log("不合格です");
}


合格です

このように複数の条件を段階的に分けることで細かい判断ができるようになります

5. 論理演算子と組み合わせる

if else文は論理演算子と組み合わせることでより複雑な条件を作ることができます複数の条件を同時にチェックすることが可能になります


let age = 20;
let hasTicket = true;

if (age >= 18 && hasTicket) {
    console.log("入場できます");
} else {
    console.log("入場できません");
}


入場できます

このように複数の条件を組み合わせることで現実に近い判断ができるようになります

6. 条件の順番と優先順位

if else文は上から順に評価されるため条件の順番が重要です例えば広い条件を先に書いてしまうと後ろの条件が実行されなくなることがあります

また複数の条件を組み合わせる場合は括弧を使って優先順位を明確にすることが大切ですこれにより意図しない動作を防ぐことができます

7. よくあるミスと注意点

初心者がよく間違えるポイントとしてイコールと比較演算子の違いがありますイコールは代入であり条件判定には二つ並べた比較演算子を使います

また条件の括弧を忘れてしまうとエラーになるため必ず丸括弧の中に条件を書くようにしましょうさらに条件のスペルミスにも注意が必要です

8. if else文を理解する重要性

if else文はプログラムの中で最も基本的で重要な構文の一つです条件に応じて処理を変えることで入力チェックや表示制御や権限管理など様々な処理を実現できます

この構文をしっかり理解することでプログラムの流れを自由にコントロールできるようになります基礎をしっかり身につけておくことでより複雑なプログラムにも対応できるようになります

まとめ

今回はTypeScriptのif else文について基本構文から実践的な使い方までを段階的に学びましたif else文は条件分岐を行うための中心的な構文でありプログラムの動きを状況に応じて変えるために必ず必要になる重要な要素です初心者の段階では単純な条件から始めることが多いですが実際の開発では複数の条件や複雑な判断が求められるため基礎をしっかり理解しておくことが大切です

if文は条件が正しいときだけ処理を実行する仕組みでありelseを組み合わせることで条件が成り立たない場合の処理を書くことができますさらにelse ifを使うことで複数の条件を順番に確認しそれぞれに対応した処理を実行できるようになりますこの流れを理解することでさまざまな分岐処理を柔軟に書くことができるようになります

特に重要なポイントは条件の書き方と順番ですif else文は上から順に評価されるため条件の順序を間違えると意図しない結果になることがあります例えば広い条件を先に書いてしまうと後ろの条件が実行されないといった問題が発生しますそのため条件を整理して優先順位を意識することが非常に重要です

また論理演算子を組み合わせることで複数の条件を同時に扱うことができますアンドやオアやノットを使うことで現実の判断に近い条件分岐を表現できるようになります例えば年齢とチケットの両方を満たしているかまたはどちらか一つでも満たしているかといった複雑な条件を簡単に書くことができます

初心者がつまずきやすいポイントとしてはイコールと比較演算子の違いがありますイコールは代入であり条件判定には使用できません二つ並べた比較演算子を使う必要がありますまた条件式の括弧を忘れてしまうとエラーになるため必ず丸括弧の中に条件を書くようにしましょうこのような基本的なルールを守ることでエラーを減らすことができます

if else文は入力チェックやログイン判定や画面の表示切り替えなどさまざまな場面で使われますこの構文を理解することでプログラムの流れを自由に制御できるようになりより実践的な開発が可能になります特にユーザーの入力や状態に応じて処理を変える場合には必ず必要となるため早い段階でしっかり習得しておくことが重要です

理解を深めるためには実際にコードを書いて試すことが効果的です簡単な条件から始めて少しずつ複雑な条件へと発展させることで自然に使いこなせるようになります今回学んだif else文の基本をもとに自分で条件を考えながら練習することで確実にスキルが身についていきます

重要ポイントの整理

if else文は条件によって処理を分岐する基本構文
elseを使うことで条件が成り立たない場合の処理を書ける
else ifで複数条件を順番に評価できる
論理演算子を組み合わせることで複雑な条件が書ける
条件の順番と優先順位に注意することが重要

サンプルプログラムで復習


let temperature = 30;

if (temperature >= 30) {
    console.log("とても暑いです");
} else {
    console.log("暑さはそれほどでもありません");
}


とても暑いです

この例では気温によって表示する内容を切り替えています現実の判断に近い形で条件分岐ができていることが分かります


let score = 50;

if (score >= 80) {
    console.log("優秀です");
} else if (score >= 60) {
    console.log("合格です");
} else {
    console.log("再挑戦しましょう");
}