JavaScriptでenum(列挙型)を定義する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでenum(列挙型)を定義する方法について解説しています。列挙型は複数の定数を管理するのに使われます。JavaScriptで列挙型を定義する方法と、連想配列についても合わせて覚えておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでenum(列挙型)を定義する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

enum(列挙型)を定義する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

enum(列挙型)とは

列挙型には

  • 334列挙型
  • 連想配列
  • 辞書型
  • ハッシュ型

等々、色々な言語で色々な型がありますよね。その中で今回はenum(列挙型)について説明いたします。

enum(※enumerationの略)とは、複数の定数に順番を付けて管理するものです。言語によっては、色々なメソッドが用意されていたりするので、それぞれの言語で改めて調べてみて下さい。

では、JavaScriptでのenumはどの様なものかと言うと、残念ながらJavaScriptではenumの提供は無いので、自身で代わりの物を作成する必要があります。

 

enumの使い方

JavaScriptでの書き方の説明の前に、enumの利用シチュエーションを考えてみましょう。良く使われるのは、都道府県や職業などの一覧をプルダウンにして選択してもらうときなどに利用するとプログラミングミスを少なくできます。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptでenumを定義する方法

では、具体的にJavaScriptでenumを実装する方法を説明したいと思います。まず、先ほど説明した通り、JavaScript上でenumとしての型は定義されていないので、連想配列の形式を利用して定義します。

単純にenumの元だけを作成するのであれば、例えば下記の様に作成します。

var BLOOD = { A: 1, B: 2, O: 3, AB: 4};

連想配列で、キーを定義して、値に数値を順番に着けている感じですね。実際に利用するときは、これだけでは意味がないのでクラス化してAddメソッドやeachメソッドなどを追加した方が便利です。

 

連想配列とは

先ほども出てきた連想配列とは、キー項目と値を利用して値を定義するもので、先ほどは値に数値を利用していましたが、文字列やオブジェクトなどでも利用可能です。それらを利用した例を下記に示しておきます。

<!DOCTYPE html>
<html>
<head></head>
<body>
<select name="name" id="select" onChange="blodselct()">
<option value="">選択して下さい</option>
</select>
<p id="memo">選ばれた値を表示</p>

<script type="text/javascript">
var BLOOD = { A : {value : 1, string : 'A', memo : 'A型は几帳面な性格です'},
B : {value : 2, string : 'B', memo : 'B型は自由な性格です'},
O : {value : 3, string : 'O', memo : 'O型はおおらかな性格です'},
AB : {value : 4, string : 'AB', memo : 'AB型は神秘的な性格です'}
};
// 子要素として追加
var select_elm = document.getElementById('select')

// optionタグを作成する
var option = document.createElement("option");
// optionタグのテキスト
option.text = BLOOD.A.string;
// optionタグのvalue
option.value = BLOOD.A.value;
// selectタグの子要素にoptionタグを追加する
select_elm.appendChild(option);

// optionタグを作成する
var option = document.createElement("option");
// optionタグのテキスト
option.text = BLOOD.B.string;
// optionタグのvalue
option.value = BLOOD.B.value;
// selectタグの子要素にoptionタグを追加する
select_elm.appendChild(option);

// optionタグを作成する
var option = document.createElement("option");
// optionタグのテキスト
option.text = BLOOD.O.string;
// optionタグのvalue
option.value = BLOOD.O.value;
// selectタグの子要素にoptionタグを追加する
select_elm.appendChild(option);

// optionタグを作成する
var option = document.createElement("option");
// optionタグのテキスト
option.text = BLOOD.AB.string;
// optionタグのvalue
option.value = BLOOD.AB.value;
// selectタグの子要素にoptionタグを追加する
select_elm.appendChild(option);

function blodselct(){
var select_elm = document.getElementById('select')
var memo_elm = document.getElementById('memo')

index = select_elm.selectedIndex;
if (index != 0){
href = select_elm.options[index].value;
switch (href.toString(10)) {
case BLOOD.A.value.toString(10):
memo_elm.textContent = BLOOD.A.memo;
break;
case BLOOD.B.value.toString(10):
memo_elm.textContent = BLOOD.B.memo;
break;
case BLOOD.O.value.toString(10):
memo_elm.textContent = BLOOD.O.memo;
break;
case BLOOD.AB.value.toString(10):
memo_elm.textContent = BLOOD.AB.memo;
break;
}
}
}
</script>
</body>
</html>

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。