JavaScript - If...Else: A Beginner's Guide

こんにちは、未来のプログラマーたち！今日はプログラミングの最も基本的な概念の一つに潜り込んでみましょう：if...else文。これをコードの中の意思決定者、交差点で車を導く信号機のように考えてください。始めましょう！

if-elseのフローチャート

コードに飛び込む前に、if...else文がどのように動作するかを視覚化してみましょう。道の分岐点にいると考えます：

[条件]
/    \
/      \
/        \
[True]      [False]
|            |
[アクション1]   [アクション2]

このシンプルな図はif...elseの本質を示しています：条件が真のときは一件事をし、それ以外の場合は別一件事をします。

JavaScriptのif文

まず基本的な'if'文から始めましょう。これは「雨が降っているなら、傘を持って」と言うようなものです。

let isRaining = true;

if (isRaining) {
console.log("傘を忘れないでください！");
}

この例では、isRainingが真のとき、メッセージが表示されます。それが偽の場合は何も起こりません。シンプルですね？

別の例を試してみましょう：

let temperature = 25;

if (temperature > 30) {
console.log("外は暑いですね！");
}

ここでは、温度が30を超える場合にのみメッセージが表示されます。この場合、25は30を超えていないため、何も表示されません。

JavaScriptのif...else文

では、条件が偽のときに何かをしたい場合どうしますか？ここで'else'が登場します。これは「雨が降っているなら、傘を持って；それ以外の場合はサングラスをかけて」と言うようなものです。

let isRaining = false;

if (isRaining) {
console.log("傘を忘れないでください！");
} else {
console.log("晴れた日を楽しんでください！");
}

この場合、isRainingが偽であるため、二つ目のメッセージが表示されます。

別の例を見てみましょう：

let age = 15;

if (age >= 18) {
console.log("あなたは投票できます！");
} else {
console.log("ごめんなさい、あなたは投票する年齢ではありません。");
}

15歳は18歳未満であるため、「ごめんなさい、あなたは投票する年齢ではありません。」というメッセージが表示されます。

JavaScriptのif...else if...文

時々、人生は白か黒だけでなく、もっと多くの選択肢が必要です。そこで'else if'が便利に使えます。これは複数選択の質問のようです。

let grade = 75;

if (grade >= 90) {
console.log("A - 素晴らしい！");
} else if (grade >= 80) {
console.log("B - がんばったね！");
} else if (grade >= 70) {
console.log("C - まずまず！");
} else if (grade >= 60) {
console.log("D - もっとがんばってください。");
} else {
console.log("F - ああ、あなたは失敗しました。");
}

この例では、成績が75であるため、「C - まずまず！」という出力になります。コードは各条件を順番にチェックし、真の条件を見つけると停止します。

もう一つ試してみましょう：

let time = 14;

if (time < 12) {
console.log("おはようございます！");
} else if (time < 18) {
console.log("こんにちは、午後の時間ですね！");
} else {
console.log("こんばんは！");
}

時間が14（午後2時）であるため、「こんにちは、午後の時間ですね！」という出力になります。

ネストされたif...else文

時々、条件の中に別の条件をチェックする必要があります。ここでネストされたif...else文が便利に使えます。

let isWeekend = true;
let isRaining = false;

if (isWeekend) {
if (isRaining) {
console.log("雨の週末です。本を読むのに完璧ですね！");
} else {
console.log("晴れた週末です。ピクニックに行きましょう！");
}
} else {
console.log("平日です。仕事の時間です！");
}

この例では、まず週末かどうかをチェックし、その後雨が降っているかどうかをチェックしてアクティビティを提案します。

If...Elseメソッドの比較表

ここで、私たちがカバーした異なるif...elseメソッドの摘要を示す便利な表を示します：

メソッド	シntax	使用例
if	if (condition) { ... }	条件が真のときにコードを実行したい場合
if...else	if (condition) { ... } else { ... }	条件が真のときと偽のときに異なる結果が必要な場合
if...else if...else	if (condition1) { ... } else if (condition2) { ... } else { ... }	複数の条件をチェックする場合
ネストされたif...else	if (condition1) { if (condition2) { ... } else { ... } } else { ... }	条件の中に別の条件をチェックする場合

覚えておいてください、コーディングは練習が全てです。これらの概念を試してみて、値を変更して出力がどのように変わるかを確認してください。それが最良の学び方です！

私の教師生活の中で、コードを弄って間違えを犯す学生は最も早く学ぶことを発見しました。それで、ものを壊して、直して、楽しみながらやるんです！

未来のプログラマーたち、ハッピーコーディング！

Credits: Image by storyset