TypeScriptの省略可能プロパティ「?」を正しく扱う：nullとの違いと型安全な実装方法

2026年5月22日

基本の型・変数宣言

TypeScriptを用いたアプリケーション開発において、オブジェクトの設計はコードの品質を左右する極めて重要な工程です。

プロパティを「必須」にするか「任意」にするかという判断は、プログラムの堅牢性と開発の柔軟性のバランスを保つ鍵となります。

その中で頻繁に活用されるのが、プロパティ名の末尾に付与する「?」という記法、すなわち省略可能プロパティです。

一見すると単純な仕組みに思えますが、実は undefined や null との関係性において、型安全性を損なう落とし穴が潜んでいます。

本記事では、2026年現在のモダンなTypeScript環境において、省略可能プロパティを真に正しく扱うためのテクニックを解説します。

「?」の挙動を深く理解し、意図しないバグを未然に防ぐ実装方法をマスターしていきましょう。

目次 [ close ]

省略可能プロパティの基本構造と役割

TypeScriptにおける省略可能プロパティは、オブジェクトを定義する際に、そのプロパティが存在しなくても型エラーにならないようにするための仕組みです。

インターフェースや型エイリアスの中で、プロパティ名の後ろに ? を付けることで宣言されます。

これにより、開発者は状況に応じて柔軟にオブジェクトを構築することが可能になります。

基本的な宣言方法

まずは、最も標準的な省略可能プロパティの記述例を確認してみましょう。

TypeScript

// ユーザー情報を定義するインターフェース
interface UserProfile {
  id: number;
  userName: string;
  // bio(自己紹介)は入力しなくても良いものとする
  bio?: string;
}

// bioがあるパターン
const userA: UserProfile = {
  id: 1,
  userName: "Alice",
  bio: "TypeScriptエンジニアです。"
};

// bioがないパターンも許容される
const userB: UserProfile = {
  id: 2,
  userName: "Bob"
};

この例では、bio プロパティが ? によって省略可能と定義されています。

そのため、userB のように bio を持たないオブジェクトも UserProfile 型として有効になります。

内部的な挙動としては、省略可能プロパティを指定した場合、その型は自動的に 「元の型 | undefined」 として扱われることになります。

「?」と undefined、null の決定的な違い

TypeScript初心者が混同しやすいポイントとして、省略可能プロパティ ? と、明示的な undefined や null の許容があります。

これらは一見似ていますが、「プロパティ自体が存在しないこと」と「値が空であること」を区別する という重要な意味を持っています。

「?」と「undefined」を許容するプロパティの違い

以下のコードを比較して、その違いを理解しましょう。

TypeScript

interface OptionType {
  optionalProp?: string;
}

interface UnionType {
  unionProp: string | undefined;
}

// OptionTypeの場合：キー自体を省略できる
const obj1: OptionType = {}; 

// UnionTypeの場合：キー自体を省略することはできない
const obj2: UnionType = {
  unionProp: undefined
};

// 以下のコードはエラーになる
// const obj3: UnionType = {};

OptionType では、キーそのものが存在しなくても問題ありません。

しかし、UnionType では、値が undefined であっても unionProp というキー自体はオブジェクトの中に存在していなければなりません。

この違いは、Object.keys() を使用した反復処理や、JSONとしてシリアライズする際の挙動に影響を与えます。

null との使い分け

null は「値が存在しない」という状態を意図的に代入する場合に使用します。

一方で ? (undefined) は、「そもそも情報が提供されていない」というニュアンスを含みます。

データベース上のデータで言えば、「未入力 (undefined)」と「明示的な削除 (null)」といった使い分けが必要になるケースが多いでしょう。

記法	キーの省略	意味合い
`prop?: string`	可能	情報の欠如・オプショナルな設定
`prop: string \| undefined`	不可	一時的な値の未確定
`prop: string \| null`	不可	値が空であるという明示的な意志表示

コンパイラオプション exactOptionalPropertyTypes の重要性

TypeScriptのバージョンアップに伴い、省略可能プロパティの扱いをより厳格にするオプションが登場しました。

それが exactOptionalPropertyTypes です。

デフォルトの設定では、? を付けたプロパティに対して、明示的に undefined を代入することが許可されています。

TypeScript

interface Test {
  name?: string;
}

const t: Test = { name: undefined }; // デフォルトではOK

しかし、この挙動は「プロパティが存在しない」ことと「プロパティの値が undefined である」ことを曖昧にします。

exactOptionalPropertyTypes を true に設定すると、省略可能プロパティに undefined を明示的に代入することが禁止されます。

TypeScript

