【TypeScript入門】Union型の基本がたった5分でわかる【実例付】

こんにちは！
今日は、TypeScriptの重要な概念の1つ、Union型について詳しく解説します。

「Union型って聞いたことあるけど、よくわからない…」
「実際のコードでどう使えばいいの？」

そんな疑問をお持ちの方も多いのではないでしょうか。
でも大丈夫。
この記事を読めば、Union型の基本からその使い方まで、しっかり理解できるようになりますよ。

この記事でわかること

Union型の基本的な概念
Union型の宣言方法と使い方
実際のコードでのUnion型の活用例
Union型を使ったコードの改善方法

Contents

Union型とは？
Union型の基本的な使い方
Union型の実践的な使用例
Union型とインターフェースの組み合わせ
Union型を使ったコードのリファクタリング例
- リファクタリング前（Before）
- リファクタリング後（After）
まとめ

Union型とは？

まずは、Union型の基本的な概念について説明しましょう。

Union型とは、複数の型のうちいずれかの型を持つことができる変数を定義するための機能です。
簡単に言えば、「AまたはB」という形で型を指定できる便利な仕組みなんです。

例えば、文字列か数値のどちらかを受け取る関数を作りたい場合、Union型を使えば簡単に実現できます。
これは、JavaScriptにはない TypeScriptならではの機能ですね。

Union型を使うと、次のようなメリットがあります。

コードの柔軟性が高まる
型の安全性が向上する
コードの意図が明確になる

Union型を使うことで、より堅牢で理解しやすいコードを書くことができるんです。

具体的な例を見てみましょう。
以下は、文字列または数値を受け取る関数の例です。


function printId(id: string | number) {
  console.log("Your ID is: " + id);
}

printId(101); // OK
printId("202"); // OK
printId(true); // エラー

この例では、idパラメータにstring | numberというUnion型を指定しています。
これにより、文字列か数値のどちらでも受け取れる関数になりました。

JavaScriptでは、このような型チェックを手動で行う必要がありましたが、TypeScriptならコンパイル時に自動でチェックしてくれます。
便利ですよね。

Union型の基本的な使い方

Union型の基本的な使い方について、もう少し詳しく見ていきましょう。

Union型の宣言方法は非常にシンプルです。
複数の型を縦棒（|）でつなげるだけで、Union型を作ることができます。

例えば、文字列または数値を格納できる変数を定義したい場合は、次のように書きます。


let result: string | number;
result = "hello"; // OK
result = 42; // OK
result = true; // エラー

このように、result変数には文字列か数値のみを代入できるようになりました。
真偽値（boolean）を代入しようとするとエラーになります。

Union型は、関数の引数や戻り値の型としても使えます。
次の例を見てみましょう。


function formatValue(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  }
  return value.toString();
}

console.log(formatValue("hello")); // "HELLO"
console.log(formatValue(42)); // "42"

このformatValue関数は、文字列か数値を受け取り、必ず文字列を返します。
型の判別（Type Guard）を使うことで、それぞれの型に応じた処理を書くことができるんです。

Union型は配列にも使えます。
例えば、文字列と数値が混在する配列を表現したい場合は次のように書けます。


let mixedArray: (string | number)[] = ["apple", 1, "banana", 2];

このように、Union型を使うことで、柔軟性の高いコードを書くことができます。

ただし、注意点もあります。
Union型で指定された全ての型に共通するプロパティやメソッドしか直接使用できません。
例えば、次のようなコードはエラーになります。


function getLength(value: string | number): number {
  return value.length; // エラー
}

lengthプロパティは文字列にはありますが、数値にはないため、このコードはエラーになってしまいます。
このような場合は、型の判別を行ってから処理を書く必要があります。

Union型の実践的な使用例

ここでは、実際のコードでUnion型をどのように活用できるか、具体的な例を見ていきましょう。
特に、APIレスポンスの型定義とフォーム入力の型定義について解説します。

まずは、APIレスポンスの型定義の例から見てみましょう。
APIからのレスポンスは、正常な場合とエラーの場合で異なる形式になることがよくあります。
このような場合、Union型を使うと便利です。


type SuccessResponse = {
  status: "success";
  data: {
    id: number;
    name: string;
  };
};

