三項演算子省略でコードがスッキリ！ワンランク上の技術10選

●三項演算子とは？

皆さん、JavaScriptのコードを書く際に、if文を使って条件分岐を行うことは多いと思います。

でも、実はif文を簡潔に書く方法があるのをご存知でしょうか？それが今回ご紹介する「三項演算子」です。

三項演算子を使えば、if文を1行で表現できるんです。

コードがスッキリして読みやすくなるので、ぜひマスターしたいテクニックですよね。

○基本的な構文と使い方

三項演算子の基本的な構文は次のようになります。

条件式 ? 式1 : 式2

条件式が真（true）だった場合は式1が、偽（false）だった場合は式2が評価されます。

例えば、次のようなif文があるとします。

let x = 10;
let result;

if (x > 5) {
  result = "xは5より大きい";
} else {
  result = "xは5以下";
}

console.log(result);

実行結果

xは5より大きい

これを三項演算子で書き換えると、次のようになります。

let x = 10;
let result = x > 5 ? "xは5より大きい" : "xは5以下";

console.log(result);

実行結果

xは5より大きい

コードが1行になり、とてもスッキリしましたね。

条件式x > 5が真なので、resultには"xは5より大きい"が代入されます。

○サンプルコード1：if文との比較

if文と三項演算子の違いを、もう少し詳しく見ていきましょう。

次の例は、ユーザーの年齢に応じて異なるメッセージを表示するコードです。

let age = 20;
let message;

if (age >= 20) {
  message = "成人です";
} else {
  message = "未成年です";
}

console.log(message);

実行結果

成人です

これを三項演算子で書き換えると、次のようになります。

let age = 20;
let message = age >= 20 ? "成人です" : "未成年です";

console.log(message);

実行結果

成人です

if文では5行必要だったコードが、三項演算子だと1行で書けています。

条件分岐が簡単な場合は、三項演算子を使うとコードがとても読みやすくなりますね。

○三項演算子のメリットとデメリット

三項演算子のメリットは、何といってもコードが簡潔になることです。

特に条件分岐が単純な場合に効果を発揮します。

また、if文よりも少ないステップ数で済むため、わずかではありますがパフォーマンスが向上するという利点もあります。

ただし、三項演算子を使いすぎると、かえってコードが読みにくくなってしまう点には注意が必要です。

複雑な条件分岐が必要な場合は、if文を使った方が良いでしょう。

使い所をしっかり見極めることが大切ですね。

●三項演算子の実践的な活用法

前回は、三項演算子の基本的な使い方とメリット・デメリットについて解説しました。

三項演算子を使うことで、シンプルな条件分岐をスッキリと書けるようになりましたね。

でも、三項演算子の活用法はそれだけではありません。

もっと実践的なテクニックを身につければ、コーディングの幅がグッと広がるはずです。

そこで今回は、三項演算子のより実践的な使い方を、具体的なサンプルコードを交えて解説していきます。

ぜひ、自分のコーディングスタイルに取り入れてみてくださいね。

○サンプルコード2：デフォルト値の設定

三項演算子を使うと、変数にデフォルト値を設定するのがとても簡単です。

例えば、関数の引数にデフォルト値を設定する場合、次のように書けます。

function greet(name) {
  name = name ? name : "ゲスト";
  console.log(`こんにちは、${name}さん！`);
}

greet("太郎");
greet();

実行結果

こんにちは、太郎さん！
こんにちは、ゲストさん！

nameが渡された場合はnameを、渡されなかった場合は"ゲスト"をデフォルト値として使っています。

これを三項演算子を使わずに書くと、次のようになります。

function greet(name) {
  if (name) {
    name = name;
  } else {
    name = "ゲスト";
  }
  console.log(`こんにちは、${name}さん！`);
}

三項演算子を使った方が、コードがずっとスッキリしていますね。

○サンプルコード3：複数の条件式の連結

三項演算子は、複数の条件式を連結することもできます。

例えば、与えられた数値を「正の数」「負の数」「ゼロ」に分類するコードは、次のように書けます。

let num = 0;
let result = num > 0 ? "正の数" : num < 0 ? "負の数" : "ゼロ";

