TypeScriptで3項演算子を使う方法｜書き方から実例まで

（最終更新月：2023年11月）

✔当記事は以下の読者を対象にしています

✔当記事でお伝えする内容

• TypeScriptの3項演算子の基礎知識
• 便利な3項演算子の活用法とその書式
• 実際のコード例を通した3項演算子の応用

当記事を通じて、TypeScriptの3項演算子について、シンプルな使い方からさらに発展的な活用例に至るまで、具体的なサンプルコードと共に丁寧にご説明します。

TypeScriptでの3項演算子の基本

TypeScriptにおける3項演算子の基本を理解することは、コードを簡潔にし、条件に応じた動的な代入やリターンを実現する上で非常に重要です。

これらはコーディングの生産性を向上させるために役立ちます。

• 3項演算子の文法と使い方
• if文との比較: いつ3項演算子を使うべきか？
• switch文と3項演算子: 代替案の検討
• 条件式を作る: 論理演算と型の注意点

3項演算子の文法と使い方

3項演算子は条件式の評価に基づいて、二つの値のうちひとつを選択するために使用されます。

文法は次の通りです。

条件 ? 値1 : 値2;

ここで、条件が真(true)のときは値1が、偽(false)のときは値2が結果として返されます。

次のコードは、isLoggedInが真なら'Welcome!'を、偽なら'Please log in.'を表示する例です。

const isLoggedIn = true;
const greeting = isLoggedIn ? 'Welcome!' : 'Please log in.';
console.log(greeting); // 'Welcome!'

この例は初心者にもわかりやすく、3項演算子の基本的な使い方を示しています。

if文との比較: いつ3項演算子を使うべきか？

3項演算子はif文の代わりとして使うことができますが、簡単な条件のチェックで値を返したい時にとくに有効です。

以下のif文の例を3項演算子で書き換えられます。

let result;
if (user.age >= 18) {
    result = 'Adult';
} else {
    result = 'Child';
}

3項演算子を使用すると、次のように一行で記述できます。

const result = user.age >= 18 ? 'Adult' : 'Child';

このように、3項演算子はコードをより簡潔に書く手段を提供します。

switch文と3項演算子: 代替案の検討

条件分岐をおこなうswitch文同様、3項演算子を使って同様のロジックを実装することも可能です。

ただしswitch文を3項演算子で置き換えるとコードが読みづらくなる可能性があるため、適切なシーンを選ぶ必要があります。

例えば、以下のswitch文を見てみましょう。

switch (color) {
    case 'red':
        text = 'Stop';
        break;
    case 'yellow':
        text = 'Caution';
        break;
    case 'green':
        text = 'Go';
        break;
    default:
        text = 'Unknown';
}

これを3項演算子で書くと以下のようになります。

const text = color === 'red' ? 'Stop' : color === 'yellow' ? 'Caution' : color === 'green' ? 'Go' : 'Unknown';

この例では、条件が増えると3項演算子のネストが深くなり読みにくくなるため、switch文が適していると言えます。

条件式を作る: 論理演算と型の注意点

3項演算子では、その条件部分に論理演算子(&&、||)と組み合わせた複雑な条件式も使用できます。

しかしながら、TypeScriptでは型による制約があるため、条件式が期待する型と一致していることが必須です。

例えば、次のように書けます。

const accessLevel = user.role === 'admin' || user.role === 'editor' ? 'Full Access' : 'Restricted Access';

この例では、複数のロールをチェックすることによりaccessLevelに異なる文字列を代入しています。

TypeScriptの型の整合性に気をつけながら3項演算子を使えるでしょう。

3項演算子の実際の使い方

3項演算子はさまざまなシチュエーションで使われますが、特に初期化処理、関数のリターン、変数への代入などでその真価を発揮します。

効率的なコーディングのためにこれらをどのように活用するかに焦点を当ててみましょう。

• 初期化における3項演算子の威力
• 効率的な関数リターンの書き方
• 変数に対するコンパクトな代入手法
• 複雑な条件の管理: ネストした3項演算子の使用

初期化における3項演算子の威力

3項演算子は変数の初期化において、条件に基づいた値を設定する際に非常に有効です。

たとえば、ユーザーのプロフィールが設定されていない場合にデフォルト値を設定する場合、以下のように書けます。

const userProfile = user.profile || 'Default Profile';

しかし、3項演算子を使用すると、より複雑な条件を簡潔に表現できます。

const userProfile = user.profile ? user.profile : 'Default Profile';

user.profileがnull、undefined、空文字列のいずれであっても、Default Profileが初期値としてセットされます。

効率的な関数リターンの書き方

3項演算子は関数の戻り値を効率的に決定する際に役立ちます。

以下は、ユーザーの年齢に応じて異なるメッセージを返す簡単な関数の例です。

function getAgeMessage(age: number): string {
  return age >= 18 ? 'You are an adult.' : 'You are a minor.';
}

この一行のコードで、ある条件に応じて二つの異なる値を返す処理を簡潔に示せます。

変数に対するコンパクトな代入手法

変数に値を代入する際にも3項演算子が役立ちます。

プロパティの存在チェックを行いながら代入する場合、以下のようなコンパクトなコードになります。

const hasAccess = userInfo.permissions ? userInfo.permissions.includes('admin') : false;

