(Sample)
こんにちは。ゆうせいです。
今回は、新人エンジニアの皆さんに向けて、HTMLとJavaScriptを使って「価格の範囲」を指定できる便利な機能の作り方を丁寧に解説します。実際の例として、「自動車の価格を選ぶスライダー」を使った簡単なWebページを紹介します。
「スライダーってなに?」「noUiSliderって何に使うの?」と思った方も安心してください。一からしっかり説明します!
スライダーとは?そしてnoUiSliderって?
スライダーとは?
スライダーとは、マウスでドラッグして値を指定できるUI(ユーザーインターフェース)のことです。よく音量調整や明るさの設定などで見かけますよね。
自動車の購入価格を「最低100万円〜最高500万円」といった形で直感的に選べるようにしたい場合、スライダーはとても便利です。
noUiSliderとは?
noUiSliderは、そのスライダーを簡単にWebサイトに追加できるJavaScriptライブラリです。見た目もきれいで、カスタマイズ性が高いのが特徴です。
たとえば、
start: [100, 500]
と書けば、「100万円〜500万円の間を選べるスライダー」がすぐに作れます。
実際のコードの構造を見てみましょう
以下の3つの部分に分けて考えてみましょう。
① HTMLの役割:画面の構造を作る
<h2>自動車価格を選択してください(単位:万円)</h2>
<div id="slider"></div>
<div class="output" id="priceOutput">選択範囲:100万円 ~ 500万円</div>
#slider
がスライダーを表示する場所です。#priceOutput
が選んだ価格帯を画面に表示します。
<form id="priceForm" action="/search" method="get">
<input type="hidden" name="min" id="minHidden" value="100">
<input type="hidden" name="max" id="maxHidden" value="500">
<button type="submit">検索</button>
</form>
hidden
タグは見えない入力欄で、選んだ価格をサーバーに送るために使います。
② CSSの役割:見た目を整える
#slider {
margin: 20px 0;
}
.output {
margin-top: 10px;
font-weight: bold;
}
- スライダーに余白を入れたり、文字を太字にしたりと、デザインを調整しています。
③ JavaScriptの役割:動きをつける
noUiSlider.create(slider, {
start: [100, 500],
connect: true,
range: {
'min': 0,
'max': 1000
},
step: 10,
format: {
to: value => Math.round(value),
from: value => Number(value)
}
});
解説:
start
: 初期の範囲(ここでは100万円~500万円)range
: 選べる最小と最大(0万円〜1000万円)step
: スライダーを動かす単位(10万円ごと)connect: true
: 範囲選択できるようにする設定
どうやって値を取得してるの?
slider.noUiSlider.on('update', function (values) {
const min = values[0];
const max = values[1];
output.textContent = `選択範囲:${min}万円 ~ ${max}万円`;
minHidden.value = min;
maxHidden.value = max;
});
この部分が一番のポイント!
update
イベントは、スライダーが動かされたときに発動します。values[0]
とvalues[1]
に、それぞれ「現在選ばれている最小値」と「最大値」が入ります。textContent
で画面表示を更新し、minHidden.value
などでフォームに反映しています。
たとえるなら、スライダーを動かすたびに「付箋を貼り替える」イメージです。
メリットとデメリットを整理
メリット | デメリット |
---|---|
直感的に範囲を選べる | JavaScriptが無効な場合は機能しない |
ユーザー体験がよい | モバイルだと操作がやや難しいことがある |
フォーム送信との連携が簡単 | noUiSliderの読み込みが必須 |
まとめ:新人エンジニアのあなたへアドバイス!
このコードは、Webアプリ開発の基本「HTML+CSS+JavaScript」がバランスよく使われた実例です。フォームとJavaScriptが連携しているところがとても重要です。
まずは以下の観点で復習してみましょう:
- DOM操作とは何か?
- イベントリスナー(
on('update')
)の仕組み - フォームの送信とinput hiddenの意味
次のステップとしては、以下のような応用に挑戦してみてください!
- 選択した価格帯に応じて画像を切り替える
- スライダーの範囲をユーザー入力で変更可能にする
- Vue.jsやReactと組み合わせて使う