【JavaScript】enumとは？擬似的な使い方を具体例でわかりやすく解説

プログラミング言語•
JavaScript

はじめに

JavaScriptを学び始めた皆さんは、値をまとめてわかりやすく管理したいと感じることがあるのではないでしょうか。
たとえば、状態を表す「数種類の決まった値」だけを安全に使いたいとき、いわゆる列挙型と呼ばれる機能があると便利です。
ところがJavaScriptには、他の言語のように「enum(イーナム)」という組み込みの列挙型機能がありません。

しかし、実務ではenum的な表現をしたい場面が頻繁に登場します。
この記事では「JavaScriptでenumが使えないなら、どうやって列挙型を実装していけばいいのか」という疑問を解消するため、実務で使われる具体的な方法を複数紹介します。
初心者の方でも理解しやすいように、具体例を交えながら丁寧に解説していきますので、最後まで読んでみてください。

この記事を読むとわかること

  • enum（列挙型）の基本的な考え方
  • JavaScriptにenumが存在しない理由
  • JavaScriptでenum的な機能を実装する複数の方法
  • 実務におけるenum的実装の活用例と注意点
  • TypeScriptのenumとの比較と使い分け

enumとは何か

enumという言葉を初めて聞く方もいるかもしれません。
enumは「列挙型」と呼ばれ、限られた定数の集まりを定義して、それらの値以外は使用できないようにする概念です。
たとえば、ユーザーのステータスが "active"・"inactive"・"banned" の3種類しかない場合、これらをenumで定義すれば、プログラム側で他の値が誤って使われるリスクを軽減できます。

多くのプログラミング言語では標準機能としてenumをサポートしています。
しかし、JavaScriptではenumが公式にサポートされていません。
このため、JavaScriptで列挙型のような仕組みを使いたいときは、自分で工夫して実装する必要があります。

enumを使うメリットは、誤った値が入りにくくなることやコードを読みやすく整理しやすくなることです。
特に共同開発では「この値は他の部分でどう使われているのか？」や「意図しない値が入り込む可能性はないか？」を把握するのが大事なので、列挙型的な仕組みが重宝されます。

JavaScriptでのenumの疑似的な実装が必要になるシーン

JavaScriptでわざわざenumのような仕組みを作りたいシーンには、いくつかの具体例があります。
ここでは、実務でよくあるシチュエーションをいくつか挙げてみましょう。

まずは、ユーザーステータスの管理です。
先ほどの例にあるように "active" や "inactive" など、状態が限られた文字列のとき、文字列を書き間違えるとエラーの原因になります。
enum的に定数をまとめておけば、タイプミスを減らすことができて安全です。

次に、アプリケーション内での画面の種類やページの種類を区分するときも便利です。
例えば "HOME", "PROFILE", "SETTINGS" といった画面IDを列挙型で定義しておくと、画面遷移の際に意図しない文字列を渡してしまうことを防げます。

さらに、APIから受け取るデータの種類やパラメータの固定値なども挙げられます。
API通信では、サーバーから返ってくるステータスコードやエラーメッセージが限定されている場合が多いです。
それらをまとめて定義しておくと、コードの保守がぐっと楽になります。

このように、JavaScriptでも列挙型のような仕組みがあると、コードの可読性や保守性が向上します。
次のセクションからは、具体的に「なぜJavaScriptにenumがないのか」を確認し、そのうえでenum的な実装方法を複数紹介していきます。

JavaScriptでenumがない理由

JavaScriptの仕様として、enumを明示的にサポートしていないのはなぜでしょうか。
これは言語設計の方針が大きく関係しています。
JavaScriptはもともと動的型付け言語であり、自由度が非常に高く、簡易的にオブジェクトやプロパティを追加・削除できる設計になっています。

列挙型というのは「定数の集まり」を厳格に管理する仕組みです。
厳格さを重視する言語（C++やJavaなど）では、コンパイル時点で型チェックを行うことで誤りを防ぐ性質があります。
しかしJavaScriptは、ランタイムの動的な性質を重視した言語なので、コンパイル時に型を固定するような仕組みよりも柔軟さを優先してきました。

