TypeScript 三項演算子の効果的な使い方

こんにちは！Syuu（ @syuu_n18）です。

この記事では使いこなすとより効率的にコーディングできる TypeScript の三項演算子の使い方をついて解説します！

三項演算子って何？ 🤔

三項演算子は条件演算子とも呼ばれていて、プログラムの条件分岐を簡潔に書くことができる便利な演算子です。

基本的な書き方はこんな感じです！

条件式 ? 真の場合の値 : 偽の場合の値

? と : を使うのがポイントですね。

実際に簡単なコード例を見てみましょう。

const x = 10;
const result = x > 5 ? "大" : "小";
console.log(result); // "大"

このコードは x が 5 より大きいかどうかを判定して、大きければ "大"、そうでなければ "小" という文字列を result に代入しています。

単純に if 文で書くときより見やすくなっていますね。

三項演算子の使い方 🛠

次はもう少し実践的な使い方を見ていきましょう。

三項演算子は主に以下のような場面で使われます。

変数の初期化
関数の戻り値

詳しく説明していきますね。

変数の初期化 🌱

三項演算子は変数の初期化する場面で便利です。

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

const age = 20;
let category: string;

if (age >= 20) {
  category = "adult";
} else {
  category = "minor";
}

このコードは age が 20 以上かどうかを判定し、category に "adult" か "minor" を代入しています。

if 文を使うと波括弧が多くなるのと、category = の代入部分が重複しているのがきになりますね...

これを三項演算子を使って書くと以下のようになります！

const age = 20;
const category = age >= 20 ? "adult" : "minor";

わかりやすくなりましたね。

このように、簡潔に書ける上に const を使って変数の再代入を防ぐことができます。

関数の戻り値 🚀

また、三項演算子は関数の戻り値を決定する際にも使えます。

例えば次のようなコードがあります。

function getStatus(score: number): string {
  if (score >= 60) {
    return "passed";
  } else {
    return "failed";
  }
}

このコードは score が 60 以上かどうかで "passed" か "failed" を返す関数です。
こちらも return が重複していてスマートではありませんね...

これを三項演算子を使って書くと以下のようになります。

function getStatus(score: number): string {
  return score >= 60 ? "passed" : "failed";
}

こちらも簡潔に書くことができ、それによってコードの可読性が向上します。

どういう場面で使うべきか 🎯

では三項演算子はどのような場面で使えばいいのでしょうか？

ずばり、三項演算子は以下のような場面で使うと良いです。

条件分岐がシンプルで、結果をすぐに求められる場合
if 文のネストを避けたい場合

ただし、複雑な条件や処理が必要な場合は三項演算子を使うとコードが読みにくくなることがあります。
そのような場合は、適切に if 文や関数を使ってコードを整理しましょう！

実践的な例 🏃‍♂️

それでは最後に三項演算子を活用した実践的な例を紹介します！

オプショナルプロパティの初期値設定 🎁

オブジェクトのプロパティがオプショナルである場合、三項演算子を使ってデフォルト値を設定することができます。

interface User {
  name: string;
  age?: number;
}

function createUser(user: User): User {
  const defaultAge = 18;
  const newUser: User = {
    name: user.name,
    age: user.age ? user.age : defaultAge,
  };
  return newUser;
}

このコードでは age が設定されていない場合にデフォルト値 18 を設定しています。

この場合は関数内で if 文を使うよりも三項演算子を使ったほうが見やすいコードになりますね。

テンプレートリテラルの中での利用 📃

他にも、テンプレートリテラル内で三項演算子を使うことで動的に文字列を生成することができます。

const person = {
  name: "Taro",
  isStudent: true,
};

const greeting = `Hello, ${person.name}! ${
  person.isStudent ? "生徒さん、良い一日を！" : "良い一日を！"
}`;

console.log(greeting);

このコードでは person.isStudent の値によって挨拶の内容が変わります。
テンプレートリテラルは複数行になると可読性がかなり落ちてしまうので、できればワンラインで書きたいですね。

まとめ 🎊

いかがでしたか？

三項演算子はコードを簡潔に書くためにとても便利な演算子です。
ただし、使いすぎに注意してコードの可読性を損なわないように適切に活用しましょう！

Gizanbeak