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

JavaScriptで列挙型(Enum)を定義する方法:Object.freezeを使った実装テクニック

JavaScriptには、JavaやTypeScriptのような列挙型(Enum)がネイティブ機能として用意されていません。しかし、Object.freeze()メソッドを活用することで、列挙型と同等の動作を実現できます。

具体的な手順は以下の通りです。

  1. すべての列挙値(プロパティ)を持つオブジェクトを作成する
  2. Object.freeze()でそのオブジェクトを凍結し、新しいプロパティの追加や既存プロパティの変更・削除を防ぐ

コード例

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

// 使用例
let carColor = Color.BLUE;
console.log(carColor); // 2

// 新しい色を追加しようとしても、エラーは発生せず無視される(厳格モードではエラー)
Color.WHITE = 5;
console.log(Color);

出力結果

{ RED: 1, BLUE: 2, GREEN: 3, YELLOW: 4 }

ポイント解説

上記の例では、Color.WHITE = 5;という行で新しいプロパティを追加しようとしていますが、オブジェクトがObject.freeze()によって凍結されているため、この操作は失敗します。通常モードではエラーなく静かに無視されますが、'use strict'(厳格モード)ではTypeErrorがスローされる点に注意してください。

このようにObject.freeze()を使えば、意図しない値の追加や改変から列挙型オブジェクトを保護でき、定数管理をより安全に行うことが可能になります。なお、TypeScriptを使用できる環境であれば、ネイティブのenum構文も検討する価値があります。

  1. JavaScriptのMapオブジェクトとは?特徴と基本的な使い方を解説

    JavaScriptのMapオブジェクトとは MDNドキュメントによると、Mapオブジェクトは「キーと値のペア」を保持し、キーが挿入された元の順序を記憶するデータ構造です。任意の値(オブジェクトとプリミティブ値の両方)を、キーまたは値として自由に使用できます。 ここで特に重要なポイントは、オブジェクトそのものもMapのキーとして使えるという点です。これは通常のJavaScriptオブジェクトでは実現できない動作です。一般的なJSオブジェクトでは、キーとして使用できるのはプリミティブ値(文字列や数値など)のみに限られます。 さらに、Mapが特定の場面で役立つもう一つの大きな特徴は、反復可能(it

  2. JavaScriptのImage()オブジェクトとは?使い方とサンプルコードを解説

    JavaScriptにおけるImage()オブジェクトは、HTMLの<img>要素を表すオブジェクトです。このオブジェクトを使うことで、JavaScriptから動的に画像を生成し、Webページに追加することができます。Image()コンストラクタには、引数として画像の幅と高さをピクセル単位で指定できます。また、生成した画像オブジェクトのsrcプロパティに画像のURLを設定することで、画像を読み込むことが可能です。Image()オブジェクトの基本的な使い方以下は、JavaScriptでImage()オブジェクトを使用するサンプルコードです。コード例<!DOCTYPE html&