JavaScriptでenum値をラジオボタンで表示する

JavaScriptでは、enum値を配列に変換し、その配列をループしてラジオボタンを作成することができます。

enum値を定義する

enum MyEnum {
  Value1,
  Value2,
  Value3
}

enum値を配列に変換する

const enumValues = Object.values(MyEnum);

配列をループしてラジオボタンを作成する

enumValues.forEach((value) => {
  const radioInput = document.createElement('input');
  radioInput.type = 'radio';
  radioInput.name = 'myEnum';
  radioInput.value = value;

  const label = document.createElement('label');
  label.textContent = value;

  const container = document.getElementById('radioContainer');
  container.appendChild(radioInput);
  container.appendChild(label);
});

HTMLのラジオボタンコンテナ

<div id="radioContainer"></div>

解説

1. enum値の定義
   MyEnumという名前のenumを定義します。
2. enum値を配列に変換
   Object.values()メソッドを使って、enum値を配列に変換します。
3. 配列をループしてラジオボタンを作成
   
   • forEach()メソッドを使用して、配列の各要素をループします。
   • 各要素に対して、ラジオボタンとラベルを作成します。
   • ラジオボタンの name 属性を同じ値に設定することで、グループ化します。
   • ラジオボタンの value 属性にenum値を割り当てます。
   • ラジオボタンとラベルをHTMLのコンテナに追加します。

TypeScriptでの使用

TypeScriptでは、enum値を直接配列に変換することができます。

enum MyEnum {
  Value1,
  Value2,
  Value3
}

const enumValues: MyEnum[] = Object.values(MyEnum);

あとはJavaScriptと同じようにループしてラジオボタンを作成します。

JavaScript、配列、TypeScriptでのenum値をラジオボタンで表示する

JavaScript

コード

enum MyEnum {
  Value1,
  Value2,
  Value3
}

const enumValues = Object.values(MyEnum);

enumValues.forEach((value) => {
  const radioInput = document.createElement('input');
  radioInput.type = 'radio';
  radioInput.name = 'myEnum';
  radioInput.value = value;

  const label = document.createElement('label');
  label.textContent = value;

  const container = document.getElementById('radioContainer');
  container.appendChild(radioInput);
  container.appendChild(label);
});

解説

1. enumを定義する。
2. Object.values()でenum値を配列に変換する。
3. 配列をループし、各値に対してラジオボタンとラベルを作成する。

配列

const enumValues = ['Value1', 'Value2', 'Value3'];

enumValues.forEach((value) => {
  // ラジオボタンとラベルを作成するコードは同じ
});

解説
直接配列を定義し、ループする。

enum MyEnum {
  Value1,
  Value2,
  Value3
}

const enumValues: MyEnum[] = Object.values(MyEnum);

enumValues.forEach((value) => {
  // ラジオボタンとラベルを作成するコードは同じ
});

解説
TypeScriptでは、enum値を直接配列に変換できる。

共通点

• TypeScriptでは、enum値を直接配列に変換できるため、コードが簡潔になる。
• すべての場合で、配列をループしてラジオボタンを作成するロジックは同じ。

注意

• HTMLのコンテナにラジオボタンとラベルを追加して表示する。
• value属性にenum値を割り当てて、選択された値を取得できるようにする。
• name属性を同じ値に設定することで、ラジオボタンをグループ化し、同時に選択できないようにする。

enum MyEnum {
  Value1,
  Value2,
  Value3
}

const enumValues = Object.values(MyEnum);

enumValues.forEach((value) => {
  const radioInput = document.createElement('input');
  radioInput.type = 'radio';
  radioInput.name = 'myEnum';
  radioInput.value = value;

  const label = document.createElement('label');
  label.textContent = value;

  const container = document.getElementById('radioContainer');
  container.appendChild(radioInput);
  container.appendChild(label);
});

const enumValues = ['Value1', 'Value2', 'Value3'];

enumValues.forEach((value) => {
  // ラジオボタンとラベルを作成するコードは同じ
});

enum MyEnum {
  Value1,
  Value2,
  Value3
}

const enumValues: MyEnum[] = Object.values(MyEnum);

enumValues.forEach((value) => {
  // ラジオボタンとラベルを作成するコードは同じ
});