TypeScriptでユニオン型を安全に絞り込むユーザー定義型ガードの使い方

TypeScriptでは、ユニオン型を使うことで、複数の型を1つにまとめることができます。これは、柔軟なコードを書くために非常に便利ですが、一方で型が曖昧になることから、コードの安全性や予測可能性が損なわれるリスクがあります。このリスクを回避するために「型ガード」を使用するのが一般的です。特に、ユーザー定義型ガードを用いることで、独自の条件に基づいて型を正確に絞り込み、エラーを防ぐことが可能です。

本記事では、TypeScriptのユニオン型に対して、どのようにユーザー定義型ガードを適用し、型を絞り込むのか、その基本から実践までを詳しく解説します。これにより、TypeScriptの型安全性を維持しながら柔軟なプログラムを作成するスキルを習得できるでしょう。

ユニオン型とは

TypeScriptにおけるユニオン型とは、複数の型を1つの変数やパラメータに持たせることができる型のことです。これにより、1つの変数に異なる型の値を代入でき、柔軟なコードを記述できるメリットがあります。ユニオン型は、パイプ（|）を使って定義され、次のように書かれます。

let value: string | number;

この例では、valueには文字列(string)もしくは数値(number)のどちらかが代入可能です。これにより、1つの変数で複数の型に対応することができますが、型が曖昧になるため、その後の処理でエラーが発生する可能性もあります。

ユニオン型の大きな利点は、コードの柔軟性と再利用性を高める点にあります。しかし、ユニオン型を使用する際には、各型に応じた処理を正しく行う必要があり、それを実現するために「型ガード」が役立ちます。次のセクションでは、型ガードの役割とその重要性について説明します。

型ガードの重要性

ユニオン型を使用すると、複数の型を1つの変数で扱えるため、コードの柔軟性が向上しますが、同時に問題も生じます。それは、どの型の値が実際に使われているかを確定できない場合があることです。このような不確定性を解消し、プログラムの安全性と予測可能性を確保するために「型ガード」が必要になります。

型ガードとは、プログラムの実行時に変数が特定の型であることを確認し、その型に応じた処理を行うための手法です。型ガードを使用すると、次のような重要なメリットがあります。

型の安全性を確保する

型ガードを使うことで、実行時に変数の型を確定し、それに基づいた処理を行うことができます。これにより、型の不整合によるエラーを防ぎ、コードの信頼性を向上させます。

予測可能な挙動を実現する

ユニオン型では異なる型に対して異なる処理を行う必要があるため、型ガードを使用することで、その型ごとに適切な処理が行われるように制御できます。これにより、予期しない動作を回避できます。

開発者が意図した通りに動作させる

型ガードは、開発者が意図する処理を確実に実行するために不可欠です。例えば、ある値が文字列の場合には文字列特有のメソッドを適用し、数値の場合には計算を行う、といった処理を正確に実現するために型ガードが必要です。

型ガードの基本的な実装方法としては、typeofやinstanceofを使ったシンプルなものから、次に説明する「ユーザー定義型ガード」まで幅広い手法があります。ユーザー定義型ガードを使うことで、さらに柔軟な型チェックが可能になります。次のセクションでは、その具体的な方法を解説します。

ユーザー定義型ガードとは

ユーザー定義型ガードとは、TypeScriptにおいて開発者が独自に定義できる型の判定ロジックのことです。これにより、単にtypeofやinstanceofといった標準の型ガードでは判定できない複雑な条件に基づいて、ユニオン型の絞り込みを行うことが可能になります。

通常の型ガードでは、TypeScriptが提供する既存のチェック機能で型を判定しますが、ユーザー定義型ガードでは、特定の型に基づいた独自の判定を行うためのカスタムロジックを実装できます。これにより、型の安全性を保ちながら、柔軟かつ精度の高い型チェックが可能となります。

ユーザー定義型ガードの基本構文は、isキーワードを使って以下のように定義します。

function isString(value: any): value is string {
  return typeof value === 'string';
}

