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

生徒

「TypeScriptで条件によって分岐する方法ってありますか？」

先生

「TypeScriptでは、if文やswitch文を使って、条件によって処理を分けることができます。」

生徒

「具体的にはどのように使うんですか？」

先生

「それでは、基本的な使い方を見ていきましょう！」

1. if文とは？

if文は、プログラムに「もし条件が成立したら、この処理をしてね」と指示するための基本構文です。TypeScriptに限らず、多くのプログラミング言語で使われる代表的な仕組みで、条件分岐の入り口ともいえる重要な機能です。

たとえば、「気温が25度以上なら暑いと表示する」といったように、状況によって動作を変えたい場面は日常でもよくあります。if文はこうした判断をプログラムに任せるための“条件チェック”の役割を持っています。

次のようなシンプルな例を見ると、仕組みがより分かりやすくなります。


let temperature = 28;

if (temperature >= 25) {
    console.log("今日は暑いですね。");
}

このコードでは、temperature が 25 以上であれば console.log が実行されます。25に満たない場合は何も起きません。つまり、条件が「真」なら処理が実行され、「偽」ならスキップされるという働きです。

if文は今後のプログラミング学習でも必ず使う構文なので、まずは「条件に合っているかどうかで処理を変える仕組み」として気軽に覚えていきましょう。複雑なプログラムでも、この基本が理解できているだけで読みやすさと理解度が大きく変わります。

2. if文の基本的な書き方

if文の基本形はとてもシンプルで、次のような形になっています。if (条件) { 処理 }という書き方で、「条件」が正しいときだけ{}の中の処理が実行されます。ここでいう「条件」とは、はい／いいえ（true／false）で判定できる式のことだとイメージしておくと分かりやすいです。

まずは、年齢を使った分かりやすい例を見てみましょう。


let age = 20;

if (age >= 18) {
    console.log("あなたは大人です。");
}

このコードでは、変数ageに20という数値を入れています。次の行のif (age >= 18)という部分が「条件」です。ここでは「age が 18 以上かどうか？」をチェックしていて、今回の例では 20 ≥ 18 なので条件は真（true）になります。

条件が真であれば、{}の中のconsole.log("あなたは大人です。");が実行され、次のような結果が表示されます。


あなたは大人です。

もし、ageの値が 15 のように 18 未満であれば、条件は偽（false）になるため、ifの中の処理は一切実行されません。つまり、条件に合えば実行・合わなければ何もしないというのがif文の基本的な振る舞いです。

もう少しイメージしやすいように、別の例も見てみましょう。今ログインしているユーザーにだけメッセージを出したい場合は、次のように書けます。


let isLoggedIn = true;

if (isLoggedIn) {
    console.log("ログインありがとうございます！");
}

isLoggedInがtrueのときだけメッセージが表示され、falseであれば何も表示されません。このように、TypeScriptのif文は「条件に応じて処理を実行するかどうか」をシンプルに書き分けるための基本テクニックで、どんなアプリケーションでも頻繁に登場します。

3. else文で「それ以外」の処理を書く

else文は、ifの条件が成り立たなかったときに実行したい処理を書くためのブロックです。言い換えると、「条件に当てはまったらAをする、そうでなければBをする」という、二択の分岐を表現するときに使います。TypeScriptの条件分岐ではとてもよく登場する基本パターンです。

たとえば、「18歳以上なら大人、それ以外は子ども」と表示したい場合は次のように書きます。


let age = 16;

if (age >= 18) {
    console.log("あなたは大人です。");
} else {
    console.log("あなたは子どもです。");
}


あなたは子どもです。

このサンプルでは、まずif (age >= 18)で「age が 18 以上かどうか」をチェックしています。例ではageが16なので条件は偽（false）になり、ifの中はスキップされ、その代わりにelseの中に書いた「あなたは子どもです。」というメッセージが実行されます。もしageが20ならif側だけが実行され、else側は無視されます。

このように、ifとelseは必ずセットで動きます。「条件が真ならifの中」「それ以外のすべての場合はelseの中」と覚えておくと、TypeScriptでの条件分岐の流れをイメージしやすくなります。

もう一つ、日常の場面に近い例として、ログインしているかどうかで表示メッセージを変えるコードも見てみましょう。


let isLoggedIn = false;

if (isLoggedIn) {
    console.log("ログイン中のユーザーです。ようこそ！");
} else {
    console.log("ゲストユーザーとして表示しています。");
}

isLoggedInがtrueなら「ログイン中」のメッセージが、falseなら「ゲストユーザー」のメッセージが表示されます。Webアプリやフロントエンドの画面表示でもよく使う書き方なので、TypeScriptのif文とelse文の組み合わせをしっかり身につけておくと、実際の開発で役立つ場面が増えていきます。

4. else ifで複数の条件を判断する

else ifは、ひとつの条件だけでは判断できないときに使う追加の分岐です。「もしAならAの処理、そうでなくてBならBの処理、どちらでもなければCの処理」といったように、段階的に条件を見ていきたいときにとても役立ちます。条件が複数ある現実の場面に近く、プログラムでも自然に使える書き方です。

たとえば、点数によって評価ランクを決めたいというケースを考えてみましょう。


let score = 75;

if (score >= 90) {
    console.log("評価：A");
} else if (score >= 70) {
    console.log("評価：B");
} else if (score >= 50) {
    console.log("評価：C");
} else {
    console.log("評価：D");
}


