2025.09.26

HTMLで簡単見積もり計算アプリ！コピペで完成、電卓作業を自動化

t.inoue

「カタカタ…（電卓の音）。えーっと、部品Aが3個で単価が…、それに作業Bが1.5時間だから時給が…、合計で…」

毎日の業務で、こんな風に電卓やExcelと睨めっこする時間、ありませんか？この単純作業、地味に時間がかかりますし、「押し間違えてないかな…」と、ちょっと不安になったりしますよね。

もし、あなたの会社の業務に合わせた専用フォームに個数や時間を入力するだけで、一瞬で正確な合計金額を計算してくれる『自社専用の計算アプリ』があったら、どうでしょう？

「そんなの、プログラマーじゃないと作れないよ…」そう思ったあなた、驚かないでください。実はそれ、いつものHTMLと、少しの“魔法の呪文”（JavaScript）をコピペするだけで、驚くほど簡単に作れてしまうんです！

今回は、あなたの電卓作業をゼロにする、魔法のような計算アプリの作り方を丁寧に解説します。

なぜExcelではなく「HTML計算機」なのか？
秘密の呪文「JavaScript」って何者？
3ステップで作成！簡易見積もり計算アプリ
もっと便利に！自分流カスタマイズのヒント
カスタマイズで困ったら？Geminiに丸投げしよう！
まとめ

なぜExcelではなく「HTML計算機」なのか？

「それって、Excelの計算式でもできるんじゃない？」はい、その通りです。しかし、HTML計算機には、PCが苦手な方にこそ嬉しい、Excelにはない3つの大きなメリットがあるんです。

メリット1：ファイルが軽い・早い！

HTMLファイルは、ブラウザ（Google Chromeなど）で開くだけ。重いExcelを起動するのを待つ必要はありません。ダブルクリックすれば、1秒であなたの専用計算機が目の前に現れます。

メリリット2：操作がとにかく直感的！

アプリの見た目は、「数字を入れる場所」と「計算ボタン」だけ。非常にシンプルなので、PC操作に不慣れな人でも、説明不要で直感的に使うことができます。

メリット3：数式を壊す心配がない！

Excelで起こりがちなのが、「うっかり計算式の入ったセルに数字を入力して、数式を消してしまった…」という悲劇。HTML計算機なら、計算ロジックは裏側に隠れているので、ユーザーが間違って壊してしまう心配がありません。

秘密の呪文「JavaScript」って何者？

今回、計算機能を実現するために「JavaScript（ジャバスクリプト）」というものを使います。なんだか難しそうな名前ですよね。

でも、役割はとてもシンプルです。 HTMLがアプリの「見た目（骨格）」を作る言語なら、JavaScriptは「動き」を加える魔法の呪文だと考えてください。

例えば、「“計算ボタン”が押されたら、“入力された数字”を使って、“掛け算や足し算”をして、“結果”を表示する」といった、一連の動きを命令するのがJavaScriptの役目です。

「呪文なんて、覚えられるわけない…」ご安心ください！今回は、意味を100%理解する必要はありません。コピペするだけで完璧に動くように、私が効果抜群の呪文（コード）を用意しました。あなたはそれを貼り付けるだけでOKです！

3ステップで作成！簡易見積もり計算アプリ

それでは、実際に作っていきましょう！今回は例として、「部品代」と「作業費」を計算して、合計金額を出す簡単な見積もりアプリを作ります。

ステップ1：HTMLで見た目（入力フォーム）を作る

まずは、ユーザーが数字を入力する欄や、ボタンなど、アプリの「見た目」をHTMLで作ります。以下のコードをコピーして、メモ帳に貼り付けてください。

<!DOCTYPE html>
<html>
<head>
<title>簡易見積もり計算機</title>
</head>
<body>

<h1>簡易見積もり計算機</h1>

<p>部品Aの個数: <input type="number" id="partsA_count" value="0"></p>
<p>作業時間（時間）: <input type="number" id="work_hours" value="0"></p>