console.log(result);

実行結果

ゼロ

num > 0が真なら"正の数"、偽ならnum < 0が真なら"負の数"、どちらも偽なら"ゼロ"がresultに代入されます。

このように、条件式を?と:で連結していくことで、複数の条件分岐を1行で表現できます。

ただし、あまり複雑な条件式を連結すると、かえってコードが読みにくくなってしまうので注意しましょう。

○サンプルコード4：三項演算子のネスト

三項演算子は、ネストさせることもできます。

つまり、三項演算子の中に三項演算子を入れ子にするんです。

例えば、与えられた文字列が「数字」「英字」「その他」のどれに該当するかを判定するコードは、次のように書けます。

let str = "abc";
let result = /^\d+$/.test(str) ? "数字" : /^[a-zA-Z]+$/.test(str) ? "英字" : "その他";

console.log(result);

実行結果

英字

正規表現を使って、strが数字のみで構成されていれば"数字"、英字のみで構成されていれば"英字"、それ以外なら"その他"がresultに代入されます。

三項演算子のネストは、条件分岐が複雑になる場合に便利です。

ただし、ネストが深くなりすぎるとかえって可読性が下がるので、適度な使用にとどめましょう。

○サンプルコード5：関数との組み合わせ

三項演算子は、関数と組み合わせることもできます。

条件によって異なる関数を呼び出したい場合などに便利ですね。

例えば、与えられた数値が正の数なら2倍する関数を、負の数なら絶対値を返す関数を呼び出すコードは、次のように書けます。

function double(num) {
  return num * 2;
}

function absolute(num) {
  return Math.abs(num);
}

let num = -5;
let result = num >= 0 ? double(num) : absolute(num);

console.log(result);

実行結果

5

numが0以上ならdouble(num)が、0未満ならabsolute(num)が呼び出され、その結果がresultに代入されます。

このように、三項演算子を使えば条件に応じて異なる処理を実行できるので、コードがよりシンプルになります。

三項演算子と関数を組み合わせることで、より実践的なコーディングが可能になるでしょう。

●三項演算子の応用例

前回までに、三項演算子の基本的な使い方から実践的なテクニックまで解説してきました。

三項演算子を使いこなすことで、コードがスッキリして可読性が上がるのを実感できたのではないでしょうか。

でも、三項演算子の真価は、より複雑な条件分岐を簡潔に表現できることにあります。

実際のアプリケーション開発では、三項演算子のさらに高度な応用が求められるケースも多いんです。

そこで今回は、三項演算子のより発展的な応用例を、具体的なサンプルコードとともに解説していきます。

React JSXでの条件分岐やオブジェクトプロパティの動的選択など、実践で役立つテクニックが満載ですよ。

○サンプルコード6：React JSXでの条件分岐

ReactでJSXを使って開発する際、条件に応じて異なる要素を描画したいことがよくあります。

そんな時、三項演算子を使うとコードがとてもスッキリします。

例えば、isLoggedInという真偽値によって、”ログイン”ボタンと”ログアウト”ボタンを切り替えるコードは、次のように書けます。

function LoginButton(props) {
  return (
    <button>
      {props.isLoggedIn ? 'ログアウト' : 'ログイン'}
    </button>
  );
}

isLoggedInがtrueなら”ログアウト”、falseなら”ログイン”というテキストが表示されます。

if文を使って同じことを表現すると、次のようになります。

function LoginButton(props) {
  if (props.isLoggedIn) {
    return <button>ログアウト</button>;
  } else {
    return <button>ログイン</button>;
  }
}

三項演算子を使った方が、JSXの中で条件分岐が表現できてスマートですね。

○サンプルコード7：オブジェクトプロパティの動的選択

オブジェクトのプロパティを条件に応じて動的に選択したい場合、三項演算子が活躍します。

例えば、与えられた数値が正の数か負の数かによって、signプロパティに"positive"か"negative"を設定するコードは、次のように書けます。

function getSign(num) {
  return {
    sign: num >= 0 ? "positive" : "negative",
    value: num
  };
}