この関数は、valueが文字列型であるかをチェックし、その結果に基づいて型を絞り込むための型ガードとして機能します。関数の戻り値としてvalue is stringという形式を使用することで、TypeScriptに対して、この関数が特定の型を判定する型ガードであることを明示しています。

ユーザー定義型ガードの活用シーン

ユーザー定義型ガードは、特定のオブジェクトが複雑な構造を持つ場合や、標準的な型ガードでは対応できない条件で型を判定する必要がある場合に特に役立ちます。例えば、次のように、オブジェクトが特定のプロパティを持っているかどうかを判定する型ガードを作成できます。

interface Cat {
  meow: () => void;
}

interface Dog {
  bark: () => void;
}

function isCat(animal: Cat | Dog): animal is Cat {
  return (animal as Cat).meow !== undefined;
}

この例では、isCatという関数を使って、CatかDogのユニオン型からCat型を絞り込んでいます。このように、ユーザー定義型ガードを使えば、複雑な条件に基づいた型の絞り込みが可能になります。

次のセクションでは、isキーワードを使った具体的な実装方法についてさらに詳しく解説していきます。

`is`を用いた型ガードの実装方法

TypeScriptのユーザー定義型ガードでは、isキーワードを使うことで、関数が特定の型に該当するかどうかを判定し、ユニオン型から型を絞り込むことができます。この手法を用いると、複雑な型の条件に応じて、動的に型をチェックしながら、安全に型を扱うことができます。

`is`キーワードを使った基本的な型ガード

まず、isキーワードを使ったシンプルな型ガードの例を紹介します。以下のコードでは、引数valueが文字列型であるかどうかを判定する型ガード関数を定義しています。

function isString(value: any): value is string {
  return typeof value === 'string';
}

この関数では、valueの型を判定し、value is stringという形式で型ガードを返しています。これにより、TypeScriptはこの関数が実行されると、valueが文字列型であると認識します。

この型ガード関数を利用すると、次のように型を絞り込むことができます。

function printValue(value: string | number) {
  if (isString(value)) {
    console.log(`文字列です: ${value.toUpperCase()}`);
  } else {
    console.log(`数値です: ${value.toFixed(2)}`);
  }
}

このコードでは、isString関数を使ってvalueが文字列か数値かを判定し、それぞれの型に応じた処理を行っています。このように、isを使った型ガードは、ユニオン型を安全に絞り込み、型特有のメソッドを利用する場面で非常に有用です。

複雑なオブジェクトに対する`is`型ガード

次に、複雑なオブジェクトに対してis型ガードを実装する例を見てみましょう。例えば、CatとDogという2つの異なるインターフェースを持つオブジェクトをユニオン型で扱う場合、それぞれの型を判定して安全に絞り込むことができます。

interface Cat {
  meow: () => void;
}

interface Dog {
  bark: () => void;
}

function isCat(animal: Cat | Dog): animal is Cat {
  return (animal as Cat).meow !== undefined;
}

このisCat関数は、animalがCat型であるかどうかを判定する型ガードです。meowというプロパティが存在するかどうかをチェックし、animal is Catという形で型を絞り込みます。

この型ガードを使って、ユニオン型から安全に型を絞り込むことが可能です。

function handleAnimal(animal: Cat | Dog) {
  if (isCat(animal)) {
    animal.meow();
  } else {
    animal.bark();
  }
}

この例では、isCatを使って、animalがCat型である場合にmeowメソッドを実行し、そうでない場合にはbarkメソッドを実行しています。これにより、ユニオン型のオブジェクトに対して正確な型チェックを行い、型に応じた処理を安全に実行できます。

次のセクションでは、さらに型ガードを使った実践的なユースケースを紹介し、型の絞り込みをどう活用するかを深掘りします。

型ガードの使い方：基本的な例

ユーザー定義型ガードを利用することで、ユニオン型に対して正確な型判定ができ、型ごとの適切な処理を行えるようになります。ここでは、型ガードの基本的な使い方をシンプルな例で解説します。

文字列と数値の判定例