type ErrorResponse = {
  status: "error";
  message: string;
};

type ApiResponse = SuccessResponse | ErrorResponse;

function handleApiResponse(response: ApiResponse) {
  if (response.status === "success") {
    console.log(`ユーザー名: ${response.data.name}`);
  } else {
    console.log(`エラーメッセージ: ${response.message}`);
  }
}

この例では、ApiResponse型をUnion型として定義しています。
これにより、APIからのレスポンスが成功かエラーかに応じて適切な処理を行うことができるんです。

次に、フォーム入力の型定義の例を見てみましょう。
フォームの入力値は、テキスト入力や数値入力、チェックボックスなど、様々な型が混在することがあります。
このような場合もUnion型が役立ちます。


type FormField =
  | { type: "text"; value: string }
  | { type: "number"; value: number }
  | { type: "checkbox"; checked: boolean };

function validateForm(fields: FormField[]) {
  for (const field of fields) {
    switch (field.type) {
      case "text":
        console.log(`テキスト入力: ${field.value}`);
        break;
      case "number":
        console.log(`数値入力: ${field.value}`);
        break;
      case "checkbox":
        console.log(`チェックボックス: ${field.checked ? "ON" : "OFF"}`);
        break;
    }
  }
}

const formData: FormField[] = [
  { type: "text", value: "山田太郎" },
  { type: "number", value: 30 },
  { type: "checkbox", checked: true }
];

validateForm(formData);

この例では、FormField型をUnion型として定義しています。
これにより、異なる種類のフォームフィールドを1つの配列で扱うことができます。

このようにUnion型を使うことで、複雑なデータ構造も柔軟に表現できるんです。

Union型とインターフェースの組み合わせ

Union型は、インターフェースと組み合わせることで、より複雑で柔軟な型定義を作ることができます。
ここでは、複雑な型定義の例とコード可読性を向上させるテクニックについて解説します。

まず、Union型とインターフェースを組み合わせた複雑な型定義の例を見てみましょう。
例えば、オンラインショップの商品を表現する型を考えてみます。


interface BaseProduct {
  id: number;
  name: string;
  price: number;
}

interface PhysicalProduct extends BaseProduct {
  type: "physical";
  weight: number;
  dimensions: {
    width: number;
    height: number;
    depth: number;
  };
}

interface DigitalProduct extends BaseProduct {
  type: "digital";
  fileSize: number;
  format: string;
}

type Product = PhysicalProduct | DigitalProduct;

function processProduct(product: Product) {
  console.log(`商品名: ${product.name}, 価格: ${product.price}円`);

  if (product.type === "physical") {
    console.log(`重量: ${product.weight}kg`);
  } else {
    console.log(`ファイルサイズ: ${product.fileSize}MB`);
  }
}

この例では、BaseProductインターフェースを基に、PhysicalProductとDigitalProductという2つの具体的な商品タイプを定義しています。
そして、これらをUnion型Productとしてまとめています。

このような型定義により、物理商品とデジタル商品の両方を同じ関数で扱いつつ、それぞれの特有のプロパティにもアクセスできるんです。

次に、コード可読性を向上させるテクニックを見ていきましょう。
複雑な型定義を使う際、コードが読みにくくなることがあります。
そこで、型エイリアスを使ってコードを整理する方法があります。


type UserId = number;
type UserName = string;
type UserEmail = string;

interface BaseUser {
  id: UserId;
  name: UserName;
  email: UserEmail;
}

interface AdminUser extends BaseUser {
  role: "admin";
  accessLevel: number;
}

interface RegularUser extends BaseUser {
  role: "user";
  lastLogin: Date;
}

interface GuestUser extends BaseUser {
  role: "guest";
  expirationDate: Date;
}

type User = AdminUser | RegularUser | GuestUser;

function greetUser(user: User) {
  console.log(`こんにちは、${user.name}さん！`);

  switch (user.role) {
    case "admin":
      console.log(`管理者権限レベル: ${user.accessLevel}`);
      break;
    case "user":
      console.log(`最終ログイン: ${user.lastLogin.toLocaleString()}`);
      break;
    case "guest":
      console.log(`アカウント有効期限: ${user.expirationDate.toLocaleString()}`);
      break;
  }
}

