TypeScriptでEnumを使おう｜基本から応用まで実例付きで解説

（最終更新月：2023年11月）

✔当記事は次のような質問を持つ方を対象にしています

✔こちらの内容をお届けします

• TypeScriptにおけるenumの基礎知識
• enumの定義から実際の使い方について
• enumを活用したプログラミングの具体的なサンプル

当記事では、TypeScriptのenumに関する基本的な概要から始め、より複雑なシナリオでの応用方法に至るまで、コードサンプルを交えながらわかりやすくご紹介していきます。

最後までお読みいただき、TypeScriptを使った開発の幅を広げる知識を深めましょう。

TypeScriptのEnumの基本

まずは、Enumがどのように振る舞うのかを見ていきましょう。

TypeScriptで列挙型（Enum）の使い方を理解することは、型安全なコーディングを実現するために不可欠です。

• 数値Enumの活用と制約
• 文字列Enumの特徴
• Enumの疑問点の解決

数値Enumの活用と制約

数値Enumは、TypeScriptで最も基本的なEnum形式です。

数値Enumを使うことで、数字を使って明確な命名規則を実現できます。

以下は数値Enumの定義と使用法の例です。

enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

こちらがTypeScriptの数値Enumにおける注意事項です。

• Direction.Upに1を、以降の項目には自動でインクリメントした値が割り当てられる
• 数値Enumには、数字と値の間の直感的な対応関係がないという制約がある
• デバッグ時に出力される数値が、コード内ではっきりしない場合があるため、混乱を招く可能性がある

文字列Enumの特徴

文字列Enumは、数値Enumに比べて読みやすいコードになるという利点があります。

各Enumメンバーには文字列リテラルを指定し、その値自体が使用されるもの。

以下に文字列Enumの例を示します。

enum FileAccess {
  Read = "READ",
  Write = "WRITE",
  Execute = "EXECUTE"
}

FileAccess.ReadのようにEnumをコード中で使った場合、その値がすぐにわかるというメリットがあります。

ただし文字列Enumは、自動的なインクリメントがないため、すべてのメンバーに明示的に値を割り当てる必要があります。

Enumの疑問点の解決

Enumを使う上でよくある疑問点のひとつに、Enumに新しい値を動的に追加できるかというものがあります。

実際には、定義後のEnumへの値の追加は推奨されていませんが、技術的には可能です。

以下のようなコードになります。

enum Color {
  Red,
  Green,
  Blue
}

Color["Yellow"] = 3;

// Now, Color["Yellow"] === 3

Color Enumに"Yellow"という新たなメンバーを追加しています。

このような動的な追加は柔軟性と引き換えに型安全を損なうので、可能な限り避けるべきです。

Enumの利用シナリオとベストプラクティス

Enumは非常に便利な言語機能ですが、その利用方法にはベストプラクティスが存在します。

良いケースと悪いケースを理解することで、コードの品質を保てるでしょう。

• Enumを使ったフラグ指定
• 静的メソッドを持つEnumのパターン
• Enumのオープンエンド構造
• Enumの利点と課題

Enumを使ったフラグ指定

Enumは組み合わせ可能なフラグを作成する場合に非常に適しています。

たとえば、以下のようにファイルのパーミッションを表すEnumを定義しましょう。

enum Permission {
  Read = 1 << 0,  // 0001
  Write = 1 << 1, // 0010
  Execute = 1 << 2, // 0100
}

let userPermissions: Permission = Permission.Read | Permission.Write;

userPermissions変数は、ビットワイズORを使ってReadとWriteパーミッションを組み合わせられます。

このようにしてフラグを指定することで、効率的に権限管理をおこなってください。

静的メソッドを持つEnumのパターン

Enumに静的メソッドを加えることで、より洗練されたロジックを含められます。

たとえば、以下のEnumには特定の条件下でのメンバー取得のロジックを含めることが可能です。

enum Weekday {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,

  static isBusinessDay(day: Weekday) {
    switch (day) {
      case Weekday.Saturday:
      case Weekday.Sunday:
        return false;
      default:
        return true;
    }
  }
}

上記の構文はTypeScriptではサポートされていませんが、擬似的に示すことで理解を助けます。

実際には、Enumと同じ名前の名前空間を作成し、関数を追加することで同様の機能を実現できます。

Enumのオープンエンド構造

TypeScriptのEnumはオープンエンド構造を持っています。

つまり、別のファイルや別の場所で同じ名前のEnumを定義することで、既存のEnumにメンバーの追加が可能です。

以下に例を示します。

// 初期のEnum定義
enum Color {
  Red,
  Green,
  Blue
}

// 別の場所での追加
enum Color {  
  Yellow,
  Black
}

このようにすると、既存のColor EnumにYellowとBlackが結合されます。

使い方には注意が必要ですが、大規模なプロジェクトでEnumの拡張が必要な場合に役立つ機能です。

Enumの利点と課題

