(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と組み合わせて使う