その結果として、enumが正式に採用されず、「必要ならオブジェクトを使って定数をまとめればいい」というスタイルが主流になったわけです。
この柔軟性はJavaScriptの強みでもあり、同時に大規模開発では厳密性が欲しい開発者にとって、制約が足りないと感じる部分でもあります。

ただし、TypeScriptのような静的型付けを採用したJavaScriptのスーパーセットでは、enum機能が用意されています。
後ほどTypeScriptのenumについても触れますが、JavaScriptだけで実装したい場合、enumを厳格に使うのではなく、オブジェクトや特定のパターンを工夫することになります。

代わりにオブジェクトで定数を定義する方法

まず最もシンプルな方法としては、オブジェクトを使った定数のまとめ方がよく知られています。
いわゆる「連想配列（キーと値のペア）を１つのオブジェクトにまとめる」形で、「enumっぽい」機能を実現します。

例えば、以下のように文字列をまとめて定義します。

const UserStatus = {
  ACTIVE: "active",
  INACTIVE: "inactive",
  BANNED: "banned"
};

// 使用例
function getUserStatusMessage(status) {
  if (status === UserStatus.ACTIVE) {
    return "ユーザーは現在アクティブです。";
  } else if (status === UserStatus.INACTIVE) {
    return "ユーザーは非アクティブ状態です。";
  } else if (status === UserStatus.BANNED) {
    return "ユーザーは利用禁止になっています。";
  } else {
    return "未知のステータスです。";
  }
}

このようにオブジェクトで定数を定義すると、ある程度は「列挙型らしさ」を持たせることができます。
文字列のタイプミスを減らせるのが大きなメリットですね。

ただし、この方法には注意点があります。
デフォルトでは、このオブジェクト自体への書き換えを簡単に行うことができてしまいます。
つまり、コードのどこかで UserStatus.ACTIVE = "someOtherValue"; と書かれてしまったら、意図しない値を上書きされる可能性があるのです。

列挙型は本来「値の変更ができない」ことが前提ですから、純粋なenumとは少し異なる点に留意する必要があります。
こうした問題を回避するためには、後述するように Object.freeze() を使うなど、値を不変にする工夫が大切です。

freezeを使ったオブジェクトの列挙型表現

前述のとおり、JavaScriptのオブジェクトはデフォルトだと書き換えが可能です。
これを防ぐためには、Object.freeze() を使うと便利です。

const UserStatus = Object.freeze({
  ACTIVE: "active",
  INACTIVE: "inactive",
  BANNED: "banned"
});

// freeze後に書き換えを試みても無視される
UserStatus.ACTIVE = "invalid"; 
console.log(UserStatus.ACTIVE); 
// -> "active"

Object.freeze() を使うことで、そのオブジェクトのプロパティを変更できなくなります。
これによって、enum的に「定数の集まり」を厳密に扱いやすくなり、「どこかで意図せず値が変わってしまう」リスクを回避できます。

もしenumを使いたい理由が「定義された値をうっかり変えてしまうミスを防ぎたい」というところにあるのなら、こういったfreeze()を使ったアプローチが非常に効果的です。

ただし、Object.freeze()はオブジェクトのプロパティを完全に不変にするので、必要に応じて値を追加したり削除したりすることはできなくなります。
実務では「もう絶対に変更することがない定数類」をまとめたいケースでは有効ですが、「将来的に値が増減するかもしれない」という場合は、設計段階で変更のしやすさとのバランスを考える必要があります。

Symbolを使ったユニークキー表現

もう一つの方法として、Symbol を使うパターンもあります。
SymbolはES6（ECMAScript 2015）で導入された仕組みで、ユニークな識別子を生成できるのが特徴です。

文字列を使うと、どうしても「同じ文字列」の衝突リスクが考えられますが、Symbolであれば同じ文字列を使って生成しても別のシンボルとして扱われるため、識別子の重複を防ぐことができます。

const PaymentStatus = Object.freeze({
  PAID: Symbol("paid"),
  PENDING: Symbol("pending"),
  CANCELLED: Symbol("cancelled")
});