Enumはあらゆるプログラミング言語においてコードの構造を改善し、マジックナンバーやマジックストリングと戦うための強力なツールです。

TypeScriptのEnumは以下のような多くの利点を提供します。

• 自動的な値の割り当て
• 型安全な利用
• リファクタリング中のエラー発見のしやすさ

ただし数値Enumが意図せずに衝突する可能性や、Enumの値を動的に変えることが型安全を損なう可能性などの課題も存在します。

また、Enumのコンパイル時の挙動の違いにも注意が必要です。

代替案としてのTypeScriptのパターン

TypeScriptでは、Enum以外にも型安全を確保するためのいくつかの代替方法が用意されています。

これらの方法を適切に利用することで、Enumの制約を回避しつつ、コードのメンテナンス性と理解しやすさを向上させられます。

• ユニオン型とEnumの適用場面
• オブジェクトリテラルの利用メソッド
• より良い代替案の検討

ユニオン型とEnumの適用場面

ユニオン型は、Enumの代替として使用できます。

とくに、限定された数の文字列値から選択する場合には、Enumよりもユニオン型の方がシンプルに書けるでしょう。

TypeScriptでは以下のように定義できます。

type Direction = 'Up' | 'Down' | 'Left' | 'Right';

上記の例では、Direction型は指定された4つの値のいずれかしか取ることができません。

ユニオン型は積極的に型チェックを行い、適切な場面での利用が推奨されます。

オブジェクトリテラルの利用メソッド

オブジェクトリテラルを使って、Enumのような振る舞いをする定数セットを作成することも可能。

以下はその例です。

const FileAccess = {
  Read: "READ",
  Write: "WRITE",
  Execute: "EXECUTE"
} as const;

function hasAccess(mode: typeof FileAccess[keyof typeof FileAccess]) {
  // ...
}

as const構文を使うことで、オブジェクトの値がリテラル型として扱われ、変更不可能になります。

より良い代替案の検討

Enumよりも優れた代替案は、プロジェクトやチームの要件に応じて変わります。

目的に応じて、ユニオン型やオブジェクトリテラルのほかにも、文字列リテラルや数値リテラル、タプルなどを効果的に使い分けられます。

常にコードの意図を明確にし、ほかの開発者が読みやすい形で表現することが重要です。

Const Enumの詳細

Const EnumはTypeScriptの特別な構文であり、パフォーマンスを向上させつつ、Enumの便利さを提供します。

Const Enumについて、その特徴とユースケース、コンパイル時の挙動とパフォーマンスへの影響を見ていきましょう。

• Const Enumの特徴とユースケース
• Const Enumのコンパイル時の挙動
• Const Enumのパフォーマンスへの影響

Const Enumの特徴とユースケース

Const Enumは、通常のEnumとはちがい、コンパイル時にEnumのリテラル値に置き換わる特徴を持っています。

この特徴によって、ランタイムで追加のオブジェクトが生成されることなく、Enumの利用ができます。

ユースケースとしては、以下のような場面が考えられるでしょう。

const enum HttpStatus {
  OK = 200,
  BadRequest = 400,
  Unauthorized = 401,
  NotFound = 404
}

let responseStatus = HttpStatus.OK;

この例のコンパイル後のJavaScriptでは、responseStatusは直接的に数字の200に置き換わります。

Const Enumのコンパイル時の挙動

Const Enumは、コンパイル時にEnumのキーに対応する値に置き換えられるため、コードの実行速度が向上します。

以下はConst Enumを使用したコードの実例です。

const enum Direction {
  Up,
  Down,
  Left,
  Right
}

// コンパイル後:
// var a = 0 /* Up */;
let a = Direction.Up;

コンパイル後にEnum Direction.Upが0に置き換えられていることがわかります。

このため、Enumのオブジェクト参照を使う必要がなくなるのです。

Const Enumのパフォーマンスへの影響

Const EnumはEnumオブジェクトの生成コストがゼロであるため、とくに大規模なプロジェクトやパフォーマンスが重視されるアプリケーションにおいて有効です。

ただし、Const Enumは他のファイルから参照できないという欠点もあります。

つまり、Enumがアプリケーション全体で共有される値を保持するために使われるべきシナリオには適しません。

まとめ

当記事では、TypeScriptにおけるenumについて学習してきました。

• Enumは、TypeScriptにおける型安全なコードの書き方を提供し、より読みやすく、保守しやすいプログラムの作成を助ける
• しかし、その利用方法には習熟が必要であり、場合によってはユニオン型やオブジェクトリテラルなどの代替案が望ましい場合もある
• ユニオン型やConst Enumといった特性を活用することで、パフォーマンスの最適化を図ることも可能

最高のコード体験を提供するために、TypeScriptのEnumとEnumの代替案を上手に使い分けるのがおすすめ。

さまざまな使い方を知るために、技術の進化を学び、効果的なコードを書くための知見を広げていきましょう。