先生と生徒の会話形式で理解しよう

生徒

「TypeScriptで、何かを分かりやすくグループ分けする方法ってありますか？」

先生

「その場合はenum（列挙型）を使うと便利ですよ。特定の値に名前をつけて、グループ化できます。」

生徒

「それって具体的にどういうときに使うんですか？」

先生

「例えば、曜日や月、方向（北・南・東・西）など、限られた選択肢の中から選ぶようなときに使います。じゃあ実際に使い方を見てみましょう！」

1. Enum（列挙型）とは？

TypeScriptのenum（イーナム、列挙型）とは、「あらかじめ決められた選択肢だけを使いたいときに、それらを名前付きでまとめておける仕組み」です。数値や文字列をそのまま使うのではなく、意味の分かる名前を付けて管理できるのが大きな特徴です。

たとえば、「北・南・東・西」や「ステータス（未対応・対応中・完了）」のように、選択肢が決まっている場合、enumを使うと「どんな値が入るのか」が一目で分かるようになります。

もしenumを使わずに数値や文字列を直接書いてしまうと、「この1は何を意味しているのか？」と後から分かりづらくなることがあります。enumは、そうした読みづらさや書き間違いを防ぐための道具です。


enum Direction {
    North,
    South,
    East,
    West
}

このように定義しておけば、「方向」を表す値はDirectionの中から選ぶだけで済みます。初心者のうちは、「決まった選択肢に名前を付けてまとめるもの」と覚えておくと理解しやすいでしょう。

2. Enumの基本的な書き方

Enum（列挙型）は、enumキーワードを使って定義します。書き方自体はとてもシンプルで、「この中からどれか1つを選ぶ」という選択肢を並べていくだけです。まずは形に慣れることが大切です。

たとえば、方向を表すEnumを作る場合は、「North」「South」「East」「West」といった名前をカンマ区切りで並べます。これだけで、TypeScriptが内部的に番号を割り振ってくれます。


enum Direction {
    North,
    South,
    East,
    West
}

let myDirection: Direction = Direction.East;
console.log(myDirection); // → 2

この例では、Northが0、Southが1、Eastが2、Westが3として自動的に設定されます。番号を自分で管理しなくていい点が、Enumの便利なところです。

初心者の方は、「Enumは名前付きの番号リスト」と考えると分かりやすいでしょう。まずは基本の書き方をそのまま真似して書いてみるのがおすすめです。

3. 値を自由に指定する方法

enumでは、各要素に自分で数値を指定することもできます。これにより、「この値は必ずこの番号にしたい」というケースにも対応できます。特に、月やステータスコードのように、意味のある番号が決まっている場合に便利です。

たとえば、月を表すEnumでは「1月は1、2月は2…」とした方が直感的ですよね。そのようなときは、最初の値だけ明示的に指定します。


enum Month {
    January = 1,
    February,
    March,
    April
}

console.log(Month.February); // → 2

この例では、Januaryを1に指定しています。そのため、後に続くFebruaryは2、Marchは3というように、自動で連番が割り当てられます。

すべての値を指定しなくても、途中からTypeScriptが補ってくれるのがポイントです。初心者の方は、「最初だけ決めれば、あとは流れで決まる」と覚えておくと分かりやすいでしょう。

4. 文字列のEnum（列挙型）も使える

Enumは数値だけでなく、文字列を値として持たせることもできます。これを「文字列Enum」と呼びます。文字列Enumの大きな特徴は、中身を見ただけで意味が分かる点にあります。

数値のEnumの場合、出力結果が「0」や「1」になるため、何を表しているのか分かりづらいことがあります。一方、文字列Enumなら、そのまま人が読める文字が使われるため、画面表示やログ出力に向いています。


enum Gender {
    Male = "男性",
    Female = "女性",
    Other = "その他"
}

console.log(Gender.Female); // → "女性"

この例では、「性別」という限られた選択肢を、分かりやすい日本語の文字列で表しています。Gender.Femaleと書くだけで「女性」という値が使えるため、コードの意図も読み取りやすくなります。

初心者の方は、「画面に表示したい文字をそのままEnumに入れられる」と考えるとイメージしやすいでしょう。ユーザー向けの表示やメッセージに使う場合は、文字列Enumが特に便利です。

5. Enumの逆引き（値から名前を取得）

数値で定義したenumは、逆に値から名前を取り出すこともできます。これはTypeScriptの便利な特徴の1つです。


enum Status {
    OK = 200,
    NotFound = 404,
    ServerError = 500
}

let code = 404;
let statusName = Status[code];
console.log(statusName); // → "NotFound"

このように、数値からenum名を調べることができます。ただし、文字列列挙型では逆引きはできません。

6. Enumを使うときの注意点

Enumを使うと便利ですが、いくつか気をつけるべきポイントがあります。