function processPayment(status) {
  if (status === PaymentStatus.PAID) {
    return "支払いが完了しています。";
  } else if (status === PaymentStatus.PENDING) {
    return "支払いは保留中です。";
  } else if (status === PaymentStatus.CANCELLED) {
    return "支払いはキャンセルされました。";
  } else {
    return "未知の支払いステータスです。";
  }
}

Symbolで定義したプロパティは、コンソールなどで表示すると Symbol(paid) のように出力されます。
内部的にはユニークな値として管理されるので、「文字列」か「Symbol」かで厳密に区別できるメリットがあります。

ただし文字列ベースで値を利用したい場合は、Symbolを直接ユーザーに見せることはできません。
それが問題にならない場面では有用ですが、「ログとして文字列で残したい」「DBに文字列で保存したい」というケースでは扱いづらいことがあります。
運用方針やデータの扱い方次第で、文字列と Symbol を使い分けるといいでしょう。

TypeScriptのenumとの比較

JavaScript自体にはenumがありませんが、TypeScript には組み込みのenum機能があります。
TypeScriptでは以下のように簡単に定義することができます。

enum OrderStatus {
  New = "new",
  InProgress = "in_progress",
  Completed = "completed"
}

function getOrderStatusMessage(status: OrderStatus): string {
  if (status === OrderStatus.New) {
    return "新規注文です。";
  } else if (status === OrderStatus.InProgress) {
    return "処理中です。";
  } else if (status === OrderStatus.Completed) {
    return "処理が完了しました。";
  } else {
    return "不明なステータスです。";
  }
}

TypeScriptのコンパイラは、enumで定義した値しか使えないようにチェックしてくれます。
これが純粋なJavaScriptとの大きな違いです。
実行前にエラーを検知できるため、大規模開発では非常に助かる場面が多いといえるでしょう。

ただし、TypeScriptを導入しなくても本記事で紹介しているオブジェクト+freezeやSymbolなどを活用すれば、JavaScriptだけでもenum的な運用は可能です。
一方で、「静的型付けを導入して、開発者同士のミスを徹底的に減らしたい」というプロジェクトでは、TypeScriptのenumが大きなメリットをもたらすのは間違いありません。

実務での活用例：ステータス管理

実際の業務でenum的な実装がどのように使われるのかを、具体的にイメージしてみましょう。
ここでは、ユーザーや注文などのステータス管理の例を取り上げます。

たとえば、ユーザーのステータスを示す列挙型的オブジェクトを一度定義しておけば、以下のような処理で安全に状態管理が可能です。

const UserStatus = Object.freeze({
  ACTIVE: "active",
  SUSPENDED: "suspended",
  DELETED: "deleted"
});

function handleUserStatus(user) {
  switch (user.status) {
    case UserStatus.ACTIVE:
      return "ユーザーは有効です。";
    case UserStatus.SUSPENDED:
      return "ユーザーは一時的に利用停止です。";
    case UserStatus.DELETED:
      return "ユーザーアカウントは削除済みです。";
    default:
      return "未知のステータスです。";
  }
}

このようにswitch文やif文を使うと、どの状態に対してどんな処理をすれば良いかが明確になります。
ステータスの数が多くなったとしても、列挙型的なオブジェクトを整理しておけば、保守もしやすいでしょう。

さらに、列挙型はチーム開発でも役立ちます。
「ステータスが増えた場合は必ず列挙型の定義を更新する」というルールを徹底しておけば、値の追加や削除に対する影響範囲がわかりやすくなります。

実務での活用例：パラメータのバリデーション

APIのリクエストパラメータなどが限られた選択肢しか受け付けない場合にも、enum的な実装が非常に便利です。
例えば、リクエストのJSONに含まれる「性別」フィールドが "male" と "female" のみしか受け付けないと決まっているなら、それをオブジェクトで列挙型のようにまとめておけば安心です。

const Gender = Object.freeze({
  MALE: "male",
  FEMALE: "female"
});

