TypeScript：オプショナルとnull安全

出力 == 田中

email?: string と書く。省略してもエラーにならない。

type User = {
  id: number;
  name: string;
  email?: string;
};

const user: User = { id: 1, name: "田中" };

console.log(user.name);

? を付けた項目は書かなくてよい。TS07までは全項目が必須だったので、「まだ登録されていない情報」を表現できなかった。

解答 == B

省略された場合、その値は何になるか。

B

省略可能な項目は undefined との union になる。だからそのままメソッドを呼ぶとエラーになる。

出力 == undefined

user.email?.toUpperCase() と書く。?. を使えばエラーにならない。

type User = {
  id: number;
  name: string;
  email?: string;
};

const user: User = { id: 1, name: "田中" };

console.log(user.email?.toUpperCase());

?. は「無ければそこで止まる」。JavaScriptなら Cannot read properties of undefined で落ちていた場面が、静かに undefined を返す。

const email: string | undefined = undefined;

console.log(email ____ "未登録");

出力 == 未登録

null と undefined のときだけ右側を返す演算子。疑問符2つ。

??

?? は null 合体演算子。|| と違い、0 や空文字を「値あり」として扱ってくれる。

解答 == B

0 は真偽値としては偽と扱われる（JS03）。

B

これが || の罠。在庫0個や金額0円が「未設定」と誤判定される。既定値を指定するなら ?? を使う。

出力2行。未登録 / a@b.com

?? で既定値を指定する。for...of で2件を回してもよい。

type User = {
  id: number;
  name: string;
  email?: string;
};

const users: User[] = [
  { id: 1, name: "田中" },
  { id: 2, name: "鈴木", email: "a@b.com" },
];

for (const user of users) {
  console.log(user.email ?? "未登録");
}

?? を使えば1行で安全に書ける。if で分岐する必要がなく、意図も明確になる。

type Company = { name: string; address?: { city: string } };

const c: Company = { name: "A社" };

console.log(c.address____.city ?? "住所未登録");

出力 == 住所未登録

「無ければ止まる」を意味する記号。疑問符とピリオド。

?

?. は途中で止まって undefined を返す。address が無い時点で処理が止まるので、その先の city にアクセスしようとしてエラーになることがない。

解答 == B

オプショナルチェーンは途中で止まる。

B

どこで止まっても結果は undefined。深い入れ子でも、1つの ?? で既定値を指定できる。

出力 == 在庫：0個

stock?: number とし、stock ?? 0 で既定値を指定する。|| だと 0 が既定値に置き換わってしまう。

type Product = {
  name: string;
  stock?: number;
};

const item: Product = { name: "サンプル品", stock: 0 };

console.log(`在庫：${item.stock ?? 0}個`);

もし || を使うと、在庫0が「未設定」と同じ扱いになる。0という正しい値を潰さないために ?? が必要になる。

出力 == ハンドラなし

handler.onClick?.() と書くと、関数が無ければ呼び出さずに undefined を返す。

type Handler = {
  onClick?: () => string;
};

const handler: Handler = {};

console.log(handler.onClick?.() ?? "ハンドラなし");

関数の呼び出しにも ?. が使える。?.() と書くと「あれば呼ぶ」という意味になり、コールバックが任意の場面で役立つ。

出力3行が完全一致

?? で「未登録」を既定値にする。

type User = {
  id: number;
  name: string;
  email?: string;
  phone?: string;
};

const users: User[] = [
  { id: 1, name: "田中", email: "a@b.com" },
  { id: 2, name: "鈴木", phone: "090-1111-2222" },
  { id: 3, name: "佐藤" },
];

for (const u of users) {
  console.log(`${u.name}：${u.email ?? "未登録"} / ${u.phone ?? "未登録"}`);
}

任意項目が複数あっても、書き方は同じ。実務のユーザー情報は必須項目のほうが少ないので、この形が標準になる。

出力3行が完全一致

address が無い場合と、address はあるが zip が無い場合を区別する。

type Company = {
  name: string;
  address?: {
    city: string;
    zip?: string;
  };
};

const companies: Company[] = [
  { name: "A社" },
  { name: "B社", address: { city: "東京" } },
  { name: "C社", address: { city: "大阪", zip: "530-0001" } },
];

for (const c of companies) {
  if (!c.address) {
    console.log(`${c.name}：住所未登録`);
    continue;
  }
  console.log(`${c.name}：${c.address.city}（〒${c.address.zip ?? "未登録"}）`);
}

if で address の有無を確認した後は、TypeScript が address を「必ずある」と理解する。だから c.address.city と ?. 無しで書ける——これが型の絞り込み（TS09で詳しく扱う）。

出力2行が完全一致

stock?: number に 0 を入れ、それぞれの演算子で既定値「未設定」を指定してみる。

type Product = {
  name: string;
  stock?: number;
};

const item: Product = { name: "サンプル品", stock: 0 };

console.log(`|| の結果：${item.stock || "未設定"}`);
console.log(`?? の結果：${item.stock ?? "未設定"}`);

同じ 0 という値が、演算子によって別の意味になる。「在庫0個」と「在庫が未登録」はまったく違う状態なので、?? で区別する必要がある。

出力 == 合計：5,940円

各項目を ?? で既定値に置き換えてから計算する。4800 + 600 = 5400、税込 5940。

type Config = {
  taxRate?: number;
  shippingFee?: number;
  freeShippingThreshold?: number;
};

const config: Config = {};

const taxRate = config.taxRate ?? 0.1;
const shippingFee = config.shippingFee ?? 600;
const threshold = config.freeShippingThreshold ?? 5000;

const price = 4800;
const shipping = price >= threshold ? 0 : shippingFee;
const total = Math.round((price + shipping) * (1 + taxRate));

console.log(`合計：${total.toLocaleString()}円`);

設定は「省略されたら既定値」が基本。すべての項目を必須にすると、使う側が毎回全部書く必要があり不便になる。?? で既定値を用意しておけば、必要な項目だけ上書きできる。

出力2行。ノートPC：128,000円 / 該当なし：0円

find の結果は undefined になりうる。?. と ?? を組み合わせて安全に取り出す。

type Product = {
  id: number;
  name: string;
  price: number;
};

const products: Product[] = [
  { id: 1, name: "ノートPC", price: 128000 },
];

for (const id of [1, 99]) {
  const found = products.find((p) => p.id === id);

  const name = found?.name ?? "該当なし";
  const price = found?.price ?? 0;

  console.log(`${name}：${price.toLocaleString()}円`);
}

TS03の仕上げ課題を、三項演算子なしで書けた。?. と ?? の組み合わせは、「無いかもしれない値」を扱う最も簡潔な方法になる。