// exactOptionalPropertyTypes: true の場合
const t: Test = { name: undefined }; // コンパイルエラー！

このオプションを有効にすることで、オブジェクトのプロパティ構造がより正確に管理され、実行時の予期せぬ挙動を減らすことができます。

2026年の開発スタンダードにおいては、このオプションを有効にすることが推奨されます。

型安全にアクセスするための実装パターン

省略可能プロパティにアクセスする際、値が undefined である可能性を常に考慮しなければなりません。

そのままプロパティを操作しようとすると、実行時にエラーが発生するリスクがあります。

オプショナルチェイニング (Optional Chaining)

最も一般的で安全なアクセス方法は、?. 演算子を使用することです。

TypeScript

const bioLength = userA.bio?.length;

userA.bio が存在しない場合、このコードはエラーを投げずに undefined を返します。

これにより、ネストされた深い階層のプロパティへのアクセスも簡潔に記述できます。

Null合体演算子 (Nullish Coalescing)

省略されている場合にデフォルト値を適用したいときは、?? 演算子を組み合わせます。

TypeScript

const bioText = userA.bio ?? "自己紹介はありません。";

userA.bio が null または undefined のときのみ、右辺の文字列が採用されます。

空文字 "" や 0 を有効な値として扱いたい場合に、論理和演算子 || よりも安全に使用できます。

分割代入とデフォルト値の設定

オブジェクトを分解して値を取り出す際に、デフォルト値を指定する方法も非常に有効です。

TypeScript

function displayProfile({ userName, bio = "未設定" }: UserProfile) {
  console.log(`${userName}: ${bio}`);
}

displayProfile({ id: 3, userName: "Charlie" });

実行結果

Charlie: 未設定

このように記述することで、関数内部では bio を string 型として安全に扱うことができます。

型ガードとしての役割も果たすため、積極的に活用すべきパターンです。

高度な型操作によるプロパティの制御

TypeScriptには、既存の型から省略可能性を操作するためのユーティリティ型が用意されています。

これらを知っておくことで、DRY (Don’t Repeat Yourself) な型定義が可能になります。

Partial<T> と Required<T>

Partial<T> は、指定した型のすべてのプロパティを省略可能にします。

一方、Required<T> は、すべてのプロパティを必須に変更します。

TypeScript

interface Article {
  title: string;
  content: string;
  tag?: string;
}

// すべてのプロパティを任意にする (更新用データの定義などに便利)
const updateData: Partial<Article> = {
  title: "新しいタイトル"
};

// すべてのプロパティを必須にする
// tagも必須として扱われる
const completeArticle: Required<Article> = {
  title: "必須タイトル",
  content: "必須コンテンツ",
  tag: "TypeScript"
};

APIのリクエストボディや、バリデーション済みのオブジェクトを扱う際に非常に役立ちます。

Mapped Types を使ったカスタマイズ

さらに詳細な制御が必要な場合は、Mapped Typesを使用してプロパティから ? を除去したり、追加したりできます。

TypeScript

// 特定のプロパティから ? を削除する独自ユーティリティ
type NoOptional<T> = {
  [P in keyof T]-?: T[P];
};

-? という記法を用いることで、そのプロパティが持っていた省略可能性を明示的に剥がすことができます。

これは複雑なライブラリ開発や、厳格な型変換が必要なシーンで重宝されます。

省略可能プロパティを使用すべきかどうかの判断基準

設計において、安易に ? を多用することは避けるべきです。

「本当に省略されるべきなのか」を自問自答することが大切です。

? を使うべきケース

設定オブジェクト (Config) のように、多くの項目にデフォルト値が存在する場合。
APIのレスポンスで、権限によって返却されないフィールドがある場合。
フォーム入力において、必須項目ではない自由記述欄を扱う場合。

? を避けるべきケース

ビジネスロジックの根幹に関わる重要なデータ。
関数内で必ず参照されるべきプロパティ。
「未定義」ではなく「未選択」という状態を明確に保持したい場合。

もし、あるプロパティが存在しないときに別のプロパティも存在しないといった「依存関係」があるなら、省略可能プロパティよりも 「判別可能な共用体 (Discriminated Unions)」 を検討してください。

TypeScript

// 良くない例：どちらかが欠ける可能性がある
interface Status {
  isSuccess: boolean;
  data?: string;
  error?: string;
}

// 良い例：状態に応じて型を分ける
type Result = 
  | { status: "success"; data: string }
  | { status: "error"; error: string };

後者の方が、status をチェックするだけで後続のプロパティの存在が保証されるため、型安全性が劇的に向上します。