0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JavaScript でのenum のような定義とそれを切り分けるSwitch

Last updated at Posted at 2022-08-22

こんばんは、久々の投稿です。

はじまり

JavaScriptで input の値 が'A','B','C'のどれかあるかチェックしたい時に

JavaScript
if(input == 'A' || input == 'B' || input == 'C') {​​
   //処理
}​​

何かいい方法はないですかと聞かれたので

最近の自分の書き方を紹介させていただいたので、こちらでも紹介させていただこうと思います。

おすすめ

上記の質問だとすると、Switch文をオススメします。
またswitchの数字で切り分ける方法を避けるために、以下の方法をおすすめしました
それは、enum 定義(JavaScript)ではenum は無いので、連想配列で実施。

ポイント

・Switch文を用いて場合分けを切り出す
・enum(の様な) 適切な定義を行う

コードは、以下の通り

HTML
<h1>JavaScriptでEnumの振る舞いを実装する</h1>

<script>
// 定義 なので、constを用いる
const FRUIT_ITEMS_ENUM = {​ 
              ORANGE : {
                   rawValue : 1,
            string : "オレンジ",
                   func : function () {
                       alert("オレンジ大好き");
                   }
              },
              BANANA : {
                   rawValue : 2,
            string : "バナナ"
              },
              PEACH  : {
                   rawValue : 3,
            string : "ピーチ"
              },
              STRAWBERRY : {
                   rawValue : 4,
            string : "いちご"
              },
            }​;
var fruit = 1;
// スイッチ文
switch (fruit) {​ 
  case FRUIT_ITEMS_ENUM.ORANGE.rawValue: 
    /// 実行処理など
    FRUIT_ITEMS_ENUM.ORANGE.func();
    document.write(FRUIT_ITEMS_ENUM.ORANGE.string);
    break;
  case FRUIT_ITEMS_ENUM.BANANA.rawValue:
    document.write(FRUIT_ITEMS_ENUM.BANANA.string);
    break;
  case FRUIT_ITEMS_ENUM.PEACH.rawValue:
    document.write(FRUIT_ITEMS_ENUM.PEACH.string);
    break;
  case FRUIT_ITEMS_ENUM.STRAWBERRY.rawValue: 
    document.write(FRUIT_ITEMS_ENUM.STRAWBERRY.string);
    break;
  default: 
    document.write("その他 果物");
    break;
}​
</script>

この書き方は個人的に最近ハマっており、上記のように定義(いわゆるenum 風にユニークな値)を作っておくことで、その処理に意味を持たせるために適切な名前をつける様に書いておくと、後でわかりやすく「Switch文と定義」と意味合いを持たせておくと可読性も上がり、後で、数字がなんの処理なのかということもないので、使い勝手がいいと思います。

point

定義は、const を用いる
定義を、大文字とアンダーバーを用いる
enum ぽさを出すためにrawValueを用いる
上記の形だと、function なども格納ができるので、用途としてはかなり便利です

まとめ

Switch文と定義 を設定することで、後々読み直した際ややこしいことにならないように可読性が上げるメリットがありかなり便利です。ぜひよかったらやってみてください。

0
3
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?