JavaScriptの疑問符(?)構文まとめ：3つの使い方を完全マスター

JavaScriptの疑問符(?)の使い方を総まとめ。三項演算子、オプショナルチェイニング、null合体演算子の概念と実務例を通じて、コードを簡潔かつ安全にしましょう。

JavaScriptでコードを書いていると、あちこちに登場する疑問符(?)のせいで首をかしげた経験、皆さん一度はあるのではないでしょうか。if文に似ているようでもあり、オブジェクトのプロパティにくっついていたり、演算子の間に突然現れたりしますよね。

これらの疑問符は、実はJavaScriptのコードをより簡潔でエレガントにしてくれる、非常に便利な文法的装置です。特に実務では、反復的なコードを減らし、例外的な状況を効果的に処理するために本当によく使われます。

今回の記事では、JavaScript開発者なら必ず知っておくべき疑問符(?)の3つの用法、三項演算子、オプショナルチェイニング、そしてnull合体演算子について詳しく見ていきます。各構文がなぜ必要なのか、そして実際のコードでどのように活用できるのかを、明確な例とともに説明します。この記事を最後まで読めば、もう疑問符を恐れることなく、自由自在に活用できる自分を発見できるはずです！

1. 三項演算子 (Ternary Operator): 条件 ? 値1 : 値2

三項演算子は、if...else文を一行に短縮してくれる最も基本的な疑問符の構文です。その名の通り、3つのオペランド（条件、真の場合の値、偽の場合の値）を必要とします。

• 構文: 条件 ? 真の場合の式 : 偽の場合の式

if...else文と比較してみると、その役割が明確になります。

// if...else文を使用
let isAdult;
const age = 20;

if (age > 18) {
  isAdult = true;
} else {
  isAdult = false;
}
console.log(isAdult); // true

// 三項演算子を使用
const isAdultTernary = age > 18 ? true : false;
console.log(isAdultTernary); // true

コードがずっと簡潔になりましたね。三項演算子は、このように条件に応じて異なる値を数に割り当てる際に非常に役立ちます。

三項演算子のメリット

• 簡潔さ: if...elseブロックを複数行書く必要なく、一行で表現できるため、コードの可読性を高めることができます。
• 式: 三項演算子は値を返す「式」であるため、変数の割り当て以外にも、関数の引数や他の式の中に直接使用することができます。

ネストも可能です！

三項演算子を複数連結して、else ifと似た構文を作ることもできます。

const age = 15;

const message = age < 8 ? '子供です' :
                age < 18 ? '青少年です' :
                '成人です';

console.log(message); // '青少年です'

ただし、ネストが深くなりすぎるとかえって可読性を損なう可能性があるので、2〜3個程度の条件でのみ使用することをお勧めします。それ以上に複雑になる場合は、if...else if文やswitch文の方が良い選択かもしれません。

2. オプショナルチェイニング (Optional Chaining): オブジェクト?.プロパティ

オプショナルチェイニング(?.)は、ES2020(ES11)で導入された比較的新しい構文で、実務で本当に愛用されている機能の一つです。この機能は、オブジェクトのプロパティにアクセスする際、そのオブジェクトやその上位のプロパティがnullまたはundefinedの場合にエラーを発生させる代わりにundefinedを返してくれます。

例えば、サーバーからユーザー情報を受け取ってプロフィール写真を表示する必要がある状況を考えてみましょう。

const user = {
  name: "ジョイ",
  // profileオブジェクトがない場合もある
};

// オプショナルチェイニングがない場合
// const profileImage = user.profile.image; // TypeError: Cannot read properties of undefined (reading 'image')

上記のコードでは、userオブジェクトにはprofileプロパティがないため、user.profileはundefinedとなり、undefinedからimageプロパティを探そうとするためTypeErrorが発生します。このようなエラーはアプリケーションを停止させる可能性があります。

以前は、このようなエラーを防ぐためにif文や&&演算子を使用していました。