JavaScriptに変換されたときに、余分なコードが生成される
TypeScriptのenumはJavaScriptにコンパイルすると、少し複雑なコードになります。ファイルサイズが気になる場合は、const enumの使用を検討しましょう。
文字列のEnumは逆引きできない
先ほど紹介した「値から名前を取り出す」機能は、数値のenumにしか使えません。文字列enumは片方向だけです。
同じ値を複数の名前に割り当てると混乱の原因になる
たとえばA = 1とB = 1のように、同じ数値を複数に設定すると、逆引きでどちらが返るかは保証されません。

7. const enumとは？

const enumは、より軽量な列挙型です。JavaScriptに変換されたときに、enumの名前が取り除かれて、数値だけが残ります。


const enum Color {
    Red,
    Green,
    Blue
}

let favoriteColor = Color.Green;
console.log(favoriteColor); // → 1（この例ではGreen = 1）

通常のenumよりも無駄がなくなるため、パフォーマンスやファイルサイズを気にするアプリケーションでは、const enumを使うとよいでしょう。

8. Enumを使った条件分岐の例

実際にenumを使って条件分岐する例を見てみましょう。


enum Weather {
    Sunny,
    Rainy,
    Cloudy
}

let today: Weather = Weather.Rainy;

if (today === Weather.Sunny) {
    console.log("今日は晴れです！");
} else if (today === Weather.Rainy) {
    console.log("今日は雨です！");
} else {
    console.log("今日はくもりです！");
}


今日は雨です！

enumを使うことで、数字や文字列をそのまま使うよりも、意味がはっきりして読みやすいコードになります。

まとめ

TypeScriptの列挙型（Enum）は、決まった選択肢の中から値を選ぶような場面において、コードを読みやすくし、ミスを減らす効果があります。この記事では、Enumの基本的な使い方から、数値列挙型と文字列列挙型の違い、さらには逆引きやconst enumまで、幅広く学びました。

特に便利なのは、複数の値に名前をつけて管理できる点です。たとえば方向や曜日、月や状態（ステータス）などをEnumで表すことで、コードに意味が生まれ、保守性が高くなります。Direction.Eastのような書き方は、2などの数字を直接使うよりも直感的で、読み手に優しい設計と言えるでしょう。

また、値に意味を持たせることができるという点では、文字列列挙型も重要です。ログ出力やデバッグにおいては、数字よりも"女性"や"エラー"といった文字列の方がわかりやすく、システムの状態を正確に把握できます。一方で、逆引き（数値から名前を取得）は数値列挙型でのみ可能という特徴もあり、使い分けが求められます。

const enumは、最終的にJavaScriptへとコンパイルされた際にコードの軽量化が行われるため、ファイルサイズを小さく保ちたいプロジェクトではとても有効です。ただし、扱いには注意も必要です。開発環境によってはconst enumが使えないこともあり、設定に応じた選択が求められます。

Enumはswitch文やif文など、条件分岐とも相性が良く、コードの分かりやすさに直結します。たとえば以下のような構造で、状態に応じたメッセージを切り替えることも自然に実現できます。

Enumを使った条件分岐の例


enum AccessLevel {
    Guest,
    User,
    Admin
}

function checkPermission(level: AccessLevel): string {
    switch (level) {
        case AccessLevel.Admin:
            return "管理者権限があります。";
        case AccessLevel.User:
            return "一般ユーザーとしてログイン中です。";
        case AccessLevel.Guest:
            return "ゲストアクセス中です。";
        default:
            return "不明な権限です。";
    }
}

console.log(checkPermission(AccessLevel.User));

上記のようにEnumを使うことで、条件分岐がすっきりと明示的になり、将来的な拡張や修正も容易になります。数字をベタ書きするのではなく、意味を持った名前で管理することで、ミスも少なくなるというわけです。

実務においてもEnumはよく使われています。たとえばREST APIのレスポンスステータスやユーザーの状態管理、画面遷移の条件制御など、様々な場面で活躍します。最初は使い方に戸惑うかもしれませんが、繰り返し使っていくうちにその便利さが実感できるようになります。

そして何よりも、Enumを正しく使うことで、コード全体の可読性が格段に向上します。チーム開発でも「この数値は何を表しているのか？」といった疑問を減らすことができ、共通の認識を持ちながら作業を進めることができます。

今後TypeScriptで開発を行う上で、「Enum」という機能は間違いなく力強い味方になります。「決まった選択肢を安全に扱いたい」「条件ごとの処理を分かりやすく書きたい」そんなときには、ぜひEnumを使ってみましょう。

先生と生徒の振り返り会話

生徒

「Enumって、最初は難しそうに見えましたけど、決まった選択肢をまとめて管理できるのって、すごく便利ですね！」

先生

「そうですね。値に名前をつけるだけで、コードがずっと読みやすくなります。間違いも減らせますし、修正もしやすくなりますよ。」

生徒

「文字列Enumと数値Enumの違いもよくわかりました。逆引きができるのは数値の方だけなんですね。」

先生

「その通りです。それぞれのEnumの特性を理解して、使い分けられるようになると、より実践的なコードが書けるようになりますよ。」

生徒

「これから実際のアプリでも、列挙型を積極的に使ってみたいです！」

先生