開発Tips（2025-11-28）

JavaScript

JavaScriptの Optional Chaining と Nullish Coalescing を活用することで、存在しないプロパティやnull/undefinedの値に安全にアクセスできます。これにより、エラーを未然に防ぎ、簡潔で可読性の高いコードを記述できます。

Optional ChainingとNullish Coalescingで安全なプロパティアクセス

• 説明: Optional Chaining (?.) を使用すると、オブジェクトの深いネストされたプロパティにアクセスする際に、プロパティが存在しない場合にエラーが発生するのを防ぎ、undefined を返します。Nullish Coalescing (??) 演算子は、変数が null または undefined の場合にのみ、デフォルト値を割り当てます。

• コード例:

  // Optional Chaining
  const user = {
    profile: {
      name: 'John Doe',
      address: {
        city: 'New York'
      }
    }
  };
  
  const city = user?.profile?.address?.city; // city は 'New York'
  const country = user?.profile?.address?.country; // country は undefined。エラーにならない。
  
  // Nullish Coalescing
  const defaultName = user?.profile?.name ?? 'Guest'; // defaultName は 'John Doe'
  const missingName = user?.missingProfile?.name ?? 'Unknown'; // missingName は 'Unknown'

• 注意点: Optional Chaining は、プロパティが存在しないことが予期される場合にのみ使用します。存在が必須のプロパティに Optional Chaining を使用すると、予期せぬ undefined が伝播し、デバッグが困難になる可能性があります。

• おすすめポイント: Optional Chaining と Nullish Coalescing を組み合わせることで、コードがより簡潔になり、nullチェックのボイラープレートコードを大幅に削減できます。可読性が向上し、エラーを減らす効果も期待できます。