Zenn
❓

React のオプショナルチェイニングと Null 合体演算子を理解する

に公開
JavaScript
React
tech

はじめに

最近、Udemy で NARUTO のキャラクター図鑑サイトを作ってたら、こんなコードが出てきました。

<p className="card-description">{character.debut?.appearsIn ?? "なし"}</p>

これが今回の主役 「オプショナルチェイニング（?.）」 と 「null 合体演算子（??）」 です！

オプショナルチェイニング（?.）とは？

役割

  • オブジェクトや配列のプロパティに安全にアクセスできる
  • undefined や null でもエラーを出さずに undefined を返してくれる
// 普通にアクセスするとエラーになるかもしれない
const name = user.profile.name;
// user.profile がなかったら TypeError...

// オプショナルチェイニングだと
const name = user?.profile?.name;
// なければ undefined を返すので安心！

React で API から取得したデータを扱うとき、「まだ中身がないオブジェクトかもしれない…」とか「このプロパティが無いキャラもいる…」なんて時に超便利です。

Null 合体演算子（??）とは？

役割

  • 左の値が null / undefined のときだけ、右側を使う
  • つまり**「デフォルト値」をスマートに設定**できる
const name = user.name ?? "ゲスト";
// user.name が null/undefined → "ゲスト"
// user.name が "" や false → そのまま "" や false

|| と間違えやすい注意点！

|| は「false と判定されたら右を使う」ので ""（空文字）や 0、false でも右側を返してしまいます。

?? はnull/undefined のときだけ右側を使います。

組み合わせの実例

<p className="card-description">{character.debut?.appearsIn ?? "なし"}</p>

  1. character.debut?.appearsIn

    • debut や appearsIn がなければ undefined
    • エラーで落ちるのを防ぐ

  2. ?? 'なし'

    • もし undefined の場合は 'なし' を表示

これで「キャラ情報がなければ 'なし' を表示」というロジックが実現できます。React ではデータにムラがあるとバグりやすいですが、この書き方でだいぶ安心できます ✨

まとめ

  • ?.（オプショナルチェイニング）：存在しないかもしれないプロパティをエラーなくアクセス
  • ??（null 合体演算子）：null / undefined のときだけデフォルト値を使う

React + API のような実装では、「データが足りない時のエラーを防ぎつつ、デフォルト表示を上書き」するシーンは多いため、必須テクニックの一つといえるでしょう。

初学者向け！具体例で理解を深めよう

例 1：SNS のユーザープロフィール表示

まずは、SNS のユーザープロフィールを表示する例で考えてみましょう。

// ユーザーデータの例
const user1 = {
  name: "田中太郎",
  profile: {
    age: 25,
    hobby: "サッカー",
  },
};

const user2 = {
  name: "山田花子",
  // profile がない
};

// 従来の書き方
function ShowProfile1(user) {
  // profile がないとエラーになる！
  return <div>趣味: {user.profile.hobby}</div>;
}

// オプショナルチェイニングを使った安全な書き方
function ShowProfile2(user) {
  return <div>趣味: {user?.profile?.hobby ?? "未設定"}</div>;
}

この例のポイント

  1. user1 は profile があるので問題なく表示できます
  2. user2 は profile がないので、従来の書き方だとエラーになります
  3. オプショナルチェイニングを使うと、profile がなくても安全に処理できます
  4. さらに ?? で「未設定」というデフォルト値を設定しています

例 2：API からデータを取得する場合

Web API からデータを取得する時によく遭遇するパターンを見てみます

function ProductCard({ productId }) {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    // APIからデータを取得する想定
    fetch(`/api/products/${productId}`)
      .then((res) => res.json())
      .then((data) => setProduct(data));
  }, [productId]);

  return (
    <div className="product-card">
      {/* 👎 良くない例：エラーの可能性あり */}
      <h2>{product.name}</h2>
      <p>価格: {product.price}円</p>

      {/* 👍 良い例：安全にアクセスできる */}
      <h2>{product?.name ?? "読み込み中..."}</h2>
      <p>価格: {product?.price ?? "---"}円</p>

      {/* オプション情報の場合 */}
      <p>
        セール情報:{" "}
        {product?.sale?.discount ?? "現在セール実施中ではありません"}
      </p>
    </div>
  );
}

この例で学んだこと

  1. API からデータを取得する際、最初は product が null です
  2. データ取得前にアクセスしようとすると、従来の書き方ではエラーになります
  3. ?. を使うことで、データが取得できるまでエラーを防げます
  4. ?? でローディング中や未設定時の表示を制御できます
  5. sale?.discount のように、オプションの情報も安全に扱えます

よくある間違い集

// ❌ 間違った使い方
const count = data?.count || 0; // data.count が 0 の時も 0 になってしまう！

// ✅ 正しい使い方
const count = data?.count ?? 0; // data.count が 0 なら 0 のまま

// ❌ 間違った使い方
const message = user?.messages?.latest || "メッセージなし"; // 空文字でもデフォルト値になる

// ✅ 正しい使い方
const message = user?.messages?.latest ?? "メッセージなし"; // null/undefined の時だけデフォルト値

使い所まとめ

オプショナルチェイニング（?.）

  • API からデータを取得して表示する時
  • ユーザーが入力した情報を表示する時
  • ネストされたオブジェクトにアクセスする時
  • 存在するか分からないプロパティにアクセスする時

Null 合体演算子（??）

  • デフォルト値を設定したい時
  • ローディング中の表示を制御したい時
  • 未設定時の表示を制御したい時
  • null/undefined の時だけ別の値を使いたい時

Discussion