<button onclick="calculate()">計算する</button>

<hr>

<h2>合計金額: <span id="total_price">0</span> 円</h2>

</body>
</html>

input type="number" と書くことで、数字専用の入力欄が作れます。 id="..." というのは、後でJavaScriptが「どの箱の数字か？」を判断するための「名札」だと思ってください。

ステップ2：JavaScriptで計算の仕組み（魔法の呪文）を作る

次に、計算の心臓部となるJavaScriptを作ります。今回は、部品Aの単価を「150円」、作業の時給を「1200円」として計算するロジックを組みます。

以下のコードを、先ほどのHTMLコードの</body>のすぐ上に貼り付けてください。

<script>
// --- ここからJavaScript ---

function calculate() {
  // ▼▼▼ ここの単価を自社に合わせて変更してください ▼▼▼
  const partsA_price = 150;  // 部品Aの単価
  const work_rate = 1200;   // 作業の時給
  // ▲▲▲ 変更するのはここまで ▲▲▲

  // 1. 入力された値を取得する
  const partsA_count = document.getElementById('partsA_count').value;
  const work_hours = document.getElementById('work_hours').value;

  // 2. 金額を計算する
  const partsA_total = partsA_count * partsA_price;
  const work_total = work_hours * work_rate;
  const total_price = partsA_total + work_total;

  // 3. 計算結果を表示する
  document.getElementById('total_price').innerText = total_price;
}

// --- ここまでJavaScript ---
</script>

こんなイメージです。

ステップ3：合体させて完成！動かしてみよう

ステップ1と2を合体させたものが完成版です。この全体を、ファイルの種類を「すべてのファイル」にして、calculator.html という名前で保存しましょう。

そして、保存したファイルをダブルクリックしてブラウザで開いてみてください。部品Aの個数と作業時間を入力して「計算する」ボタンをクリック！合計金額が一瞬で表示されたら、大成功です！

どうですか？自分の作ったアプリが動く瞬間は、ちょっと感動しませんか？

もっと便利に！自分流カスタマイズのヒント

この計算機を、ぜひあなたの会社の業務に合わせて改造してみてください。

項目を増やしたい場合: HTMLの入力欄をコピーして増やし（idの名前は変えてくださいね！）、JavaScriptの計算部分にも新しい項目の計算式を追加すればOKです。
消費税（10%）を追加したい場合: JavaScriptのtotal_priceを計算している式の最後に* 1.1を追記するだけで、簡単に税込価格が計算できます。

カスタマイズで困ったら？Geminiに丸投げしよう！

「項目を増やしたいけど、JavaScriptのどこを直せばいいか分からない…」そんな時は、迷わずGeminiに頼りましょう。

あなたが作ったHTMLコード全体をコピーして、Geminiにこうお願いするだけです。「この見積もり計算機のコードに、『部品B（単価250円）』という項目を追加したいです。コードを修正してください。」

驚くほど正確に、修正されたコードを提案してくれます。

エラーが出た時も、エラーメッセージとコードを貼り付けて「どこが間違っていますか？」と聞けば、あなたの専属家庭教師のように優しく教えてくれますよ。

まとめ

今回は、HTMLとJavaScriptを使って、日々の面倒な計算作業を自動化する「簡易見積もり計算アプリ」の作り方をご紹介しました。

「JavaScript」という未知の呪文も、コピペして少しカスタマイズするだけで、これほど便利なツールが作れることに驚かれたかもしれません。

あなたはもう、ただPCを使うだけのユーザーではありません。 自分の手で、日々の業務を改善するツールを作り出せる『開発者』として、大きな一歩を踏み出したのです。

まずはこの記事のコードをそのまま使って、小さな「自動化」の快感を味わってみてください。その成功体験が、あなたの働き方を、そして会社の未来を、きっと大きく変えるきっかけになるはずです。

HTMLで社内マニュアル作成してみた記事はこちら