JavaScriptでEnumを使う際の注意点: 変更を防ぐためのベストプラクティス

2024-04-05

JavaScriptにおけるEnum定義の変更を防ぐ方法

オブジェクトリテラルを使用する

最も簡単な方法は、オブジェクトリテラルを使用してEnumを定義することです。

const MyEnum = {
  A: 1,
  B: 2,
  C: 3,
};

この方法では、オブジェクトのプロパティを直接変更しようとしても、厳格モードではエラーが発生します。

constキーワードを使用してEnumを定義することもできます。

const MyEnum = {
  A: 1,
  B: 2,
  C: 3,
};

この方法では、MyEnum変数を再代入することはできません。

シンボルを使用する

const MyEnum = {
  A: Symbol("A"),
  B: Symbol("B"),
  C: Symbol("C"),
};

シンボルはユニークな値なので、Enumの値が誤って変更される可能性は低くなります。

ライブラリを使用する

Enum定義を管理するライブラリもいくつかあります。

これらのライブラリを使用すると、Enum定義をより簡単に管理することができます。

JavaScriptでEnum定義を変更しないようにするには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあるので、プロジェクトの要件に合わせて最適な方法を選択する必要があります。

const MyEnum = {
  A: 1,
  B: 2,
  C: 3,
};

// エラーが発生
MyEnum.A = 4;

constキーワードを使用する

const MyEnum = {
  A: 1,
  B: 2,
  C: 3,
};

// エラーが発生
MyEnum = {
  A: 4,
  B: 5,
  C: 6,
};

const MyEnum = {
  A: Symbol("A"),
  B: Symbol("B"),
  C: Symbol("C"),
};

// エラーが発生
MyEnum.A = Symbol("A");

EnumJS

const MyEnum = EnumJS.create({
  A: 1,
  B: 2,
  C: 3,
});

// エラーが発生
MyEnum.A = 4;

typescript-enum

const MyEnum = typescriptEnum.create({
  A: 1,
  B: 2,
  C: 3,
});

// エラーが発生
MyEnum.A = 4;

補足

上記のサンプルコードは、あくまで基本的な使い方を示しています。詳細については、各方法の参考資料を参照してください。

JavaScriptにおけるEnum定義の変更を防ぐその他の方法

フリーズを使用する

Object.freeze()メソッドを使用して、Enumオブジェクトをフリーズすることができます。

const MyEnum = {
  A: 1,
  B: 2,
  C: 3,
};

Object.freeze(MyEnum);

// エラーが発生
MyEnum.A = 4;

プロキシを使用する

プロキシオブジェクトを使用して、Enumオブジェクトへのアクセスを制御することができます。

const MyEnum = {
  A: 1,
  B: 2,
  C: 3,
};

const proxy = new Proxy(MyEnum, {
  get: (target, property) => {
    if (property in target) {
      return target[property];
    } else {
      throw new Error(`プロパティ '${property}' は存在しません。`);
    }
  },
  set: (target, property, value) => {
    throw new Error(`プロパティ '${property}' は変更できません。`);
  },
});

// エラーが発生
proxy.A = 4;

クラスを使用する

class MyEnum {
  constructor(value) {
    this.value = value;
  }
}

const A = new MyEnum(1);
const B = new MyEnum(2);
const C = new MyEnum(3);

// エラーが発生
A.value = 4;