TL;DR

このページでは、Nullish coalescing 演算子 (??) の活用法について解説しますね。一言でいうと、Nullish coalescing 演算子とは、ある変数が null や undefined であれば、デフォルトの値を設定するための JavaScript の演算子です。

Nullish coalescing 演算子とは？

Nullish coalescing 演算子 (??) は、JavaScript の新たな演算子で、左辺の値が null や undefined のときに、右辺の値を返す特性を持っています。Nullish coalescing 演算子を使うと、ある変数が null または undefined であるかどうかを簡単に確認し、それに応じて代替値を設定することができます。

それでは、まず基本的なソースコードから見ていきましょう。

let undefinedValue
let defaultValue = 'Hello, World!'

console.log(undefinedValue ?? defaultValue) // 出力: 'Hello, World!'

このコードでは、undefinedValue は undefined であり、defaultValue には 'Hello, World!' という文字列が設定されています。console.log(undefinedValue ?? defaultValue); の行では、undefinedValue が undefined であるため、Nullish coalescing 演算子の右側にある defaultValue の値が出力されます。

?? や || との違い。使い分け

JavaScript では、||演算子は「論理 OR」を表し、左辺の値が「falsy」（false に評価される値：false, 0, '', null, undefined, NaN）である場合に右辺の値を評価し、返します。

一方、&&演算子は「論理 AND」を表し、左辺の値が「truthy」（true に評価される値）である場合に右辺の値を評価し、返します。

これらの演算子は「短絡評価（Short-circuit evaluation）」と呼ばれる特性を持ちます。つまり、||演算子は左辺が truthy であれば、すぐにその値を返し、右辺は評価しない。逆に、&&演算子は左辺が falsy であればすぐにその値を返し、右辺は評価しない、という動作をします。

一方、??演算子は「Nullish coalescing 演算子」と呼ばれ、左辺の値がnullまたはundefinedである場合のみ、右辺の値を評価し、返します。

それでは、これらの演算子の使い分けについて見てみましょう。

• ||演算子は、デフォルトの値を設定する際によく使われます。しかし、左辺の値が0や''（空文字列）のような falsy な値であっても、それが意図した値（有効な値）である場合には、期待する動作をしないことがあります。

let count = 0
let displayCount = count || 'No count' // "No count"となるが、0を表示したい場合は望ましくない。

• &&演算子は、特定の条件が満たされている（truthy である）場合に限り、何かを行いたいときによく使われます。

let isLoggedIn = true
isLoggedIn && console.log('User is logged in.') // isLoggedInがtrueであればログを出力

• ??演算子は、nullまたはundefinedの場合に限りデフォルト値を設定したい場合に使います。この演算子は||演算子の「0 や空文字列が falsy である」問題を解決します。

let count = 0
let displayCount = count ?? 'No count' // 0と表示され、期待する動作となる

こうした特性を理解することで、JavaScript や TypeScript の||、&&、そして??演算子を適切に使い分けることができます。

Next.js で、Nullish coalescing 演算子を活用

それでは、次に Nullish coalescing 演算子を Next.js と TypeScript でどのように利用するかについて見ていきましょう。

例えば、ユーザーから入力されたデータを扱う場合、Nullish coalescing 演算子を使うと便利です。ユーザーからの入力がない場合には、デフォルトの値を設定することができます。

以下に、Next.js と TypeScript で書かれたコンポーネントの例

を示します。

// ファイル名: components/UserGreeting.tsx

import React from 'react'

type Props = {
  name?: string
}

const UserGreeting = ({ name }: Props) => {
  const displayName = name ?? 'Guest'
  return (
    <div>
      <p>{`Hello, ${displayName}!`}</p>
    </div>
  )
}

export default UserGreeting

上記のコードは、UserGreeting というコンポーネントです。このコンポーネントは name というプロパティを受け取りますが、この name が提供されていない場合には 'Guest' というデフォルトの値を使用します。

ここで const displayName = name ?? 'Guest'; の行が重要で、ここで Nullish coalescing 演算子が使われています。name が null または undefined であれば、displayName は 'Guest' になります。そうでなければ、displayName は name の値になります。

高度な Nullish coalescing 演算子の活用

以上のように、Nullish coalescing 演算子は非常にシンプルで便利な機能を提供しますが、さらに複雑なケースでも利用できます。

例えば、オブジェクトのプロパティにアクセスする際に、そのプロパティが存在しない場合にデフォルトの値を設定することも可能です。

以下のソースコードをご覧ください。

// ファイル名: components/UserProfile.tsx

import React from 'react'

type User = {
  name: string
  age?: number
}

type Props = {
  user: User
}

const UserProfile = ({ user }: Props) => {
  const displayAge = user.age ?? '年齢非公開'
  return (
    <div>
      <p>{`${user.name}さん (${displayAge}歳)`}</p>
    </div>
  )
}

export default UserProfile

このコードでは、UserProfile コンポーネントが user オブジェクトをプロパティとして受け取ります。そして、user.age が存在しない場合には、'年齢非公開' というデフォルトの値を表示します。

Nullish coalescing 演算子は、このように複雑なオブジェクトのプロパティに対しても、簡潔で直感的な方法でデフォルトの値を設定することを可能にします。

以上が、Next.js と TypeScript での Nullish coalescing 演算子の基本的な使用法と、さらに高度な使用法についての解説でした。この演算子を活用することで、コードを簡潔にし、可能なエラーを防ぐことができます。開発の際にはぜひ活用してみてください。