function validateUserInput(data) {
  if (!data.gender) {
    return "性別は必須項目です。";
  }
  if (data.gender !== Gender.MALE && data.gender !== Gender.FEMALE) {
    return "性別の値が不正です。";
  }
  return "OK";
}

これによって、定義されていない値が来た時点で、即座にエラーとして処理できます。
もし第三の性別オプションが追加されたら、Gender の定義を変更すればバリデーションロジックも対応しやすいです。

こうした入力値のバリデーションは、プロジェクトの規模が大きくなるほど増えていく作業なので、enum的な設計をしておくメリットは大きいといえます。

スコープの考え方と衝突回避

JavaScriptでenumを疑似的に使う場合、スコープ（変数やオブジェクトの参照範囲）をどう管理するかも重要です。
グローバルに定義してしまうと、同じ名前の定数オブジェクトを別のファイルで定義して衝突する可能性があります。

例えば、別のライブラリが UserStatus という名前を使っている場合、うっかり上書きしてしまうリスクがあるかもしれません。
こうしたトラブルを避けるためには、モジュールシステム（ES ModulesやCommonJSなど）を活用して、それぞれのオブジェクトを別ファイルにまとめるといった工夫をするのが望ましいでしょう。

また、同一ファイル内でも名前の衝突が起こりにくいように、定義するenum的オブジェクトにユニークな接頭辞や命名規則を設ける方法もあります。
実務では、Status.User、Status.Payment、Status.Order など、名前空間を分割するイメージでまとめるケースも多いです。

// status.js
export const Status = Object.freeze({
  User: {
    ACTIVE: "active",
    SUSPENDED: "suspended"
  },
  Payment: {
    PENDING: "pending",
    COMPLETE: "complete"
  },
  Order: {
    NEW: "new",
    DONE: "done"
  }
});

このようにしておくと、スコープが衝突するリスクを下げられる上に、利用箇所では Status.User.ACTIVE のように見通しが良くなるというメリットがあります。

設計時の注意点と保守性

enum的な実装を行ううえで、注意すべきポイントや保守のヒントをまとめます。

まず、列挙型が増えすぎると、かえって複雑になりがちです。
あまりにも細かい値を全てenum的に定義しようとすると、コード量が膨大になります。
「本当にここまで列挙型化する必要があるのか？」を都度検討し、必要最低限にとどめるのが保守性の面で重要です。

次に、enumを使う目的が「誤った値を使わないようにする」だけであれば、TypeScriptの導入を検討するのも一手です。
TypeScriptはコンパイル時に「存在しないenum値を使っている」という誤りを教えてくれるので、JavaScriptにオブジェクトを使ってenumライクな機能を実装するよりも、型の恩恵を受けやすくなります。

さらに、enumを定義しても、その中身の値が運用中に変わる可能性があるなら、更新手順や運用ルールの策定が不可欠です。
「値を変更するときは、必ずコード全体を調べて影響範囲を確認する」など、チーム内のフローをしっかり決めておくことがトラブルを防ぐ鍵となります。

enum的なオブジェクトの定義は、最初から全機能を詰め込むよりも、徐々に拡張しながら運用する方法が向いているかもしれません。

列挙型実装におけるエラー処理のコツ

列挙型的な定数外の値が混ざると、想定外のエラーを起こすかもしれません。
そうしたエラーは、無視せずに適切な処理を行う必要があります。

たとえば、以下のように「未知の値が来たら例外をスローする」パターンを明示するのも一つの方法です。

function handleOrderStatus(status) {
  switch (status) {
    case "new":
      return "新しい注文です。";
    case "in_progress":
      return "処理中の注文です。";
    case "completed":
      return "完了した注文です。";
    default:
      throw new Error(`Unknown status: ${status}`);
  }
}

こうすることで、「enum的な値以外が使われたら即座に気づける」仕組みを作れます。
実務ではログに記録してデバッグしやすくしたり、ユーザーにわかりやすいメッセージを返したりするなどのアプローチをとるといいでしょう。

列挙型外の値に遭遇する状況が頻繁に起こる場合、定数定義やコード全体の整合性を見直す必要があるかもしれません。

