TypeScript - If...Else 文の構造：初めての人向けガイド

こんにちは、将来のプログラミングスーパースターさん！? 今日は、プログラミングの最も基本的な概念の一つであるTypeScriptのif...else文について一緒に学びましょう。これをコードの中の決定者、まるで賢いフクロウのように思ってください。一緒にこのエキサイティングな旅に出発しましょう！

If...Else 文とは？

本題に入る前に、まずif...else文とは何かを理解しましょう。アイスクリーム屋に行って、チョコレートとバニラの間で選択するシーンを想像してみてください。あなたの思考プロセスはこんな感じかもしれません：

「もしチョコレートがあれば、それを食べる。さもなければ（else）、バニラを食べる。」

これがプログラミングにおけるif...else文の働きそのものです！特定の条件に基づいてコードが決定を下すことを許可します。

文法

では、TypeScriptでif...else文をどのように書くかを見てみましょう。最初は少し奇妙に見えるかもしれませんが、ステップバイステップで説明します！

if (condition) {
// 条件がtrueの場合に実行するコード
} else {
// 条件がfalseの場合に実行するコード
}

これを分解してみましょう：

1. if：このキーワードでステートメントを開始します。
2. (condition)：ここに条件を記述します。質問をしているようなものです。
3. { }：この角括弧内には条件がtrueの場合に実行するコードが入ります。
4. else：このキーワードで代替オプションを導入します。
5. { }：この角括弧内には条件がfalseの場合に実行するコードが入ります。

フローチャート

if...else文の動作を視覚的に理解するために、シンプルなフローチャートを見てみましょう：

[開始]
|
v
[条件をチェック]
/           \
(はい)        (いいえ)
|             |
v             v
[trueを実行]  [falseを実行]
|             |
v             v
[続行]

このフローチャートは、プログラムが条件がtrueかfalseかによってどのパスを選ぶかを示しています。

例

では、実際の例を見て、if...else文がどのように動作するかを確認しましょう！

例1：アイスクリームの決定

先ほどのアイスクリームの決定をコードにします：

let chocolateAvailable: boolean = true;

if (chocolateAvailable) {
console.log("素晴らしい！チョコレートアイスを食べる。");
} else {
console.log("それではバニラアイスを食べることにする。");
}

この例では：

• chocolateAvailableという変数を宣言し、trueに設定します。
• if文はchocolateAvailableがtrueかどうかをチェックします。
• chocolateAvailableがtrueなので、最初の角括弧内のコードが実行されます。
• コンソールに「素晴らしい！チョコレートアイスを食べる。」と表示されます。

chocolateAvailableをfalseに変更して、どうなるか試してみてください！

例2：時間に基づく挨拶

時間に基づいて異なる挨拶を行うプログラムを作成しましょう：

let currentHour: number = 14; // 14時（PM2時）

if (currentHour < 12) {
console.log("おはようございます！");
} else if (currentHour < 18) {
console.log("こんにちは！");
} else {
console.log("こんばんは！");
}

ここで起こっていることは：

• currentHourを14（PM2時）に設定します。
• 最初の条件currentHour < 12はfalseなので、次の条件に進みます。
• currentHour < 18はtrueなので、「こんにちは！」がコンソールに表示されます。
• 最後のelseブロックはスキップされます。

例3：成績計算機

シンプルな成績計算機を作成しましょう：

let score: number = 85;
let grade: string;

if (score >= 90) {
grade = "A";
} else if (score >= 80) {
grade = "B";
} else if (score >= 70) {
grade = "C";
} else if (score >= 60) {
grade = "D";
} else {
grade = "F";
}

console.log(`あなたの成績は：${grade}`);

この例では：

• scoreを85に設定します。
• 複数のif...else if文を使ってスコアを異なる範囲でチェックします。
• 85は80以上なので、成績は"B"に設定されます。
• 最後に成績をコンソールに表示します。

一般的なメソッドとその用法

以下は、if...else文で使用する一般的なメソッドと演算子の表です：

メソッド/演算子	説明	例
===	厳密な等価	if (x === 5)
!==	厳密な不等価	if (y !== 10)
>	より大きい	if (age > 18)
<	より小さい	if (temperature < 0)
>=	より大きいか等しい	if (score >= 60)
<=	より小さいか等しい	if (quantity <= 0)
&&	論理AND	if (x > 0 && x < 10)
||	論理OR	if (day === "Sat" || day === "Sun")
!	論理NOT	if (!isLoggedIn)

結論

おめでとうございます！TypeScriptのif...else文を使った条件分岐の世界への第一歩を踏み出しました。これらのステートメントは、コードの中の交通信号のように、設定した条件に基づいてプログラムがどのパスを選ぶかをガイドします。

コ딩の旅を続ける中で、if...else文は非常に多く使われるものです。非常に万能で強力です。ですから、続けて練習し、すぐにでもチョコレートとバニラアイスの選択のように、コードの中で決定を行えるようになるでしょう！

ハッピーコーディング、そして覚えておいてください – プログラミングにおいても人生においても、正しい選択を行うことが重要です！??

Credits: Image by storyset