JavaScriptのif文を短く書く方法：三項演算子と論理演算子のスマートな活用術

JavaScriptの開発において、条件分岐は最も頻繁に使用される構文の一つですが、すべての条件をif文で記述するとコードが冗長になりがちです。

2026年現在のモダンな開発現場では、コードの可読性と保守性を高めるために、if文を簡潔に省略して記述する手法が広く採用されています。

本記事では、三項演算子や論理演算子、さらにはオプショナルチェイニングなどを活用して、スマートにコードを記述する方法を詳しく解説します。

if文を省略するメリットと注意点

プログラム全体の行数を削減することで、ロジックの見通しが良くなり、バグの早期発見につながります。 特に代入処理や単純な実行処理において、if文のネスト（入れ子）を解消することは、開発効率の向上に直結します。

ただし、過度な省略は逆に可読性を損なう可能性があるため、チーム開発ではバランスを考慮することが重要です。

三項演算子による条件分岐の簡略化

三項演算子（条件演算子）は、JavaScriptで最もポピュラーなif文の代替手段です。

「条件式 ? 真の時の値 : 偽の時の値」という形式で記述し、一行で値を返却できるのが最大の特徴です。

三項演算子の基本構文

まずは、従来のif文と三項演算子の書き方を比較してみましょう。

// 従来のif文による記述
const age = 20;
let canDrink;

if (age >= 20) {
    canDrink = "飲酒可能です";
} else {
    canDrink = "未成年です";
}

console.log(canDrink);

// 三項演算子による記述
const result = age >= 20 ? "飲酒可能です" : "未成年です";
console.log(result);

飲酒可能です
飲酒可能です

このように、変数の宣言と代入を同時に行えるため、コードの意図が明確になります。

多重の条件判断への適用

三項演算子を繋げることで、else ifのような多重の条件分岐も記述可能ですが、注意が必要です。

const score = 85;

// 三項演算子の連結（入れ子）
const grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";

console.log(`評価は${grade}です`);

評価はBです

あまりに深くネストさせると解読が困難になるため、三段階以上の分岐は従来のif文や後述するオブジェクトマッピングを検討すべきです。

論理演算子を活用したショートハンド

論理演算子（&& や ||）を利用した「短絡評価」は、特定の条件を満たした時だけ処理を実行したい場合に非常に有効です。

論理積（&&）による実行制御

「もし～ならば実行する」という単純な処理は、&&演算子だけで完結させることができます。

const isLoggedIn = true;

// if文を使った場合
if (isLoggedIn) {
    console.log("マイページを表示します");
}

// &&演算子を使った省略記法
isLoggedIn && console.log("マイページをスマートに表示します");

マイページを表示します
マイページをスマートに表示します

これは、左辺が真（true）の場合のみ右辺が評価されるというJavaScriptの短絡評価の特性を利用した手法です。

論理和（||）によるデフォルト値の設定

「値が存在しない場合に初期値を割り当てる」という処理には、||演算子が便利です。

let userName = "";

// userNameが空（falsy）の場合に"ゲスト"を代入
const displayName = userName || "ゲストユーザー";

console.log(`こんにちは、${displayName}さん`);

こんにちは、ゲストユーザーさん

ただし、数値の「0」や空文字列「””」も偽（false）と判定されてしまう点には注意してください。

Null合体演算子（??）の使い分け

2026年の開発において、||演算子よりも安全に使用されるのがNull合体演算子（??）です。

厳密なNull判定の重要性

??演算子は、左辺が null または undefined の場合のみ 右辺を評価します。

const configValue = 0;

// 論理和（||）の場合：0はfalse扱いなので右辺が採用される
const val1 = configValue || 100;

// Null合体演算子（??）の場合：0はnull/undefinedではないので0が採用される
const val2 = configValue ?? 100;

console.log(`val1: ${val1}, val2: ${val2}`);

val1: 100, val2: 0

意図しないデフォルト値の上書きを防ぐために、数値を扱う設定値の初期化には??を使用するのがベストプラクティスです。

オプショナルチェイニングによるエラー回避

ネストされたオブジェクトのプロパティを確認する際、if文で存在チェックを繰り返すのは苦痛です。

オプショナルチェイニング（?.）を使えば、深い階層のプロパティへ安全にアクセスできます。

const user = {
    profile: {
        // addressが存在しない可能性がある
    }
};

// 従来のチェック方法
let city;
if (user && user.profile && user.profile.address) {
    city = user.profile.address.city;
}

// オプショナルチェイニングによる省略
const safeCity = user?.profile?.address?.city ?? "住所不明";

console.log(safeCity);

住所不明

この記法はエラーを投げる代わりにundefinedを返すため、プログラムの急停止を防ぐ強力な武器になります。

複雑なif-elseをオブジェクトで整理する

特定のキーに基づいて値を切り替えるような複雑な分岐は、if文よりもオブジェクトのリテラルやMapを活用した方がスマートです。

これを「ルックアップテーブル」と呼びます。

const actionType = "update";

// if-elseによる分岐
if (actionType === "create") {
    console.log("作成します");
} else if (actionType === "update") {
    console.log("更新します");
} else if (actionType === "delete") {
    console.log("削除します");
}

// オブジェクトによるマッピング
const actions = {
    create: () => console.log("作成します"),
    update: () => console.log("更新します"),
    delete: () => console.log("削除します")
};

// 実行（存在しない場合は何もしない）
actions[actionType]?.();

更新します
更新します

この手法により、ロジックがデータ化され、将来的な分岐パターンの追加が容易になります。

ガード句（Early Return）によるネストの解消

if文を「省略」するのではなく、「構造を変えてif文を減らす」テクニックがガード句です。

関数の冒頭で不要な条件を弾くことで、メインの処理をネストの外に配置できます。

function processData(data) {
    // ガード句：データがない場合はすぐに終了
    if (!data) return;

    // メインの処理（if文の中に閉じ込められない）
    console.log(`${data.name}を処理中です...`);
}

processData({ name: "ユーザーA" });
processData(null);

ユーザーAを処理中です...

この「早期リターン」を意識するだけで、コードの可読性は劇的に改善されます。

まとめ

JavaScriptにおけるif文の省略は、単に行数を減らすためだけの手法ではありません。

三項演算子、論理演算子、オプショナルチェイニング、そしてガード句を適切に使い分けることで、「誰が見ても意図がすぐに伝わるコード」を書くことが可能になります。

これらのテクニックを日常のコーディングに取り入れ、2026年のスタンダードにふさわしいスマートなJavaScriptを記述しましょう。

ただし、**「短く書くこと」そのものを目的とせず、常に読み手にとっての分かりやすさを優先することを忘れないでください。

**