ユニオン型を扱う典型的な例として、文字列と数値が混在する状況を考えます。以下のコードでは、string | number型の引数に対して、型ガードを用いて型を絞り込み、それぞれの型に応じた処理を行います。

function isString(value: any): value is string {
  return typeof value === 'string';
}

function processValue(value: string | number) {
  if (isString(value)) {
    console.log(`これは文字列です: ${value.toUpperCase()}`);
  } else {
    console.log(`これは数値です: ${value.toFixed(2)}`);
  }
}

この例では、isString関数を使ってvalueが文字列型であるかを判定し、文字列の場合は大文字に変換する処理、数値の場合は小数点以下を2桁にフォーマットする処理を行っています。

このように、ユーザー定義型ガードは、型を安全に絞り込むことで、各型に応じた処理を実行できるため、コードの可読性と安全性が向上します。

オブジェクト型の判定例

次に、異なる型のオブジェクトが含まれるユニオン型を扱う例を見てみましょう。例えば、CatとDogという2つのオブジェクト型を持つユニオン型に対して、ユーザー定義型ガードを使って正しい型を判定し、それぞれのメソッドを呼び出すことができます。

interface Cat {
  meow: () => void;
}

interface Dog {
  bark: () => void;
}

function isCat(animal: Cat | Dog): animal is Cat {
  return (animal as Cat).meow !== undefined;
}

function handleAnimal(animal: Cat | Dog) {
  if (isCat(animal)) {
    animal.meow(); // Cat型であることが判定されたので安全に呼び出せる
  } else {
    animal.bark(); // Dog型であることが判定されたので安全に呼び出せる
  }
}

この例では、isCatという型ガード関数を定義し、animalがCat型かどうかを判定しています。meowメソッドが存在すればCat型と判定され、それに応じたメソッドを安全に呼び出せます。型が判定された後、TypeScriptはその型に特有のメソッドが存在することを確信できるため、コンパイル時にエラーが発生することを防げます。

基本的な例でのまとめ

型ガードを使うことで、ユニオン型に含まれる型の判定を行い、型ごとに適切な処理を行えるようになります。シンプルなtypeofを用いた型判定から、独自の判定条件を定義したユーザー定義型ガードまで、さまざまな方法で型の安全性を確保することが可能です。

次のセクションでは、さらに複雑なユニオン型の絞り込みを行う応用的な型ガードの使い方を紹介します。

型ガードの応用：複雑なユニオン型の絞り込み

基本的な型ガードを使えば、string | numberのようなシンプルなユニオン型に対して型を絞り込むことができますが、現実の開発では、さらに複雑なユニオン型を扱うこともあります。ここでは、より高度なユニオン型を扱う際の型ガードの応用方法を解説します。

複数のプロパティを持つオブジェクトの型ガード

複雑なオブジェクト型を含むユニオン型では、単にtypeofやinstanceofでは判定できない場合があります。このような場合、オブジェクトが持つ複数のプロパティをチェックすることで、正しい型を判定する型ガードを作成できます。

次の例では、Admin、User、Guestという3つの異なるオブジェクト型が存在するユニオン型を、型ガードを使って絞り込んでいます。

interface Admin {
  role: 'admin';
  permissions: string[];
}

interface User {
  role: 'user';
  username: string;
}

interface Guest {
  role: 'guest';
}

type Person = Admin | User | Guest;

function isAdmin(person: Person): person is Admin {
  return person.role === 'admin' && 'permissions' in person;
}

function isUser(person: Person): person is User {
  return person.role === 'user' && 'username' in person;
}

function handlePerson(person: Person) {
  if (isAdmin(person)) {
    console.log(`管理者権限を持つ: ${person.permissions.join(', ')}`);
  } else if (isUser(person)) {
    console.log(`ユーザー名: ${person.username}`);
  } else {
    console.log(`ゲストとしてアクセス中`);
  }
}

この例では、Person型に対して、isAdminやisUserという型ガード関数を使ってそれぞれのオブジェクト型を判定しています。roleというプロパティと、追加のプロパティ（permissionsやusername）を条件にして型を正確に絞り込むことができます。

