1. 導入
JavaScriptは進化の速い言語です。かつては複雑な記述が必要だった処理も、現在の仕様では非常にシンプルに記述できるようになりました。しかし、現場では「古い書き方」が混在していることも多く、これらを適切に最新の構文へ置き換えることは、保守性の向上とバグの削減において極めて重要です。本記事では、現代のJS開発で必須と言える「Null合体演算子」と「オプショナルチェイニング」に焦点を当て、その有用性を解説します。
2. 基礎知識
実務において「データの欠損」を扱う際、これまで私たちは `||` (論理和) や `&&` (論理積) を多用してきました。しかし、これらには「空文字や0を偽として判定してしまう」という落とし穴がありました。
そこで登場したのが以下の二つです。
・Null合体演算子 (??): 左辺が `null` または `undefined` の場合のみ右辺を返す。
・オプショナルチェイニング (?.): プロパティが `null` や `undefined` であっても、エラーを投げずに `undefined` を返す。
3. 実装/解決策
これらの構文は、APIから受け取ったデータのネストが深い場合や、デフォルト値を安全に設定したい場面で真価を発揮します。
例えば、ユーザー設定オブジェクトから値を取得する際、従来は多段の `if` 文や `&&` による接続が必要でしたが、これらを併用することでコードの階層をフラットに保つことができます。
4. サンプルプログラム
以下は、APIレスポンスから安全にデータを抽出する実践的な例です。
// APIから返ってくる可能性のあるデータ構造
const user = {
profile: {
name: "Taro",
// ageが0の場合でも、正しく0として扱いたい
age: 0
}
};
// 1. オプショナルチェイニングで安全にアクセス
// profileが存在しない場合でもエラーにならず undefined を返す
const userAge = user.profile?.age;
// 2. Null合体演算子でデフォルト値を設定
// 0 は false 扱いされないため、正しく 0 が代入される
const finalAge = userAge ?? 20;
console.log(`ユーザーの年齢: ${finalAge}`); // 0 と出力される
// 比較: 従来の || を使うと 0 が false と判定され、20 になってしまう
const badAge = user.profile?.age || 20;
console.log(`古い書き方での結果: ${badAge}`); // 20 と出力される（意図しない動作）
5. 応用・注意点
現場での実装において注意すべき点は、トランスパイル環境の確認です。これらの機能はモダンなブラウザでは標準サポートされていますが、古いブラウザや特定のレガシー環境をサポートする場合、`Babel` や `TypeScript` 等のツールで適切にコンパイルされている必要があります。
また、オプショナルチェイニングを過度に使用すると、本来必要なデータが存在しないケース（バグ）を見逃す可能性があります。「存在しなくて当然のデータ」に対してのみ使用し、必須のデータ構造に対しては厳格な型チェックやエラーハンドリングを行うのが、堅牢なフロントエンド開発の秘訣です。