console.log(getSign(5));  // { sign: "positive", value: 5 }
console.log(getSign(-3)); // { sign: "negative", value: -3 }

numが0以上ならsignプロパティに"positive"を、0未満なら"negative"を設定した新しいオブジェクトを返しています。

三項演算子を使わずに同じことを表現すると、次のようになります。

function getSign(num) {
  let sign;
  if (num >= 0) {
    sign = "positive";
  } else {
    sign = "negative";
  }
  return {
    sign: sign,
    value: num
  };
}

三項演算子を使う方が、オブジェクトリテラルの中で条件分岐が表現できて便利ですね。

○サンプルコード8：配列要素の条件付きフィルタリング

配列から条件に合う要素だけを抽出したい場合、filterメソッドと三項演算子を組み合わせると便利です。

例えば、与えられた配列から偶数の要素だけを抽出するコードは、次のように書けます。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(num => num % 2 === 0 ? true : false);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

filterメソッドのコールバック関数の中で、num % 2 === 0（numが2で割り切れるか）を条件に、trueまたはfalseを返しています。

ただし、この例の場合、三項演算子を使わずに次のように書いた方がシンプルです。

const evenNumbers = numbers.filter(num => num % 2 === 0);

条件式の結果がそのままtrueまたはfalseになる場合は、三項演算子を使う必要はありません。状況に応じて適切に使い分けましょう。

○サンプルコード9：文字列の動的生成

文字列を動的に生成する際、条件に応じて異なる文字列を結合したい場合があります。

そんな時も三項演算子が活躍します。

例えば、与えられた数値が正の数なら”+（数値）”、負の数なら”（数値）”、0なら”0″という文字列を生成するコードは、次のように書けます。

function formatNumber(num) {
  return num > 0 ? `+${num}` : num < 0 ? `${num}` : "0";
}

console.log(formatNumber(5));  // "+5"
console.log(formatNumber(-3)); // "-3"
console.log(formatNumber(0));  // "0"

numが正の数なら+${num}、負の数なら${num}、0なら"0"という文字列を返しています。

if文を使って同じことを表現すると、次のようになります。

function formatNumber(num) {
  if (num > 0) {
    return `+${num}`;
  } else if (num < 0) {
    return `${num}`;
  } else {
    return "0";
  }
}

複数の条件分岐を三項演算子で表現することで、コードがよりコンパクトになりますね。

○サンプルコード10：数値の範囲チェック

与えられた数値が特定の範囲内にあるかどうかをチェックする際、三項演算子を使うと便利です。

例えば、与えられた数値が0以上100以下の範囲内にあるかどうかをチェックするコードは、次のように書けます。

function inRange(num) {
  return num >= 0 && num <= 100 ? "範囲内" : "範囲外";
}

console.log(inRange(50)); // "範囲内"
console.log(inRange(-5)); // "範囲外"
console.log(inRange(105)); // "範囲外"

numが0以上かつ100以下の場合は"範囲内"、それ以外の場合は"範囲外"という文字列を返しています。

if文を使って同じことを表現すると、次のようになります。

function inRange(num) {
  if (num >= 0 && num <= 100) {
    return "範囲内";
  } else {
    return "範囲外";
  }
}

シンプルな条件分岐なら、三項演算子を使った方がスッキリ書けますね。

●よくあるエラーと対処法

三項演算子は便利な演算子ですが、使い方を誤ると思わぬエラーに遭遇することがあります。

せっかくの三項演算子も、正しく使いこなせないとその真価を発揮できませんよね。

そこで今回は、三項演算子を使う際によく見かけるエラーと、その対処法を具体的に解説していきます。

エラーに悩まされることなく、三項演算子を思い通りに活用できるようになりましょう。

○条件式と結果の型不一致によるエラー

三項演算子を使う際、条件式の結果と真偽の場合の値の型が一致していないとエラーが発生します。

例えば、次のようなコードがあるとします。

let num = 5;
let result = num > 0 ? "正の数" : -1;

console.log(result);

このコードでは、numが正の数なら文字列の"正の数"を、そうでない場合は数値の-1をresultに代入しています。

しかし、このコードを実行すると次のようなエラーが発生します。