列挙型と関数の組み合わせ

列挙型的なオブジェクトを用意している場合、その定数に関連するユーティリティ関数をまとめる手法もよく使われます。
例えば、ステータスに応じたメッセージやアイコンなどを返す小さなヘルパー関数を、同じファイルや同じオブジェクト内で管理するとわかりやすいでしょう。

const TaskStatus = Object.freeze({
  TODO: "todo",
  DOING: "doing",
  DONE: "done"
});

function getStatusMessage(status) {
  switch (status) {
    case TaskStatus.TODO:
      return "まだ着手していません。";
    case TaskStatus.DOING:
      return "作業中です。";
    case TaskStatus.DONE:
      return "作業完了です。";
    default:
      return "未知のステータスです。";
  }
}

function isTaskCompleted(status) {
  return status === TaskStatus.DONE;
}

こうすれば、列挙型で定義した値をどのように扱うかが同じ場所でまとまるので、コードの見通しがさらに良くなります。
新しいステータスを追加するときも、このファイルだけチェックすれば追加漏れがないか簡単に確認できます。

オブジェクトのキーリストを活用する

enumライクなオブジェクトを定義している場合、「定義したキーがいくつあるか」を取得したいケースも出てきます。
そんなときには**Object.keys()** や Object.values() を活用する方法があります。

const COLORS = Object.freeze({
  RED: "red",
  GREEN: "green",
  BLUE: "blue"
});

// キー一覧の取得
const colorKeys = Object.keys(COLORS); 
// -> ["RED", "GREEN", "BLUE"]

// 値一覧の取得
const colorValues = Object.values(COLORS); 
// -> ["red", "green", "blue"]

キーや値を取り出して反復処理ができるので、「すべてのステータスをUI上にプルダウンで表示する」みたいな場面で重宝します。
このようにJavaScriptの標準メソッドを組み合わせれば、列挙型に近い感覚で扱うことができるでしょう。

enum的実装とメンテナンスの効率化

enumライクなオブジェクトが増えてくると、それらを整理し、メンテナンスしやすくする仕組みが必要です。
コードがスパゲッティ化しないように、命名規則やファイル分割を工夫して、状態や定数を一元管理するのがポイントになります。

命名規則

大文字で始めたり、語尾に "Status" "Type" "Option" などを付けたりして、用途がひと目でわかるようにします。

ファイル分割

大きなプロジェクトでは、機能ごとにenum的なオブジェクトを分割し、enums/user.js や enums/order.js のようなディレクトリ構成にすることが多いです。

テストコードの整備

enum的なオブジェクトに変更があった場合は、関連機能が正しく動くかどうか、テストを通して確認できるようにしておくと安心です。

こうした工夫を組み合わせることで、enumライクなオブジェクトを大規模なプロジェクトでも効率よく保守できます。

まとめ

JavaScriptに公式のenum機能はありませんが、工夫次第で列挙型のような扱いを実装できます。
以下のポイントを抑えておくと、実務でも安心して活用できるでしょう。

1. オブジェクトとfreeze

シンプルにオブジェクトを使い、Object.freeze() で不変化するだけでも十分にenumっぽい効果が得られます。

2. Symbol

ユニークな識別子で扱いたい場合にはSymbolを活用できます。

3. TypeScriptのenum

より厳密な型チェックを行いたいなら、TypeScriptのenum機能を検討すると効果的です。

4. 設計・運用ルール

enum的なオブジェクトが増えすぎて混乱しないよう、ファイル分割や命名規則を定めましょう。

5. バリデーションやステータス管理

enumライクな実装によって、誤入力や誤操作を防ぎ、チーム開発でのコード品質を高められます。

JavaScriptの柔軟性を活かしつつ、列挙型のメリットも取り入れる形で運用できれば、可読性や保守性が格段に向上します。
初心者の方でも実装しやすい方法ばかりなので、ぜひ皆さんのプロジェクトでも試してみてください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
プログラミング言語の新着記事をチェック

【PHP】substrとは？文字列を抜き出す方法を初心者向けにわかりやすく解説