HTMLとJavaScriptで作る「自動車見積もりアプリ」を解説！

(Sample)

今回は、新人エンジニアの方向けに「HTMLとJavaScriptを使った簡単な自動車見積もりアプリ」のコードを、わかりやすく分解・解説していきます。

「Web開発って難しそう…」と思っていませんか？安心してください！この記事を読めば、フォームの作り方、データの受け取り方、そして計算の仕組みがしっかり理解できるようになります。

全体の構成をざっくりつかもう！

このアプリの目的は、「選んだ車の種類とオプションに応じて、合計金額を自動で表示すること」です。

以下のように3つのパートに分けて説明します。

1. HTML（見た目を作る）
2. CSS（見た目の装飾）
3. JavaScript（動きをつける）

HTML：画面の骨組みを作る

まずは、画面にどんな要素があるか見ていきましょう。

<form id="estimateForm">
  <select id="carType">...</select>
  <input type="checkbox" id="gps">
  ...
  <button onclick="calculateEstimate()">見積もりを計算</button>
</form>
<div id="result"></div>

フォーム（<form>）の役割

フォームは、ユーザーからの入力を受け取る箱のようなものです。ここでは車種やオプションの入力を受け取ります。

セレクトボックス（<select>）

<select id="carType">
  <option value="1000000">小型車 - 1,000,000円</option>
  ...
</select>

これはプルダウンメニューです。車の種類ごとに価格がvalueに入っています。

例：

• 小型車を選ぶ → value = "1000000"

チェックボックス（<input type="checkbox">）

<input type="checkbox" value="200000" id="gps">

これは追加オプションの選択肢です。選ばれたものだけ価格に加算されます。

CSS：見た目のちょっとした装飾

body {
  padding: 20px;
}

.result {
  margin-top: 20px;
}

ここでは簡単に、ページに余白（padding）をつけたり、結果表示部分にスペース（margin）を加えたりしています。

CSSは、HTMLを見やすく整えるメイク道具のようなものです！

JavaScript：見積もりを計算する処理

では一番大事なロジックを見ていきましょう。

function calculateEstimate() {
  const carType = document.getElementById('carType').value;
  const gps = document.getElementById('gps').checked ? document.getElementById('gps').value : 0;
  ...
  const total = parseInt(carType) + parseInt(gps) + ...
}

DOM（ドム）とは？

まず出てくる document.getElementById(...) は、HTMLの中から要素を「JavaScriptの世界」に取り出すための関数です。これを DOM（Document Object Model） と呼びます。

例えるなら、HTMLが「人体」で、DOMは「神経回路」のようなもの。JavaScriptが脳のように、そこから情報を読み取ったり、命令を出したりします。

チェックされているか？を判定

document.getElementById('gps').checked

これはチェックボックスが選択されているかどうかを調べます。チェックされていれば、対応する価格を足します。

数値に変換して足し算！

parseInt(carType)

これは文字列になっている数字を、ちゃんと数値に変換するための関数です。文字列のままだと「足し算」ではなく「連結」になってしまうんです。

例：

• "1000" + "200" → "1000200"（文字列同士）
• 1000 + 200 → 1200（数値同士）

結果の表示

resultDiv.innerHTML = `<h2>見積もり総額: ${total.toLocaleString()}円</h2>`;

innerHTML を使うと、HTMLの中身を自由に書き換えることができます。

toLocaleString() は数値に「,（カンマ）」を入れてくれる関数です。これで「3000000円」が「3,000,000円」となり見やすくなります！

実際に計算してみよう（シミュレーション）

どのオプションを選んでも、即時に計算されて結果が表示されるようになっています！

このアプリのメリットと改善点

メリット

• 初心者にもわかりやすいシンプルな構造
• JavaScriptの基本が学べる（イベント、条件分岐、DOM操作）
• 即時反映されるUI（ユーザー体験も良好）

改善点

• 入力バリデーションがない（未選択時のエラー処理など）
• セレクトボックスの金額が「べた書き」
• 金額や仕様をデータで管理できるようにしたほうがよい（JSONなど）

今後の学習の指針

このコードを足がかりに、次のようなステップでレベルアップしていきましょう！

1. 関数を分割してみよう
   たとえばオプションの合計を別関数にして再利用性を高める。
2. データを外部に分離しよう
   JSONで車種や金額を管理できると、より柔軟な設計にできます。
3. バリデーションを導入してみよう
   チェックしないとエラーになるようなケースに対応できるようにしましょう。

最後までお読みいただきありがとうございます。