// 1. if文でチェック
let profileImage;
if (user && user.profile) {
  profileImage = user.profile.image;
}

// 2. &&演算子でチェック
const profileImageAnd = user && user.profile && user.profile.image;

しかし、オプショナルチェイニングを使えば、このコードが魔法のようにシンプルになります。

const user = {
  name: "ジョイ",
};

const profileImage = user.profile?.image;
console.log(profileImage); // undefined (エラー発生なし)

user.profileがundefinedなので、?.演算子は即座に評価を停止し、undefinedを返します。おかげでランタイムエラーなしに安全に値を処理できるようになったのです！オブジェクトのプロパティだけでなく、配列の要素(arr?.[index])や関数の呼び出し(func?.())にも使用でき、非常に活用度が高いです。

3. null合体演算子 (Nullish Coalescing): 値1 ?? 値2

null合体演算子(??)、日本語では「nullish coalescing operator」と呼ばれるこの構文も、オプショナルチェイニングと共にES2020で導入されました。この演算子は、左側のオペランドが nullまたはundefined の場合にのみ右側のオペランドを返し、それ以外の場合は左側のオペランドをそのまま返します。

デフォルト値を設定する際に非常に便利で、よく使われていた論理OR演算子(||)の欠点を補完してくれます。

||演算子との違い

||演算子は、左側のオペランドが’falsy’な値の場合に右側の値を返します。JavaScriptにおけるfalsyな値には、null、undefinedだけでなく、0、""(空文字列)、false、NaNも含まれます。

このため、意図しないバグが発生することがあります。例えば、ユーザーが設定した値が0や空文字列であり、それを有効な値として扱いたい場合に||を使うと問題になります。

let height = 0;

console.log(height || 100); // 100
// heightが0 (falsy) なので100が出力される。意図した動作ではない可能性がある。

このような状況で、null合体演算子(??)が輝きを放ちます。??はnullとundefinedのみをチェックするためです。

let height = 0;
let text = "";

console.log(height ?? 100); // 0 (heightはnullでもundefinedでもないので、そのまま0を返す)
console.log(text ?? "デフォルト値"); // "" (textはnullでもundefinedでもないので、そのまま空文字列を返す)

let missingValue = null;
console.log(missingValue ?? "デフォルト値"); // "デフォルト値"

このように??を使えば、0や""のような有効な値を維持しつつ、nullまたはundefinedの場合にのみ安全にデフォルト値を設定できます。

演算子の組み合わせに関する注意点

??演算子は、他の論理演算子(&&, ||)と一緒に使用する場合、括弧なしでは使用できないように仕様で定められています。これは開発者のミスを防ぐためです。したがって、他の演算子と一緒に使用するには、必ず括弧で優先順位を明確に指定する必要があります。

// let x = 1 && 2 ?? 3; // SyntaxErrorが発生！

let x = (1 && 2) ?? 3; // 正しい使い方
console.log(x); // 2

まとめ：疑問符と仲良くなろう

ここまで、JavaScriptで疑問符(?)が使われる3つの主要な構文を見てきました。

• 三項演算子 (? :): if...elseを一行に短縮し、条件に応じて異なる値を返したいときに使用します。
• オプショナルチェイニング (?.): オブジェクトのネストされたプロパティにアクセスする際、nullやundefinedによるエラーを防ぎたいときに使用します。
• null合体演算子 (??): 変数にデフォルト値を割り当てる際、0や""のようなfalsyな値を有効なものとして扱いたいときに使用します。

これら3つの構文は、現代のJavaScript開発においてコードの安定性と可読性を大幅に向上させる必須のツールです。最初は少し馴染みがないかもしれませんが、何度か実際に使ってみればすぐに慣れ、その便利さに魅了されることでしょう。さあ、あなたのコードにある複雑なif文や&&チェーンを、洗練された疑問符構文に変えてみましょう！