userInfo.permissionsが存在し、その中にadminが含まれている場合のみhasAccessにtrueを、そうでなければfalseを代入しています。

複雑な条件の管理: ネストした3項演算子の使用

3項演算子はネストして使用することも可能ですが、可読性を損なわないよう注意が必要です。

ネストした例としては、以下のように記載できます。

const message = score > 90 ? 'Excellent' : score > 75 ? 'Great' : score > 50 ? 'Good' : 'Needs Improvement';

ネストが深くなり、読みにくくなります。
3項演算子の使用は適切な場面を選ぶことが大切です。

効率的な3項演算子の活用場面

3項演算子をコード内で導入する際には、適切なシナリオを見極め、その使用を濫用しないようにすることが必須です。

コードの可読性を保ちつつ、その力を最大限活用するための方法を探ります。

• 3項演算子を使う理想のシナリオ
• 濫用を避ける典型的なパターン
• 3項演算子と可読性: いつ、なぜ、どう使うか
• 代替技術と3項演算子: バランスを見極める

3項演算子を使う理想のシナリオ

3項演算子は、とくに簡易な条件に基づいて速やかに値を返したい場合に理想的です。

たとえば、スタイルやクラス名の動的な変更には次のように適用できます。

const buttonClass = isPrimary ? 'button-primary' : 'button-secondary';

isPrimaryが真のときはbutton-primaryクラスを、偽のときはbutton-secondaryクラスを代入します。

一行で簡単に条件による決定できるでしょう。

濫用を避ける典型的なパターン

3項演算子を過度に使用すると、コードが複雑になりほかの開発者が理解するのが難しくなる恐れがあります。

複数の条件や複雑なロジックを含む場合、if-else文や他の制御構造を使うほうが適切です。

簡単な判断や代入での使用に限定することが推奨されます。

3項演算子と可読性: いつ、なぜ、どう使うか

3項演算子の使用は、コードの短縮と明晰さが保たれる時に限るべきといえます。

それ自体が目的ではなく、読み手にとって理解しやすいコードのための手段であるからです。

一般的には、一行のシンプルな条件判定に適用することが最適です。

代替技術と3項演算子: バランスを見極める

3項演算子は便利ですが、すべての場合に最善の選択とは限りません。

JavascriptやTypeScriptでは、以下のような機能も同様の目的で使用できます。

• map
• filter
• テンプレートリテラル

状況に応じて最も適切な技術を選択することが重要です。

実践で役立つ3項演算子の応用例

実際のプロジェクトでの3項演算子の活用例をいくつか紹介します。

具体的なシチュエーションでの3項演算子の威力と柔軟性を理解しましょう。

• オプショナルチェーンとの連携: 初期値設定テクニック
• 文字列操作の短縮形: テンプレートリテラル内での使用
• 状態に応じたUIレンダリング: フロントエンド開発での活用法
• 配列やオブジェクト操作のショートカット

オプショナルチェーンとの連携: 初期値設定テクニック

TypeScriptのオプショナルチェーン(?.)は、プロパティが存在しない場合にundefinedを返す機能です。

3項演算子と組み合わせると、存在をチェックしつつ初期値を割り当てられます。

const userBio = user.biography?.length > 0 ? user.biography : 'No biography provided.';

ここでは、user.biographyが存在し、長さが0より大きい場合にその値を使用し、そうでなければデフォルトのメッセージを設定しています。

文字列操作の短縮形: テンプレートリテラル内での使用

テンプレートリテラル内で3項演算子を使うことで、動的な文字列を簡潔に作成できます。

const statusMessage = `Your application is ${isSubmitted ? 'under review' : 'not submitted yet'}.`;

この例では、isSubmittedの値によって異なるメッセージ部分を文字列内に埋め込んでいます。

状態に応じたUIレンダリング: フロントエンド開発での活用法

フロントエンド開発では、状態に応じて異なるUIを表示する必要です。

3項演算子はReactのJSXなどで次のように使えます。

const WelcomeMessage = () => (
  <div>
    {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
  </div>
);

このコンポーネントは、`isLoggedIn`の真偽値に基づいて異なるパラグラフ要素をレンダリングします。

配列やオブジェクト操作のショートカット

3項演算子は、配列やオブジェクトを扱う際にも有用です。

配列の要素に条件に応じた処理をおこなう場合、次のように記述できます。

const productsPrice = products.map(product => product.isOnSale ? product.price * 0.8 : product.price);

この例では、各商品がセール中であれば価格を20%割引し、そうでなければ通常価格を配列に格納しています。

まとめ

当記事では、TypeScriptでの3項演算子の使い方について学習してきました。

TypeScriptにおける3項演算子は、if文やswitch文の簡潔な代替手段としてコードの可読性と効率を改善する強力なツールです。

当記事では、3項演算子の文法と使い方、if文やswitch文との比較、そして効率的な3項演算子の活用法などを初心者にもわかりやすく解説しました。

実践的な応用例を通じて、3項演算子を活用する際のベストプラクティスを学び、適切なシナリオでの使用方法を理解することができたでしょう。

コーディングの際はいつも、可読性と保守性を維持しつつ、最も効果的なツールやテクニックを使って問題を解決するバランスを取ることが重要です。