前回はクリックやマウスオーバーの基本について紹介しました。

Javascript(30)モダン機能入門

今回は、モダン機能について紹介します。Optional Chaining（オプショナルチェイニングなどについて紹介します。

kamechannel.com

2025.03.03

今回はモダン機能について紹介していきます。

1冊ですべて身につくJavaScript入門講座 [ Mana ] 価格:2794円 (2025/1/12 23:09時点) 感想(2件)

JavaScriptのモダン機能入門

JavaScriptは常に進化を続け、新しい機能が次々と追加されています。Optional ChainingとNullish Coalescingは、特に注目すべきモダン機能です。これらの演算子は、複雑なオブジェクトのプロパティアクセスや、値の検証を簡潔に書けるように設計されています。この記事では、これらの最新機能の基本概念、使い方、そして実際の開発現場でどのように活用できるかを、具体的なコード例を交えて初心者にも分かりやすく解説します。

1. Optional Chainingとは？

Optional Chaining（オプショナルチェイニング）演算子「?.」は、オブジェクトのネストされたプロパティにアクセスする際、途中のプロパティが null または undefined の場合にエラーを発生させずに undefined を返すためのものです。

例：通常のプロパティアクセス

// 例: ネストしたオブジェクトからプロパティを取得する場合
const user = { profile: { name: "Alice" } };
console.log(user.profile.name); // "Alice"

Optional Chainingを使用した例

const user = { profile: null };
console.log(user.profile?.name); // undefined （エラーは発生しない）

このように、Optional Chainingを利用することで、プロパティが存在しない場合でも安全にアクセスでき、コードがシンプルになります。

2. Nullish Coalescingとは？

Nullish Coalescing 演算子「??」は、左辺の値が null または undefined である場合に、右辺の値を返すというものです。
これにより、値が存在しない場合のデフォルト値を簡潔に指定できます。

例：Nullish Coalescingを使った基本的な使い方

const name = null;
const defaultName = "Guest";
console.log(name ?? defaultName); // "Guest"

論理OR演算子との違い

論理OR演算子「||」は、左辺が偽（false、0、空文字列など）の場合に右辺を返します。一方、Nullish Coalescingは、厳密に null または undefined の場合のみ右辺を返します。

const count = 0;
console.log(count || 10);  // 10 （0は偽とみなされる）\nconsole.log(count ?? 10); // 0  （0は有効な値として扱われる）

3. Optional ChainingとNullish Coalescingの実践活用

これらの演算子は、複雑なオブジェクト操作やデフォルト値の設定に非常に役立ちます。
たとえば、APIから受け取ったデータの中には、必ずしも全てのプロパティが存在しない場合があります。Optional Chainingを使えば、存在しないプロパティにアクセスしようとしてエラーが発生するのを防ぎ、Nullish Coalescingを使えば、値が存在しない場合のデフォルト値を簡単に設定できます。

実践例：APIレスポンスの処理

const response = {
  data: {
    user: {
      name: "Bob"
      // ageが存在しない場合を想定
    }
  }
};

const userName = response.data.user?.name ?? "Unknown User";
const userAge = response.data.user?.age ?? "Age not provided";

console.log(`Name: ${userName}`); // Name: Bob
console.log(`Age: ${userAge}`);   // Age: Age not provided

4. 利用上の注意点とベストプラクティス

Optional ChainingやNullish Coalescingは非常に便利ですが、使用する際にはいくつかの注意点があります。
– 過度なチェイニングはコードの可読性を損なう可能性があります。
– デフォルト値が必要な場合は、Nullish Coalescingを正しく活用し、論理ORとの違いを理解して使い分ける必要があります。
– どちらの演算子も、コードの短縮とエラー回避に役立ちますが、元のデータの意図を正しく把握することが大切です。\n\nこれらの点を踏まえて、実際のプロジェクトでどのように使うかを検証し、コードレビューの際にも十分に議論しましょう。

5. まとめと今後の展望

本記事では、JavaScriptのモダン機能であるOptional ChainingとNullish Coalescingについて、基本概念から実践的な使い方、そして利用上の注意点まで詳しく解説しました。
これらの演算子を活用することで、複雑なオブジェクト操作を安全かつ簡潔に記述でき、エラーを防止しながらコードを効率的に記述することが可能になります。
今後は、これらの技術をさらに発展させ、より高度なデータ操作やUI実装に取り組むことで、JavaScriptの実践的なスキルを一層向上させることができるでしょう。
まずは基本をしっかりと理解し、実際にコードを書いて試すことから始め、次第に応用編に進むことをお勧めします。

6. 参考リンク

• MDN: Optional Chaining
• MDN: Nullish Coalescing Operator
• JavaScript.info: Nullish Coalescing
• Smashing Magazine: Modern JavaScript
• freeCodeCamp: Optional Chaining vs Logical Operators