ネストされたオブジェクトに対する型ガード

さらに、ネストされたオブジェクトを持つユニオン型でも型ガードを適用できます。次の例では、Shapeというインターフェースに対して、CircleやRectangleなどのネストされた型を判定する型ガードを作成しています。

interface Circle {
  kind: 'circle';
  radius: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

type Shape = Circle | Rectangle;

function isCircle(shape: Shape): shape is Circle {
  return shape.kind === 'circle';
}

function isRectangle(shape: Shape): shape is Rectangle {
  return shape.kind === 'rectangle';
}

function calculateArea(shape: Shape) {
  if (isCircle(shape)) {
    return Math.PI * shape.radius ** 2;
  } else if (isRectangle(shape)) {
    return shape.width * shape.height;
  }
}

この例では、Shapeというユニオン型に対して、kindプロパティを使って型を判定し、それぞれの図形の面積を計算しています。ネストされたオブジェクトの構造に応じて、型ガードを適用し、型を絞り込んでいることがわかります。

型ガードを複数条件で使う

さらに、複数の条件を組み合わせて型を絞り込むことも可能です。次の例では、ユニオン型に含まれるオブジェクトが、複数の条件を満たすかどうかで型を判定しています。

interface Car {
  type: 'car';
  doors: number;
}

interface Bike {
  type: 'bike';
  gears: number;
}

type Vehicle = Car | Bike;

function isCar(vehicle: Vehicle): vehicle is Car {
  return vehicle.type === 'car' && 'doors' in vehicle;
}

function isBike(vehicle: Vehicle): vehicle is Bike {
  return vehicle.type === 'bike' && 'gears' in vehicle;
}

function describeVehicle(vehicle: Vehicle) {
  if (isCar(vehicle)) {
    console.log(`これは${vehicle.doors}ドアの車です`);
  } else if (isBike(vehicle)) {
    console.log(`これは${vehicle.gears}速の自転車です`);
  }
}

この例では、Car型とBike型の2つの条件を組み合わせて判定する型ガードを定義しています。複数のプロパティに基づいて型を判定することで、ユニオン型をより詳細に絞り込むことができます。

まとめ

複雑なユニオン型に対しても、型ガードを応用することで、正確に型を絞り込み、型特有の処理を安全に実行できるようになります。オブジェクトのプロパティや構造に応じて、カスタムの型ガードを作成し、複数の型が混在する場面でも柔軟に対応できるのが、TypeScriptの強みです。

次のセクションでは、既存の型ガードとユーザー定義型ガードの違いについて詳しく解説します。

既存型ガードとユーザー定義型ガードの違い

TypeScriptでは、型を絞り込むためのさまざまな型ガードが用意されています。標準的な型ガードとしては、typeofやinstanceofなどがあり、これらは簡単な型の判定には十分に機能します。しかし、複雑な型やユニオン型に対しては、ユーザー定義型ガードが役立ちます。このセクションでは、既存の型ガードとユーザー定義型ガードの違いを比較し、それぞれの適用場面について解説します。

既存型ガードの特徴

TypeScriptには、いくつかの標準的な型ガードがあります。これらは非常にシンプルで、基本的な型の判定を行うのに適しています。

• typeof: プリミティブ型（string、number、booleanなど）を判定するために使用されます。

  let value: string | number;
  if (typeof value === 'string') {
    console.log(value.toUpperCase()); // 文字列として処理
  } else {
    console.log(value.toFixed(2)); // 数値として処理
  }

• instanceof: オブジェクトが特定のクラスやコンストラクタのインスタンスかどうかを判定します。

  class Dog {
    bark() { console.log('ワンワン'); }
  }

  class Cat {
    meow() { console.log('ニャー'); }
  }

