JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの列挙型（Enum）とは？オブジェクトを使った実装方法をわかりやすく解説

JavaScriptには列挙型が組み込まれていない

JavaScriptは、TypeScriptやJavaなどの言語と異なり、列挙型（Enum）を標準機能としてサポートしていません。そのため、JavaScriptで列挙型のようなものを実現するには、オブジェクトを使って自前で実装する必要があります。

本記事では、オブジェクトを利用してJavaScriptで列挙型を再現する方法を、実際のコード例とともにわかりやすく解説します。

オブジェクトで列挙型を実現する基本の考え方

JavaScriptで列挙型を作る最もシンプルな方法は、キー（名前）と値をペアにしたオブジェクトを定義することです。以下の例では、色の名前をキー、連番となる数値を値として持つ「color」オブジェクトを定義し、列挙型のように扱っています。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
</style>
</head>
<body>
<h1>JavaScriptの列挙型</h1>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると色の値が表示されます</h3>
<script>
   let resEle = document.querySelector(".result");
   let color = {
      orange: 1,
      red: 2,
      green: 3,
      blue: 4,
      pink: 5,
   };
   document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML += "color.orange = " + color.orange + "<br>";
      resEle.innerHTML += "color.red = " + color.red + "<br>";
      resEle.innerHTML += "color.green = " + color.green + "<br>";
      resEle.innerHTML += "color.blue = " + color.blue + "<br>";
      resEle.innerHTML += "color.pink = " + color.pink + "<br>";
   });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、画面にはボタンと説明文が表示されます。

JavaScriptの列挙型（Enum）とは？オブジェクトを使った実装方法をわかりやすく解説

そして、「ここをクリック」ボタンを押すと、各色に割り当てられた値が順番に出力されます。

JavaScriptの列挙型（Enum）とは？オブジェクトを使った実装方法をわかりやすく解説

より安全な列挙型にしたい場合：Object.freezeの活用

通常のオブジェクトは後からプロパティを追加・変更・削除できてしまうため、厳密な列挙型としては不完全です。そこで便利なのがObject.freeze()です。オブジェクトを凍結することで、意図しない変更を防ぎ、不変（イミュータブル）な列挙型として扱えます。

const Color = Object.freeze({
  ORANGE: 1,
  RED: 2,
  GREEN: 3,
  BLUE: 4,
  PINK: 5,
});

このようにObject.freeze()を組み合わせることで、JavaScriptでもより信頼性の高い列挙型を実現できます。定数管理やステータス管理など、値の取りうる範囲を限定したい場面でぜひ活用してみてください。

  1. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for

  2. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照