JavaScript、配列、TypeScriptで列挙値をラジオボタンに表示する
2024-04-02
JavaScript、配列、TypeScriptで列挙値をループしてラジオボタンに表示する方法
前提条件
このチュートリアルを理解するには、以下の知識が必要です。
- JavaScriptの基本構文
- 列挙型
準備
まず、TypeScriptファイルを作成し、以下のコードを追加します。
// 列挙型を定義
enum Gender {
Male,
Female,
Other,
}
// 配列に列挙値を格納
const genders: Gender[] = [Gender.Male, Gender.Female, Gender.Other];
// ラジオボタンの要素を取得
const radioButtons = document.querySelectorAll('input[type="radio"]');
ループ処理
次に、forEachループを使用して、genders配列をループ処理します。
genders.forEach((gender) => {
// ラジオボタンを作成
const radioButton = document.createElement('input');
radioButton.type = 'radio';
radioButton.name = 'gender';
radioButton.value = gender;
// ラジオボタンのラベルを作成
const label = document.createElement('label');
label.textContent = gender;
// ラジオボタンとラベルをDOMに追加
document.body.appendChild(radioButton);
document.body.appendChild(label);
});
このコードは、以下の処理を行います。
genders配列の各要素をループ処理します。- それぞれの要素に対して、
input要素とlabel要素を作成します。 input要素のtype属性をradioに設定します。label要素のテキストコンテンツを現在の列挙値に設定します。- 作成した
input要素とlabel要素をDOMに追加します。
実行
上記のコードを実行すると、以下のHTMLコードが生成されます。
<input type="radio" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" name="gender" value="Female">
<label for="female">Female</label>
<input type="radio" name="gender" value="Other">
<label for="other">Other</label>
このコードは、3つのラジオボタンとラベルを生成します。それぞれのラジオボタンは、Male、Female、Otherという列挙値に対応しています。
このチュートリアルでは、JavaScript、配列、およびTypeScriptを使用して、列挙値をループ処理し、ラジオボタンとして表示する方法について説明しました。この方法は、さまざまな状況で使用できます。
補足
- 上記のコードは、基本的な例です。必要に応じて、コードをカスタマイズできます。
- 例えば、ラジオボタンの初期選択状態を設定したり、ラジオボタンのクリックイベントを処理したりすることができます。
// 列挙型を定義
enum Gender {
Male,
Female,
Other,
}
// 配列に列挙値を格納
const genders: Gender[] = [Gender.Male, Gender.Female, Gender.Other];
// ラジオボタンの要素を取得
const radioButtons = document.querySelectorAll('input[type="radio"]');
// ループ処理
genders.forEach((gender) => {
// ラジオボタンを作成
const radioButton = document.createElement('input');
radioButton.type = 'radio';
radioButton.name = 'gender';
radioButton.value = gender;
// ラジオボタンのラベルを作成
const label = document.createElement('label');
label.textContent = gender;
// ラジオボタンとラベルをDOMに追加
document.body.appendChild(radioButton);
document.body.appendChild(label);
});
// ラジオボタンの選択状態を設定
const selectedGender = Gender.Female;
document.querySelector(`input[type="radio"][value="${selectedGender}"]`).checked = true;
// ラジオボタンのクリックイベント処理
radioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', () => {
// 選択された列挙値を取得
const selectedGender = radioButton.value as Gender;
// 処理を行う
console.log(`選択された性別: ${selectedGender}`);
});
});
- ラジオボタンの初期選択状態を設定する機能
- ラジオボタンのクリックイベント処理
説明
selectedGender変数を使用して、ラジオボタンの初期選択状態を設定しています。- ラジオボタンのクリックイベント処理では、選択された列挙値を取得し、処理を行うことができます。
実行
- 3つのラジオボタンが表示されます。
Femaleラジオボタンが初期選択状態になります。- ラジオボタンをクリックすると、選択された列挙値がコンソールに出力されます。
補足
- 例えば、ラジオボタンのスタイルを設定したり、選択された列挙値に基づいて処理を行うことができます。
列挙値をループ処理してラジオボタンを表示するその他の方法
map関数を使用する
const radioButtons = genders.map((gender) => {
const radioButton = document.createElement('input');
radioButton.type = 'radio';
radioButton.name = 'gender';
radioButton.value = gender;
const label = document.createElement('label');
label.textContent = gender;
return [radioButton, label];
});
// ラジオボタンとラベルをDOMに追加
radioButtons.forEach(([radioButton, label]) => {
document.body.appendChild(radioButton);
document.body.appendChild(label);
});
テンプレートリテラルを使用する
<template>
<input type="radio" name="gender" v-for="gender in genders" :value="gender">
<label>{{ gender }}</label>
</template>
<script>
const app = Vue.createApp({
data() {
return {
genders: [Gender.Male, Gender.Female, Gender.Other],
};
},
});
app.mount('#app');
</script>
この方法は、Vue.jsなどのフレームワークを使用して、テンプレートリテラルでラジオボタンを生成しています。
ライブラリを使用する
radio-buttonsなどのライブラリを使用して、ラジオボタンを簡単に生成することができます。
列挙値をループ処理してラジオボタンを表示する方法はいくつかあります。上記の方法を参考に、自分に合った方法を選択してください。
javascript arrays typescript
