【初心者向け】JavaScriptで条件分岐をもっと簡単に！条件演算子の使い方

JavaScriptにおける条件演算子（三項演算子）の使い方

condition ? expression1 : expression2

この式は以下の意味になります。

• condition が true の場合、expression1 の値を返す

例

const age = 20;
const isAdult = age >= 18;

const message = isAdult ? "成人です" : "未成年です";
console.log(message); // 出力: 成人です

この例では、age が18歳以上かどうかを条件に、message 変数に適切な文字列を代入しています。

条件演算子は、if 文よりも簡潔に条件分岐を記述できるという利点があります。特に、単純な条件分岐の場合、コードが読みやすくなり、メンテナンス性も向上します。

条件演算子の注意点

条件演算子は、以下の点に注意する必要があります。

• 複雑な条件分岐には向かない
• ネストした条件演算子は、可読性が悪くなる可能性がある
• 変数に代入する場合は、型推論が働かない

条件演算子の使い分け

単純な条件分岐の場合は、条件演算子を使用するのがおすすめです。一方、複雑な条件分岐や、変数に代入する必要がある場合は、if 文を使用するのが一般的です。

JavaScriptにおける条件演算子のサンプルコード

例1：年齢判定

const age = 20;
const message = age >= 18 ? "成人です" : "未成年です";
console.log(message); // 出力: 成人です

例2：数値の比較

この例では、x と y の値を比較し、大きい方の値を max 変数に代入します。

const x = 10;
const y = 20;
const max = x > y ? x : y;
console.log(max); // 出力: 20

例3：文字列の判定

この例では、str 変数が空文字列かどうかを判定し、空文字列の場合は "空文字列です" を、そうでない場合は "空文字列ではありません" を message 変数に代入します。

const str = "";
const message = str === "" ? "空文字列です" : "空文字列ではありません";
console.log(message); // 出力: 空文字列です

例4：論理演算子の組み合わせ

この例では、age 変数が18歳以上かつ isMale 変数が true の場合のみ、message 変数に "成人男性です" を代入します。

const age = 20;
const isMale = true;
const message = age >= 18 && isMale ? "成人男性です" : "それ以外";
console.log(message); // 出力: 成人男性です

例5：三項演算子のネスト

const score = 85;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";
console.log(grade); // 出力: B

これらの例は、条件演算子の基本的な使い方を示しています。条件演算子は、様々な場面で活用することができるため、ぜひ積極的に活用してみてください。

JavaScriptにおける条件分岐の代替方法

if 文

最も基本的な条件分岐の方法です。条件式に基づいて、複数の処理を分岐させることができます。

利点

• 可読性が高い
• 変数に代入する処理など、様々な処理を記述できる

欠点

• コードが冗長になりやすい

const age = 20;

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

switch 文

特定の値に基づいて、複数の処理を分岐させる場合に適しています。

• if 文よりも簡潔に記述できる場合がある
• 複数の条件を効率的に処理できる

• 条件が case ラベルに一致しない場合は、処理されない
• デフォルト処理を忘れやすい

const age = 20;

switch (age) {
  case 18:
    console.log("成人です");
    break;
  case 20:
    console.log("20歳です");
    break;
  default:
    console.log("それ以外です");
}

論理演算子を使用して、条件式を組み合わせることで、条件分岐を記述することができます。

• 処理を効率化できる

• 可読性が悪くなる可能性がある

const age = 20;
const isMale = true;

const message = age >= 18 && isMale ? "成人男性です" : "それ以外";
console.log(message); // 出力: 成人男性です

その他の方法

上記以外にも、関数やオブジェクトを使用した条件分岐など、様々な方法があります。

• コードをモジュール化できる
• 再利用性を高められる

• 複雑になる可能性がある
• 理解しにくい場合がある

function isAdult(age) {
  return age >= 18;
}

const age = 20;
const message = isAdult(age) ? "成人です" : "未成年です";
console.log(message); // 出力: 成人です

どの方法を使用するかは、状況に応じて判断する必要があります。一般的には、以下の指針を参考にすると良いでしょう。

• シンプルな条件分岐の場合は、if 文または条件演算子を使用する
• コードをモジュール化したい場合は、関数やオブジェクトを使用する

JavaScriptにおける条件分岐には、様々な方法があります。それぞれの方法の利点と欠点を理解し、状況に応じて適切な方法を選択することが重要です。