はじめに
ウェブフォームでユーザーに選択肢を提供する際、<select>タグは非常に便利です。特に、サーバーサイドのThymeleafやクライアントサイドのJavaScriptを使うことで、フォームの選択肢を動的に管理し、ユーザーの選択に応じたデータ送信が可能になります。
この記事では、ThymeleafとJavaScriptを使って、<select>タグをどう活用するかをわかりやすい例を交えて解説します。フォームのデータ送信の方法を、具体的なサンプルコードを使って説明しますので、ぜひ参考にしてください。
Thymeleafでの<select>タグの使い方
サーバーサイドでテンプレートエンジンのThymeleafを使うと、サーバーから提供されるデータを使ってフォームの選択肢を動的に生成できます。例えば、データベースに保存されている都市のリストを表示する場合、以下のようなコードになります。
<form action="/submitCity" method="POST">
<label for="city">都市を選択:</label>
<select name="city" id="city">
<option th:value="${city.id}" th:text="${city.name}"></option>
</select>
<button type="submit">送信</button>
</form>-
解説:
-
このフォームは、サーバーサイドで提供されるcityオブジェクト（例: 都市のIDと名前）の情報を使って、都市を選ぶための選択肢を生成します。
-
${city.id}と${city.name}は、ThymeleafのテンプレートエンジンがサーバーサイドのJavaオブジェクトをHTMLに埋め込むための記法です。
-
送信されたフォームのcity値はサーバーに送られます。
-
例えば、city.idが「1」で、city.nameが「東京」であれば、選択肢は「東京」として表示され、その選択肢を選んだ状態でフォームが送信されます。
JavaScriptでの<select>タグの操作とリクエスト送信
JavaScriptを使うと、選択肢が変更された時に非同期でサーバーにリクエストを送ることができます。これにより、ページの再読み込みなしで、選択した都市に関するデータを即座に反映させることができます。以下は、選択された都市IDをサーバーに送信するJavaScriptのサンプルです。
<label for="citySelect">都市を選んでください:</label>
<select id="citySelect">
<option value="1">東京</option>
<option value="2">大阪</option>
<option value="3">京都</option>
</select>
<script>
// セレクトボックスの変更を監視
document.getElementById("citySelect").addEventListener("change", function() {
const selectedCityId = this.value; // 選ばれた都市のIDを取得
// 非同期リクエストを送信（AJAX）
fetch('/submitCity', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ cityId: selectedCityId }) // 選ばれた都市のIDを送信
})
.then(response => response.json()) // レスポンスをJSONで受け取る
.then(data => {
console.log('送信成功:', data);
})
.catch(error => {
console.error('送信エラー:', error);
});
});
</script>-
解説:
-
ユーザーが<select>タグで都市を選ぶと、その選択内容（都市ID）がchangeイベントによって取得されます。
-
fetchメソッドを使用して、選ばれた都市IDをJSON形式でサーバーに送信します。このリクエストは非同期で行われ、ページが再読み込みされません。
-
サーバーからのレスポンスを受け取ると、コンソールに送信結果が表示されます。
-
この方法を使えば、ユーザーが選んだ都市に関連する情報を即座に表示したり、サーバー側で動的にデータを更新したりすることができます。
ThymeleafとJavaScriptの違い
-
Thymeleafは、サーバー側でデータ（メニュー）を準備してユーザーに提供し、ユーザーはそれを受け取って選ぶだけのシンプルな仕組み。まるでレストランでのメニュー選択のように、事前に用意された選択肢の中から選ぶ形です。
-
JavaScriptは、ユーザーが選択肢を選んだり変更したりする際に、その反応をリアルタイムで反映させる仕組み。まるでファーストフード店で注文内容をその場で変更するように、インタラクティブに動作します。
Thymeleafの例：
レストランでの注文方法
Thymeleafは、サーバーサイドでデータを準備して、それを客に提供する役割を果たします。これをレストランの注文システムに例えると、こうなります
-
サーバー側（シェフ）：レストランのシェフがメニューを作って、料理を提供します。
-
お客さん：お客さんはレストランに来て、あらかじめ用意されているメニューの中から好きな料理を選びます。
サーバー（シェフ）が料理を作ってメニューを提供し、客（ユーザー）はそのメニューを見て選ぶだけです。お客さんが選んだ料理を店員が受け取って、キッチンに持って行きます。そして、サーバーは料理を完成させて提供します。
Thymeleafのポイント：
-
サーバー（シェフ）が「どの料理を提供するか」を決め、クライアント（お客さん）はそれを選ぶだけ。
-
サーバー側で動的にメニュー（HTML）を作り、その後にデータが送られます。
JavaScriptの例：
ファーストフード店での注文方法
JavaScriptは、クライアントサイドで動的にデータを扱うものです。ファーストフード店の注文システムに例えると、こうなります：
-
クライアント（お客さん）：お客さんは自分の好きなトッピングを追加して注文をカスタマイズできます。
-
お店：店員は、そのお客さんが選んだトッピングや注文内容を確認し、リアルタイムで調理します。
ここでは、お客さんがメニューを選び、トッピングを加える際に「リアルタイムで変わる」注文が可能です。例えば、ドリンクを選ぶ際に「アイスかホット」を選ぶと、それに応じて注文内容が変わります。このように、変更が即座に反映されるのが特徴です。
JavaScriptのポイント：
-
ユーザー（お客さん）が自分で選んだトッピング（選択肢）をリアルタイムで反映させる。
-
サーバーには変更内容を逐次送信して、動的に反映される仕組み。
この2つを適切に使い分けることで、ユーザーにとって快適なインターフェースを提供できます。サーバーサイドでの処理が必要な場合はThymeleaf、クライアントサイドでリアルタイムのインタラクションを重視する場合はJavaScriptを使用するとよいでしょう。
最後に
<select>タグを使ったフォーム作成には、ThymeleafとJavaScriptの2つの方法があります。それぞれの技術には適した用途があります。Thymeleafはサーバーサイドでのデータ処理が得意で、JavaScriptはクライアントサイドでのインタラクションや非同期リクエストの処理に最適です。
状況に応じてどちらの技術を選ぶかが、効率的なフォーム作成とユーザー体験を実現する鍵です。この記事のサンプルを参考に、実際の開発に役立ててください。
