【javascript基礎】自動見積フォームの仕組みを理解する

純粋なJavaScript(Vanilla JS)

バニラJS（Vanilla JS）とは、JavaScriptのフレームワークやライブラリを使わずに、純粋なJavaScriptのみで書かれたコードで、外部のライブラリを使わずに、ブラウザの標準機能を活用して書かれたJavaScriptです。バニラJSを使うことで、フレームワークに依存することなく、より軽量で高速なコードを書くことができる一方で、開発の手間が増えることもあります。

フロントコードの準備

仮で下記コードを用意します。オプションはまだまだ増やせますが紹介は一部、コードもinput要素を非表示にして、labelを使用してカスタムなスタイリングを適用するなど処理もしますが、下記は超単純なコードで、VanillaJSのご紹介をメインとさせていただきます。

<div id="quote__total">Total: ¥0</div>
<form action="" id="quote__form">
  <div>
    <p>価格</p>
      <input type="radio" name="price" value="0">0
      <input type="radio" name="price" value="1000">1000
      <input type="radio" name="price" value="2000">2000
    </div>
</form>

JavaScriptを準備

それでは価格で選択したradio要素がquote__totalへ自動計算される仕組みをみていきたいと思います。

const quoteForm = document.getElementById('quote__form');
const totalElement = document.getElementById('quote__total');

function quoteTotal(){
  let total = 0;
  const price = document.querySelector('input[name="price"]:checked');
  if (price) total += Number(price.value);

  totalElement.innerText = `Total: ¥${total}`;

};
quoteForm.addEventListener('change', quoteTotal);

単純な処理です。処理の流れをご紹介致します。

計算処理の流れ

それでは価格で選択したradio要素がquote__totalへ自動計算される仕組みをみていきたいと思います。

• quoteForm: id="quote__form"を持つフォーム要素とtotalElement: id="quote__total"を持つ要素を取得します。

• totalを0で初期化します。これは、選択されたオプションの価格を加算するための変数です。

• document.querySelector('input[name="price"]:checked'): 名前がpriceのラジオボタンのうち、選択されているもの（checked）を取得します。

• if (price) total += Number(price.value);: もし選択された価格があれば、その価格（文字列として取得されるので、Numberで数値に変換）をtotalに加算。

• totalElement.innerText = Total: ¥${total};: 計算されたtotalをtotalElementに表示。

• quoteForm（フォーム）にchangeイベントのリスナーを追加。変更があると、quoteTotal関数が実行され、選択された価格に基づいて総額が計算され画面に表示されます。

いかがでしょうか。これでフォームの入力が変更されるたびに（ラジオボタンの選択が変わるたびに）、その都度quoteTotalが実行されて、最新の総価格が表示される仕組みの完成です。

totalElementで取得した総価格を別に用意してあるお問い合わせフォームなどのメールフォームに表示して送信する処理を実現する場合は、基本的には、localStorageまたはsessionStorageを使って価格を別のページに渡す方法が一般的です。

  // 総価格をsessionStorageに保存
  sessionStorage.setItem('totalPrice', total);

価格をsessionStorageに保存し、別のページで取得し、隠しフィールドを使って、計算された価格をフォームと一緒に送信。これで、別ページのメールフォームに計算した総価格を表示して送信することもできます。

まとめ

今回は、純粋なJavaScriptのみでユーザーがフォーム内のオプションを選択するたびに、それらの選択肢に基づいて総価格を計算し、指定されたHTML要素にその金額を表示する処理をご紹介致しました。フレームワークを使うことが一般的になってきた中で、javaScriptの基礎をしっかり学び、バニラJS理解することはやはり重要かと思います。

以上となります。できる限りわかりやすく伝えようとしても書くのは難しいです。
コードや記事の書き方について気になるところがあれば、アドバイスいただけると嬉しいです。