JavaScript - 条件演算子

こんにちは、未来のJavaScript魔術師たち！今日は、条件演算子の不思議な世界に潜り込みます。心配しないでください。これまで一度もコードを書いたことがなくても、私はこのエキサイティングな旅にお伴いします。では、虚拟の魔杖（キーボード）を手に取り、条件の呪文を唱えてみましょう！

条件演算子とは？

交通信号機だと思ってください。あなたの仕事は、車が進むべきか止まるべきかを決定することです。这正是JavaScriptにおける条件演算子の役割です。プログラムが特定の条件に基づいて決定を下すのを助けます。

三項演算子：条件の多様な道具

今日のスターは三項演算子です。これはコンパクトで超効率的なif-elseステートメントのようです。それを分解してみましょう：

condition ? expressionIfTrue : expressionIfFalse

まるで質問をしているかのようです：

• もし答えがはい（true）なら、まず最初のことをします。
• もし答えがいいえ（false）なら、次のことをします。

文法：条件の魔法のレシピ

では、私たちの条件の potion の材料を見てみましょう：

1. condition：これは私たちの質問です。雨が降っているのか？ユーザーがログインしているのか？数が偶数なのか？
2. ?：これは「それでは…」と言っているようなものです。
3. expressionIfTrue：条件がtrueの場合に何をすべきか
4. :：これは「さもなければ…」と言っているようなものです。
5. expressionIfFalse：条件がfalseの場合に何をすべきか

例1：天気判断プログラム

まずは簡単な例から始めましょう。天気に基づいて傘を持つかどうかを決定するプログラムを作成します。

let isRaining = true;
let decision = isRaining ? "傘を持ってください" : "傘は家に置いてください";
console.log(decision);

このコードを実行すると、「傘を持ってください」と出力されます。

以下に分解します：

• isRainingは私たちの条件です。これがtrueに設定されています。
• もし雨が降っている（isRainingがtrue）場合、「傘を持ってください」と返します。
• もし雨が降っていない場合、「傘は家に置いてください」と返します。
• この結果をdecision変数に保存します。

isRainingをfalseに変更して、何が起こるかを確認してみてください！

例2：年齢チェックプログラム

次に、誰かが投票資格があるかどうかをチェックするプログラムを作成します。

let age = 20;
let canVote = age >= 18 ? "はい、あなたは投票できます！" : "申し訳ありませんが、あなたは投票する年齢ではありません。";
console.log(canVote);

これは「はい、あなたは投票できます！」と出力します。

以下に分解します：

• ageを20に設定します。
• 私たちの条件はage >= 18（年齢が18歳以上かどうか）です。
• もしtrueなら、「はい、あなたは投票できます！」と返します。
• もしfalseなら、「申し訳ありませんが、あなたは投票する年齢ではありません。」と返します。

年齢を16に変更して、出力がどのように変わるかを確認してみてください！

例3：成績判定プログラム

少し複雑な例に進みましょう。スコアに基づいて成績を判定するプログラムを作成します。

let score = 85;
let grade = score >= 90 ? 'A' :
score >= 80 ? 'B' :
score >= 70 ? 'C' :
score >= 60 ? 'D' : 'F';
console.log(`あなたの成績は: ${grade}`);

これは「あなたの成績は: B」と出力します。

これは少し違っています！複数の三項演算子を連鎖して使用しています。まるで決定の滝のようです：

• まず、スコアが90以上かどうかをチェックします。もしそうなら、それは'A'です。
• もしなら、スコアが80以上かどうかをチェックします。もしそうなら、それは'B'です。
• これが続いて、60未満の場合は'F'です。

これは強力な技術ですが、慎重に使用してください。太多りな連鎖はコードの読みやすさを損ないます！

null値の処理：null結合演算子

時々、nullまたはundefinedの値を処理する必要があります。ここで登場するのがnull結合演算子：??です。

let username = null;
let displayName = username ?? "Guest";
console.log(`ようこそ、${displayName}！`);

これは「ようこそ、Guest！」と出力します。

以下に分解します：

• もしusernameがnullまたはundefinedなら、「Guest」を使用します。
• もしusernameに値があるなら、それを使用します。

これはデフォルト値を提供する便利な方法です！

条件演算子のチートシート

ここで学んだ演算子の簡単な参照表を示します：

演算子	名前	目的
?:	三項演算子	条件に基づいて2つの値の間で決定を行う
??	null結合演算子	nullまたはundefinedを処理する際にデフォルト値を提供する

実践により完璧に！これらの演算子を使った自分自身の例を作成し、実験してみてください。間もなく、あなたのコードは条件のオーケストラを指揮する準備が整うでしょう！

ハッピーコーディング、そしてあなたの条件文がいつもtrue（あなたがそう望むとき）でありますように！

Credits: Image by storyset