評価：B

この仕組みは、上から順番に「条件に当てはまるものがあるか？」をチェックしていくイメージです。まずscore >= 90を確認し、ダメなら次のscore >= 70、さらにダメならscore >= 50を確かめます。いずれにも当てはまらない場合はelseへ進みます。このように、複数の条件を整理して順番に判定したいときにelse ifはとても便利です。

もう少し生活に近い例として、「気温に応じて服装のアドバイスを変える」という処理も書いてみましょう。


let temperature = 12;

if (temperature >= 25) {
    console.log("今日は半袖で大丈夫です。");
} else if (temperature >= 18) {
    console.log("薄手の上着があると安心です。");
} else if (temperature >= 10) {
    console.log("上着を着て出かけましょう。");
} else {
    console.log("厚手のコートが必要です。");
}

気温というひとつの数値からでも細かな分岐を作ることで、より現実的な判定ができます。TypeScriptでアプリを作るときも、ユーザーの状態や入力値に応じて細かく動作を変えたい場面が多いため、このelse ifの考え方を身につけておくと応用の幅が大きく広がります。

5. switch文とは？

switch文は、特定の値に応じて複数の選択肢から処理を分けたいときに使います。if文よりも見やすく書けることがあるので、ケースが明確なときに便利です。

6. switch文の基本構文と使い方

たとえば、曜日によって出力を変えたいとき、switch文を使うとスッキリ書けます。


let day = "水曜日";

switch (day) {
    case "月曜日":
        console.log("今日は週の始まりです。");
        break;
    case "水曜日":
        console.log("週の真ん中です。");
        break;
    case "金曜日":
        console.log("明日はお休みです！");
        break;
    default:
        console.log("普通の日です。");
}


週の真ん中です。

caseごとに分岐し、最後にbreakを書くことで他のケースへの処理が行かないようにします。どのcaseにも当てはまらない場合は、defaultが実行されます。

7. 条件に使える比較演算子

if文やswitch文でよく使われるのが「比較演算子（ひかくえんざんし）」です。値と値を比べるための記号で、下記のようなものがあります。

==：値が等しい
!=：値が等しくない
>：より大きい
<：より小さい
>=：以上
<=：以下
===：値と型の両方が等しい（より厳密）

たとえばif (x === 10)のように使うと、値が10であり、かつ型も一致しているかを確認できます。

8. 条件文でありがちなミスと注意点

初心者のうちは以下のようなミスをしやすいので注意しましょう。

=（代入）と==（比較）を間違える
breakをswitch文の中に書き忘れて、他のcaseも実行されてしまう
if文に{}を省略すると、1行だけしか処理できない

正しく書けているかどうか、何度も見直す習慣をつけましょう。

まとめ

TypeScriptにおけるif文やswitch文は、プログラムの流れを制御する上で欠かせない基本構文です。条件に応じて処理を切り替えるという考え方は、現実の判断と非常に似ており、初心者にも直感的に理解しやすいポイントです。特にif文は細かい条件分岐に適しており、else ifやelseと組み合わせることで複雑な条件も柔軟に表現できます。

一方で、switch文は比較対象が明確な場合にすっきりと書けるため、条件が多岐にわたる場面では視認性と保守性に優れています。breakの書き忘れや、default節の重要性を理解することは、バグの少ないプログラムを書くためにとても大切です。

また、比較演算子の使い方にも注意が必要です。==と===の違い、=との混同など、初心者がつまずきやすい部分をしっかり区別することで、正確な条件判定ができるようになります。

以下は、実践的な条件分岐の一例です。ユーザーの年齢と曜日の情報をもとに、適切なメッセージを表示するコードになっています。


let age = 17;
let today = "土曜日";

// 年齢のチェック
if (age >= 18) {
    console.log("あなたは成人です。");
} else {
    console.log("あなたは未成年です。");
}

// 曜日のチェック
switch (today) {
    case "土曜日":
    case "日曜日":
        console.log("今日は休日ですね。");
        break;
    case "月曜日":
        console.log("新しい週の始まりです！");
        break;
    default:
        console.log("平日です。頑張りましょう。");
}

このように、条件分岐を組み合わせることで、より現実的なロジックを実現することができます。コードの見通しをよくするには、条件が増えすぎないよう整理する工夫も必要です。例えば、複数のif文が続く場合はswitch文への置き換えを検討するなど、柔軟な発想が求められます。

プログラミングの基本であるifとswitchの構文をしっかり理解しておくことは、どんな種類のアプリケーションを作る際にも役立ちます。これらの分岐文を正しく使いこなせるようになると、コードの流れを自在にコントロールできるようになり、より高度な処理へのステップアップもスムーズに進められるでしょう。

先生と生徒の振り返り会話

生徒

「先生、if文とswitch文の違いがようやく分かってきました！使い分けってどう判断すればいいんですか？」

先生

「良い質問ですね。条件が細かくて柔軟に組み合わせたいときはif文、同じ変数の値によって処理を変えるときはswitch文を使うといいですよ。」

生徒

「なるほど。たしかにスコアの評価とか、曜日によってメッセージを変えるときはswitchの方が分かりやすいかも。」

先生

「そうです。そして、==と===の違いにも気をつけてくださいね。値だけじゃなくて、型まで一致しているか確認するのが===です。」

生徒

「うっかり=を使って条件を書いてしまいそう…。ちゃんと注意しないとですね！」

先生