JavaScript enumの使い方7選！初心者でも簡単に理解できる徹底解説

はじめに
●JavaScript enumとは？
- ○enumの基本概念
●JavaScript enumの作り方
- ○サンプルコード1：オブジェクトを使ったenumの作成
- ○サンプルコード2：凍結オブジェクトを使ったenumの作成
●JavaScript enumの使い方
- ○サンプルコード3：enumを使ったswitch文
- ○サンプルコード4：enumを使った条件分岐
●JavaScript enumの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読むことで、JavaScriptのenumを使いこなすことができるようになります。

enumとは、列挙型と呼ばれるデータ型で、プログラミングにおいて一連の固定値を表現するのに便利です。

JavaScriptにはネイティブなenum型が存在しないため、初心者の方々が混乱することがあります。

そこで、この記事ではenumの基本概念や、その作り方や使い方、応用例、注意点、カスタマイズ方法を徹底解説します。

サンプルコードも用意しているので、簡単に実践できる内容となっています。

●JavaScript enumとは？

○enumの基本概念

JavaScriptにおけるenumは、一連の固定値を表現するために使われます。

他のプログラミング言語では、enumというデータ型が存在しますが、JavaScriptにはネイティブなenum型が存在しないため、オブジェクトを使って代用する方法が一般的です。

●JavaScript enumの作り方

○サンプルコード1：オブジェクトを使ったenumの作成

このコードでは、オブジェクトを使ってenumを作成しています。

この例では、季節を表現するenumを作成しています。

const SEASONS = {
  SPRING: '春',
  SUMMER: '夏',
  AUTUMN: '秋',
  WINTER: '冬'
};

console.log(SEASONS.SPRING); // "春"

○サンプルコード2：凍結オブジェクトを使ったenumの作成

このコードでは、Object.freezeを使って、enumオブジェクトを凍結しています。

これにより、enumの値が変更されることを防ぐことができます。

const SEASONS = Object.freeze({
  SPRING: '春',
  SUMMER: '夏',
  AUTUMN: '秋',
  WINTER: '冬'
});

console.log(SEASONS.SPRING); // "春"

●JavaScript enumの使い方

○サンプルコード3：enumを使ったswitch文

このコードでは、enumを使ってswitch文を使った条件分岐をしています。

この例では、季節ごとに異なるメッセージを出力しています。

const season = SEASONS.SUMMER;

switch (season) {
  case SEASONS.SPRING:
    console.log('花が咲く季節です。');
    break;
  case SEASONS.SUMMER:
    console.log('夏休みの季節です。');
    break;
  case SEASONS.AUTUMN:
    console.log('紅葉の季節です。');
    break;
  case SEASONS.WINTER:
    console.log('雪が降る季節です。');
    break;
  default:
    console.log('不明な季節です。');
}

○サンプルコード4：enumを使った条件分岐

このコードでは、enumを使ってif文を使った条件分岐をしています。

この例では、季節が夏かどうかを判定しています。

const season = SEASONS.SUMMER;

if (season === SEASONS.SUMMER) {
  console.log('夏休みの季節です。');
} else {
  console.log('夏休みではありません。');
}
const season = SEASONS.SUMMER;

if (season === SEASONS.SUMMER) {
  console.log('夏休みの季節です。');
} else {
  console.log('夏休みではありません。');
}

●JavaScript enumの応用例

○サンプルコード5：enumを使った状態管理

このコードでは、enumを使って状態管理を行っています。

この例では、トラフィックライトの色を表現するenumを使って、現在の状態を管理しています。

const TrafficLight = Object.freeze({
  RED: '赤',
  YELLOW: '黄',
  GREEN: '緑'
});

let currentLight = TrafficLight.RED;

function changeLight() {
  switch (currentLight) {
    case TrafficLight.RED:
      currentLight = TrafficLight.GREEN;
      break;
    case TrafficLight.YELLOW:
      currentLight = TrafficLight.RED;
      break;
    case TrafficLight.GREEN:
      currentLight = TrafficLight.YELLOW;
      break;
  }
  console.log(`トラフィックライトは${currentLight}に変わりました。`);
}

changeLight(); // "トラフィックライトは緑に変わりました。"
changeLight(); // "トラフィックライトは黄に変わりました。"
changeLight(); // "トラフィックライトは赤に変わりました。"

○サンプルコード6：enumを使ったイベント処理

このコードでは、enumを使ってイベント処理を行っています。

この例では、マウスのボタンの種類を表現するenumを使って、クリックイベントの処理を行っています。

const MouseButton = Object.freeze({
  LEFT: '左',
  MIDDLE: '中',
  RIGHT: '右'
});

function handleButtonClick(button) {
  switch (button) {
    case MouseButton.LEFT:
      console.log('左ボタンがクリックされました。');
      break;
    case MouseButton.MIDDLE:
      console.log('中ボタンがクリックされました。');
      break;
    case MouseButton.RIGHT:
      console.log('右ボタンがクリックされました。');
      break;
    default:
      console.log('不明なボタンがクリックされました。');
  }
}

handleButtonClick(MouseButton.LEFT); // "左ボタンがクリックされました。"

○サンプルコード7：enumを使ったデータ整形

このコードでは、enumを使ってデータの整形を行っています。

この例では、曜日を表現するenumを使って、日付データを整形して出力しています。

const DaysOfWeek = Object.freeze({
  SUNDAY: '日曜日',
  MONDAY: '月曜日',
  TUESDAY: '火曜日',
  WEDNESDAY: '水曜日',
  THURSDAY: '木曜日',
  FRIDAY: '金曜日',
  SATURDAY: '土曜日'
});

function formatDate(date) {
  const dayOfWeek = DaysOfWeek[date.getDay()];
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 (${dayOfWeek})`;
}

const date = new Date();
console.log(formatDate(date)); // 例："2023年5月3日 (水曜日)"