この例では、基本的なデータ型に対して型エイリアスを使い、さらにユーザーロールにも型エイリアスを使っています。
これにより、コードの意図がより明確になり、将来的な変更も容易になるんです。

また、switch文を使うことで、それぞれのユーザータイプに応じた処理を見やすく書くことができます。

このように、Union型とインターフェースを組み合わせ、適切に型エイリアスを使うことで、複雑なデータ構造も表現力豊かに、そして読みやすく定義することができるんです。

Union型を使ったコードのリファクタリング例

ここでは、Union型を使ってコードをリファクタリングする具体例を見ていきましょう。
Before/Afterの比較を通じて、Union型がどのようにコードの品質を向上させるか、実感していただけると思います。

まず、リファクタリング前のコードを見てみましょう。
これは、ユーザーの種類によって異なる処理を行う関数の例です。

リファクタリング前（Before）


function handleUser(userType: string, userData: any) {
  if (userType === "regular") {
    console.log(`通常ユーザー: ${userData.name}`);
    console.log(`最終ログイン: ${userData.lastLogin}`);
  } else if (userType === "premium") {
    console.log(`プレミアムユーザー: ${userData.name}`);
    console.log(`特典ポイント: ${userData.bonusPoints}`);
  } else if (userType === "admin") {
    console.log(`管理者: ${userData.name}`);
    console.log(`アクセスレベル: ${userData.accessLevel}`);
  } else {
    console.log("不明なユーザータイプです");
  }
}

このコードには、いくつかの問題があります。

userTypeが文字列型なので、タイプミスのリスクがあります。
userDataがany型なので、型の安全性が失われています。
条件分岐が多く、新しいユーザータイプを追加するのが面倒です。

では、このコードをUnion型を使ってリファクタリングしてみましょう。

リファクタリング後（After）


type RegularUser = {
  type: "regular";
  name: string;
  lastLogin: Date;
};

type PremiumUser = {
  type: "premium";
  name: string;
  bonusPoints: number;
};

type AdminUser = {
  type: "admin";
  name: string;
  accessLevel: number;
};

type User = RegularUser | PremiumUser | AdminUser;

function handleUser(user: User) {
  console.log(`ユーザー名: ${user.name}`);

  switch (user.type) {
    case "regular":
      console.log(`最終ログイン: ${user.lastLogin.toLocaleString()}`);
      break;
    case "premium":
      console.log(`特典ポイント: ${user.bonusPoints}`);
      break;
    case "admin":
      console.log(`アクセスレベル: ${user.accessLevel}`);
      break;
  }
}

このリファクタリングにより、コードの品質が大幅に向上しました。
主な改善点は以下の通りです。

ユーザータイプが型で保証されるため、タイプミスのリスクがなくなりました。
各ユーザータイプごとに必要なプロパティが明確になり、型の安全性が向上しました。
switch文を使うことで、コードの見通しが良くなりました。
新しいユーザータイプを追加する際も、User型に新しい型を追加するだけで済みます。

このように、Union型を使ってリファクタリングすることで、コードの安全性、可読性、拡張性が大きく向上します。
型の恩恵を最大限に活かすことで、バグの少ない、メンテナンスしやすいコードを書くことができるんです。

【付録】さらに学びを深めるためのリソース

intersection型について理解を深めたところで、さらに学習を進めたい方のために、いくつかのリソースを紹介します。
これらのリソースを活用することで、TypeScriptの型システムについてより深い知識を得ることができるでしょう。

オンラインで参照できる公式ドキュメント

TypeScript公式ハンドブック

https://www.typescriptlang.org/docs/
TypeScriptの公式ドキュメントです。
intersection型を含む、すべての型システムの機能について詳細な説明があります。

TypeScript Deep Dive

https://basarat.gitbook.io/typescript/
TypeScriptの深い部分まで掘り下げて解説しているオンラインブックです。
無料で読むことができ、intersection型についても詳しく説明されています。

TypeScriptの学習は終わりがありません。
新しい機能が常に追加され、より良い書き方が発見されています。
継続的に学習を続けることで、より良いTypeScriptプログラマーになれるはずです。

キャリア形成/給与還元
ひとつひとつ真摯に向き合う企業