  let pet: Dog | Cat = new Dog();
  if (pet instanceof Dog) {
    pet.bark(); // Dog型として処理
  } else {
    pet.meow(); // Cat型として処理
  }

既存の型ガードは、プリミティブ型やクラスインスタンスの判定において非常に便利で、短く簡潔なコードが書けます。しかし、オブジェクトリテラルや複雑な構造を持つオブジェクトには限界があります。

ユーザー定義型ガードの特徴

ユーザー定義型ガードは、isキーワードを使って独自に定義される型ガードです。標準の型ガードでは対応しきれない複雑なユニオン型やオブジェクト構造に対して、詳細な型判定が可能です。

• 複雑な条件を使った型判定が可能
  ユーザー定義型ガードは、オブジェクトのプロパティや条件に基づいて型を判定するため、カスタムロジックを自由に組み込むことができます。

  interface Bird {
    fly: () => void;
    wingspan: number;
  }

  interface Fish {
    swim: () => void;
    fins: number;
  }

  type Animal = Bird | Fish;

  function isBird(animal: Animal): animal is Bird {
    return 'fly' in animal && animal.wingspan !== undefined;
  }

  function handleAnimal(animal: Animal) {
    if (isBird(animal)) {
      animal.fly();
    } else {
      animal.swim();
    }
  }

• 型の明示的な絞り込み
  value is Typeの形式で戻り値を記述することで、TypeScriptに対してその関数が型ガードとして機能することを明示します。これにより、関数内で特定の型に絞り込んだ処理を行うことが保証されます。
• オブジェクトのネストにも対応
  ユーザー定義型ガードは、複数の条件やプロパティを基にした判定が可能なため、ネストされたオブジェクトや高度なユニオン型の絞り込みに対応できます。

既存型ガードとユーザー定義型ガードの使い分け

• 既存型ガードを使うべき場面
  プリミティブ型（string、number、booleanなど）やクラスインスタンスの判定では、typeofやinstanceofがシンプルで効率的です。これらはコードが短く、パフォーマンスも良いため、特別な理由がない限り積極的に利用すべきです。
• ユーザー定義型ガードを使うべき場面
  複数のオブジェクト型が混在するユニオン型や、オブジェクトのプロパティに基づいた判定が必要な場合は、ユーザー定義型ガードが強力です。また、特定の条件に基づいてカスタマイズされた判定を行いたい場合にも適しています。

まとめ

既存の型ガード（typeofやinstanceof）は、シンプルな型チェックには最適ですが、複雑なユニオン型やオブジェクトに対しては、ユーザー定義型ガードが必要不可欠です。ユーザー定義型ガードを使えば、開発者はカスタムロジックに基づいて柔軟な型判定を行い、安全なコードを実現できます。次のセクションでは、ユーザー定義型ガードを活用するためのベストプラクティスについて解説します。

型ガードのベストプラクティス

ユーザー定義型ガードは、TypeScriptにおいてユニオン型を安全に絞り込むための非常に強力な手法です。しかし、適切に使わないとコードが複雑になり、可読性やメンテナンス性が低下する可能性があります。このセクションでは、型ガードを効率的に活用するためのベストプラクティスを紹介します。

1. 明確で直感的な関数名を付ける

ユーザー定義型ガードの関数は、型を判定することが明確にわかる名前を付けることが重要です。関数名には通常、「is」や「has」を使って、何を判定するのかが一目で分かるようにします。これにより、コードの可読性が向上し、他の開発者もすぐに意図を理解できます。

function isBird(animal: Animal): animal is Bird {
  return 'fly' in animal;
}

function hasWings(animal: Animal): animal is Bird {
  return (animal as Bird).wingspan !== undefined;
}

これにより、関数名だけで型ガードが何をチェックしているかが分かりやすくなります。

2. 冗長な条件は避ける

型ガードは、シンプルに設計することが大切です。必要以上に複雑な条件を持たせると、メンテナンスが難しくなります。可能な限り、最小限の条件で型を判定し、他の部分は信頼できる基礎的な条件に依存するようにしましょう。

function isAdmin(person: Person): person is Admin {
  return person.role === 'admin'; // シンプルな判定
}

不要なプロパティチェックや条件を避け、簡潔に型を判定することが推奨されます。

3. 型ガードは一貫性を持って使用する

一度定義した型ガードは、コード全体で一貫して使用することが重要です。既存の型ガード関数を活用することで、同じ判定ロジックが複数箇所に重複するのを防ぎ、コードが統一的で保守しやすくなります。

function isUser(person: Person): person is User {
  return person.role === 'user' && 'username' in person;
}

// 他の場所でも同じ型ガードを使う
if (isUser(currentPerson)) {
  console.log(currentPerson.username);
}

4. `in`演算子や`typeof`を積極的に活用する

ユーザー定義型ガードでは、in演算子やtypeofなどの標準的な型チェック手法を積極的に活用するのが一般的です。これにより、無駄な型キャストやany型の使用を避け、安全に型を判定できます。

function isRectangle(shape: Shape): shape is Rectangle {
  return 'width' in shape && 'height' in shape;
}

プロパティの存在を確認することで、安全に型の絞り込みが可能です。

5. ネストした型ガードは避ける

型ガードを複雑にネストさせると、可読性が下がり、意図を把握するのが難しくなります。必要であれば、複数のシンプルな型ガードに分割するか、ロジックを整理して、読みやすく保つことが重要です。

// 悪い例: ネストが深くなる
if (isAdmin(person)) {
  if (hasPermissions(person)) {
    if (isSuperUser(person)) {
      // ...
    }
  }
}

// 良い例: ロジックを整理してシンプルに
function isSuperAdmin(person: Person): boolean {
  return isAdmin(person) && hasPermissions(person) && isSuperUser(person);
}

このように整理することで、複雑な条件でもスッキリと書くことができます。

6. 型ガードのテストを行う

型ガードも通常の関数と同様にテストを行い、期待した動作をするかどうかを確認することが重要です。型ガードはアプリケーションの安全性に関わるため、しっかりとテストを行い、意図したとおりに型を絞り込めることを保証する必要があります。

describe('isUser', () => {
  it('should return true for a user object', () => {
    const user = { role: 'user', username: 'JohnDoe' };
    expect(isUser(user)).toBe(true);
  });

  it('should return false for an admin object', () => {
    const admin = { role: 'admin', permissions: ['manage'] };
    expect(isUser(admin)).toBe(false);
  });
});

このようにテストを行うことで、型ガードが適切に機能しているか確認できます。

まとめ

型ガードを適切に活用するためには、明確でシンプルな設計、一貫した使用、そしてテストが重要です。ユーザー定義型ガードはTypeScriptの柔軟性を高める強力なツールですが、複雑化しすぎないように注意し、メンテナンス性を保ちながら安全に型を扱うように心掛けましょう。次のセクションでは、実際のプロジェクトにおける型ガードのユースケースを紹介します。

実践的なユースケース

TypeScriptにおけるユーザー定義型ガードは、特に複雑なユニオン型やオブジェクトを扱う際に大きな効果を発揮します。ここでは、実際のプロジェクトで型ガードをどのように利用できるか、いくつかの実践的なユースケースを紹介します。

ユースケース1: APIレスポンスの型チェック

フロントエンド開発において、APIから取得したデータが常に期待通りの形式であるとは限りません。特に外部APIを利用する場合、レスポンスが異なる形式で返ってくることがあります。このような場合に型ガードを用いることで、データの安全性を確保できます。

たとえば、次のようなAPIからのレスポンスがあるとします。

interface UserResponse {
  id: number;
  name: string;
  email?: string; // オプショナルなフィールド
}

interface ErrorResponse {
  errorCode: number;
  message: string;
}

type ApiResponse = UserResponse | ErrorResponse;

function isUserResponse(response: ApiResponse): response is UserResponse {
  return (response as UserResponse).id !== undefined && typeof (response as UserResponse).name === 'string';
}

function handleApiResponse(response: ApiResponse) {
  if (isUserResponse(response)) {
    console.log(`ユーザー名: ${response.name}`);
    if (response.email) {
      console.log(`メールアドレス: ${response.email}`);
    } else {
      console.log('メールアドレスが未設定です');
    }
  } else {
    console.error(`エラー発生: ${response.message}`);
  }
}

この例では、ApiResponseというユニオン型に対して、ユーザー定義型ガードisUserResponseを使い、レスポンスがUserResponseであるかを判定しています。APIのレスポンスが不確定な場合でも、型ガードを使うことで安全に処理を行うことが可能です。

ユースケース2: フォームデータの型判定

次に、Webフォームの入力データを処理する場合を考えてみましょう。ユーザーがさまざまな種類のデータを入力できるフォームに対して、正しい型かどうかを判定し、適切な処理を行う必要があります。

例えば、次のようなフォームがあるとします。

interface TextInput {
  type: 'text';
  value: string;
}

interface NumberInput {
  type: 'number';
  value: number;
}

interface CheckboxInput {
  type: 'checkbox';
  checked: boolean;
}

type FormInput = TextInput | NumberInput | CheckboxInput;

function isTextInput(input: FormInput): input is TextInput {
  return input.type === 'text';
}

function isNumberInput(input: FormInput): input is NumberInput {
  return input.type === 'number';
}

function isCheckboxInput(input: FormInput): input is CheckboxInput {
  return input.type === 'checkbox';
}

function handleFormInput(input: FormInput) {
  if (isTextInput(input)) {
    console.log(`テキスト入力: ${input.value}`);
  } else if (isNumberInput(input)) {
    console.log(`数値入力: ${input.value}`);
  } else if (isCheckboxInput(input)) {
    console.log(`チェックボックス: ${input.checked ? 'オン' : 'オフ'}`);
  }
}

この例では、フォームの入力データFormInputが複数の型で構成されています。それぞれの入力タイプに対して型ガードを定義し、ユーザーの入力に応じた適切な処理を実行しています。これにより、異なる入力タイプに対しても安全に処理を行うことができます。

ユースケース3: 複雑なコンポーネントの型チェック

Reactなどのフロントエンドフレームワークを使用する場合、異なるプロパティを持つコンポーネントに対して、型ガードを使うことで柔軟に対応できます。たとえば、次のように異なるプロパティを持つコンポーネントがある場合です。

interface ButtonProps {
  label: string;
  onClick: () => void;
}

interface LinkProps {
  href: string;
  label: string;
}

type ComponentProps = ButtonProps | LinkProps;

function isButtonProps(props: ComponentProps): props is ButtonProps {
  return (props as ButtonProps).onClick !== undefined;
}

function isLinkProps(props: ComponentProps): props is LinkProps {
  return (props as LinkProps).href !== undefined;
}

function renderComponent(props: ComponentProps) {
  if (isButtonProps(props)) {
    return <button onClick={props.onClick}>{props.label}</button>;
  } else if (isLinkProps(props)) {
    return <a href={props.href}>{props.label}</a>;
  }
}

この例では、ComponentPropsというユニオン型を使って、ボタンとリンクという異なるコンポーネントに対して型ガードを適用し、それぞれに適したレンダリングを行っています。コンポーネントのプロパティが異なる場合でも、型ガードを使えば安全に処理できます。

まとめ

実践的なユースケースとして、APIレスポンスの型チェック、フォーム入力の判定、複雑なコンポーネントの型チェックなどが挙げられます。ユーザー定義型ガードを活用することで、現実の開発において複雑なユニオン型を安全に扱い、正確に型を絞り込むことが可能です。次のセクションでは、演習問題を通じてこれらの技術をさらに深めていきます。

演習問題：ユニオン型の絞り込み

ここまでのセクションで、TypeScriptのユーザー定義型ガードを使ってユニオン型を絞り込む方法について解説しました。次に、この技術を実践的に応用するための演習問題を提供します。これらの問題を通じて、ユニオン型や型ガードの使い方をより深く理解し、実際のプロジェクトでの活用方法を身につけてください。

演習問題 1: Shapeオブジェクトの判定

次のようなShapeインターフェースがあります。それぞれの図形に対応する型ガードを作成し、面積を計算する関数calculateAreaを実装してください。

interface Circle {
  kind: 'circle';
  radius: number;
}

interface Square {
  kind: 'square';
  sideLength: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

type Shape = Circle | Square | Rectangle;

タスク

• isCircle、isSquare、isRectangleという3つの型ガードを作成してください。
• 各型に応じた面積を計算するcalculateArea関数を実装してください。

function isCircle(shape: Shape): shape is Circle {
  // 実装してください
}

function isSquare(shape: Shape): shape is Square {
  // 実装してください
}

function isRectangle(shape: Shape): shape is Rectangle {
  // 実装してください
}

function calculateArea(shape: Shape): number {
  if (isCircle(shape)) {
    return Math.PI * shape.radius ** 2;
  } else if (isSquare(shape)) {
    return shape.sideLength ** 2;
  } else if (isRectangle(shape)) {
    return shape.width * shape.height;
  }
  throw new Error('Unknown shape');
}

演習問題 2: APIレスポンスの型判定

次に、APIレスポンスの型を判定する型ガードを作成してください。APIからは、UserResponseもしくはErrorResponseが返されます。

interface UserResponse {
  id: number;
  username: string;
}

interface ErrorResponse {
  errorCode: number;
  message: string;
}

type ApiResponse = UserResponse | ErrorResponse;

タスク

• isUserResponse型ガードを作成し、ApiResponseがUserResponseであるかどうかを判定してください。
• APIのレスポンスを処理する関数handleApiResponseを実装し、UserResponseの場合にはユーザー名を表示し、ErrorResponseの場合にはエラーメッセージを表示してください。

function isUserResponse(response: ApiResponse): response is UserResponse {
  // 実装してください
}

function handleApiResponse(response: ApiResponse) {
  if (isUserResponse(response)) {
    console.log(`ユーザー名: ${response.username}`);
  } else {
    console.error(`エラー: ${response.message}`);
  }
}

演習問題 3: フォーム入力の型チェック

フォームの入力データに対して、型ガードを使って正しい型に基づいた処理を行う実装を行ってください。

interface TextInput {
  type: 'text';
  value: string;
}

interface NumberInput {
  type: 'number';
  value: number;
}

type FormInput = TextInput | NumberInput;

タスク

• isTextInput型ガードを作成し、FormInputがTextInputかどうかを判定してください。
• handleFormInput関数を実装し、TextInputの場合はテキストを大文字に変換して表示、NumberInputの場合は数値を2桁にフォーマットして表示するようにしてください。

function isTextInput(input: FormInput): input is TextInput {
  // 実装してください
}

function handleFormInput(input: FormInput) {
  if (isTextInput(input)) {
    console.log(`テキスト入力: ${input.value.toUpperCase()}`);
  } else {
    console.log(`数値入力: ${input.value.toFixed(2)}`);
  }
}

演習問題のまとめ

これらの演習問題は、TypeScriptのユーザー定義型ガードを実践的に使いこなすためのものです。ユニオン型を扱う際に、型ガードを使って安全に型を絞り込むことで、コードの安全性と可読性を向上させることができます。問題を解くことで、型ガードの使い方を深く理解し、日常の開発に活かせるスキルを磨いてください。

次のセクションでは、本記事のまとめを行います。

まとめ

本記事では、TypeScriptにおけるユニオン型を安全に絞り込むためのユーザー定義型ガードについて、その基礎から応用までを詳しく解説しました。ユニオン型の柔軟性を活かしつつ、型ガードを使うことでコードの安全性と可読性を保つことができます。型ガードの基本的な使い方から、APIレスポンスやフォーム入力のような実践的なユースケース、さらには複雑なオブジェクトに対する型ガードの応用まで、幅広いシチュエーションで役立つテクニックを学びました。

ユーザー定義型ガードを活用すれば、複雑な型でも安心して扱うことができ、より堅牢なコードを実現できます。これを機に、TypeScriptの型システムを最大限に活用し、開発の効率化とバグ防止に役立ててください。