TypeError: 三項演算子の真偽の結果の型が一致していません

三項演算子の真の場合と偽の場合で、値の型が一致していないことが原因です。

この場合、次のように偽の場合も文字列にすれば解決します。

let num = 5;
let result = num > 0 ? "正の数" : "-1";

console.log(result); // "正の数"

または、真の場合も数値にする方法もあります。

let num = 5;
let result = num > 0 ? 1 : -1;

console.log(result); // 1

条件式の結果と値の型は必ず一致させるようにしましょう。

○三項演算子の過剰な使用による可読性の低下

三項演算子は便利な演算子ですが、使いすぎると逆にコードの可読性を下げてしまうことがあります。

例えば、次のようなコードがあるとします。

let num = 5;
let result = num > 0 ? "正の数" : num < 0 ? "負の数" : num === 0 ? "ゼロ" : "数値ではありません";

console.log(result); // "正の数"

このコードでは、numが正の数なら"正の数"、負の数なら"負の数"、ゼロなら"ゼロ"、数値でない場合は"数値ではありません"をresultに代入しています。

一見するとスマートに見えるかもしれませんが、三項演算子が連続して使われているため、かえって読みにくくなっています。

このような場合は、次のようにif文を使った方が可読性が高くなります。

let num = 5;
let result;

if (typeof num !== "number") {
  result = "数値ではありません";
} else if (num > 0) {
  result = "正の数";
} else if (num < 0) {
  result = "負の数";
} else {
  result = "ゼロ";
}

console.log(result); // "正の数"

三項演算子は便利ですが、使いすぎには注意しましょう。可読性を重視して、適材適所で使うことが大切です。

○ネストしすぎによる複雑性の増大

三項演算子をネストさせることで、複雑な条件分岐を簡潔に表現できますが、ネストのしすぎには注意が必要です。

例えば、次のようなコードがあるとします。

let num = 5;
let result = num > 0 ? 
               num > 10 ? 
                 num > 100 ? "100より大きい" : "10より大きい" 
               : "0より大きい" 
             : num < 0 ? 
               num < -10 ? 
                 num < -100 ? "-100より小さい" : "-10より小さい"
               : "0より小さい"
             : "ゼロ";

console.log(result); // "0より大きい"

このコードでは、numの値に応じて、”100より大きい”、”10より大きい”、”0より大きい”、”-100より小さい”、”-10より小さい”、”0より小さい”、”ゼロ”のいずれかをresultに代入しています。

しかし、三項演算子が深くネストされているため、非常に読みにくくなっています。

このような場合は、次のようにif文を使った方が可読性が高くなります。

let num = 5;
let result;

if (num > 0) {
  if (num > 100) {
    result = "100より大きい";
  } else if (num > 10) {
    result = "10より大きい";
  } else {
    result = "0より大きい";
  }
} else if (num < 0) {
  if (num < -100) {
    result = "-100より小さい";
  } else if (num < -10) {
    result = "-10より小さい";
  } else {
    result = "0より小さい";
  }
} else {
  result = "ゼロ";
}

console.log(result); // "0より大きい"

三項演算子のネストは便利ですが、可読性を損なわないよう、適度にとどめることが大切ですね。

まとめ

この記事では、JavaScriptの三項演算子について、基本的な使い方から応用例、よくあるエラーと対処法まで、幅広く解説してきました。

三項演算子を使えば、シンプルな条件分岐をスッキリと書けるだけでなく、より複雑な条件式も簡潔に表現できることがわかりましたね。

React JSXでの条件分岐やオブジェクトプロパティの動的選択など、実践的なテクニックも身につけることができたのではないでしょうか。

ただし、三項演算子を使う際は、条件式と値の型の不一致、過剰な使用、ネストのしすぎなどに注意が必要です。

適材適所で使うことで、コードの可読性と品質を保ちましょう。

三項演算子を使いこなすことで、より効率的で可読性の高いコードが書けるようになるはずです。

今回学んだテクニックを実践に活かし、JavaScriptのスキルを一段階上のレベルに引き上げていってくださいね。

これからもコーディングを楽しみながら、ステップアップを続けていきましょう！