AIで買い物電卓を作った話

交流スペースフリートーク

2025.10.07 11:47

Gマスター

買い物をするときに、ピッタリ1,000円とか、それを少し超える金額にしたい時とかがあるので、AI(Copilot)で買い物電卓を作ってみました。

今までは、スマホの電卓でやっていたので、足したり引いたり大変でした。きっと、アプリストアには、それに適した電卓アプリもあるだろうなぁと思いましたが、見つけられず。あの検索キーワードだけで、アプリを探すのってムリゲーですよね。

というわけで、なければ自分で作ろう、なんですけど、スマホのアプリ、特にiPhoneは、作ったことがないので無理！（Androidもかなり昔で浦島太郎状態）、というわけで、Javascript で作ることにしました。

昔なら、テキストエディタで、<HTML…とか書いて作っていましたが、今はAIに頼めば、コードを書いてくれるので楽ですね。

電卓の仕様としては、商品名、金額を入力して、追加ボタンを押すと、表に追加されて、デフォルトでチェックボックスが1つチェックされます。各行にチェックボックスは5つあって、同じものを5個まで加算できます。

表にある項目のチェックボックスが付いている商品の合計金額が常に表示されるようになっていて、合計から外したい商品があれば、チェックボックスを外せば、即合計に反映される、というものです。

これであれば、あれを買ったり、やっぱりやめたりみたいなときに、チェックボックスをポチポチやればいいだけなので楽です。

まぁ、そのあと、割引を設定したり、税別、税込で入力できるようにしたりと、色々仕様追加していきました。

出力は１つのHTMLファイルにしてもらって、ブラウザで開けば、実行できるようにしました。（ソースは、body、script合わせて167行でした。一応、下の方に載せましたが、ちょっとテキストエディタで加工する必要があります。半角スペースは、マイネ王では消えてしまうので、全角スペースにしてありますが、それを戻す必要があります）

iPhoneの場合、PCのWebブラウザで自分のiCloud Driveを開き、そこに作成したHTMLファイルをドロップして、iPhoneのファイルアプリからHTMLファイルを共有→Edgeで開く、で実行できます。Safariでは、ローカルファイルの実行は出来ないみたいです。

もっと簡単に実行する方法があれば、知りたいですが。
（→今のところ、iPhoneのHTML Viewer Q がいい感じです。HTMLソースを見ようとすると、爆音の全画面広告が出るので注意！😅）

途中、チェックボックスを押しても、合計が反映しないというバグに見舞われましたが、「ちょっとこの辺がおかしいんじゃない？」と指摘してあげると、AIは、「するどい。まさにその通りで、○○が✕✕なので、…」とか言って、直し始めます。分かっていたら、最初からやれよと突っ込みたくなりますが😅、ちゃんと直してくるので逆に感心します。（わざとやっている？）

それでも結局、直らんのかｗというのも何回かありましたが、ちょっと前に動いていたソースを、「前は、こんな感じで動いていたよ」とか教えると、そこを直して、結果的にちゃんと動くものを出してきたりするので、やっぱりすごいですね。

おまけに、「CSVで出力する機能や、カテゴリーごとに分ける機能も付けましょうか？」とか言ってきましたが、（いや、そんなことしたら、またバグるんで😅）ということで、そこまではしませんでした。

AIは、言葉の次のフレーズを１つずつ、次に続く言葉はこれが一番適切、というような感じで決めていくと聞いたことがありますが、そんなので、よくプログラミングができるなぁと思います。

ちなみに、一通り望む仕様のものが完成してから、そのソースから、色々な機能を削ぎ落した簡易版を作ってと依頼したところ、意外とバグだらけの物を出してきて、機能を追加していくのは得意だけれど、削除していくのは下手だなぁと思いました。

でも、半年くらい前に、別のものを書いてもらったときに比べると、なんか進化しているような気もします。まぁ定量的な評価ではないので、本当のところはどうかは分かりませんが😅

AIが書いたソースを見て、こうやって書けばいいんだ、と色々書き方を知ることができるので、一人で悩んでいるのに比べると、時間も掛からずに、新たなテクニックも学べていいですね。

■ 一応ソースを貼ってみました。
・以下ソースをまるっとコピーして、テキストエディタにペースト
・テキストエディタで全角スペース1個を半角スペース2個に一括置換
・shopping_cal.html みたいな名前を付けて保存
・ブラウザで開く

これでいけると思いますけど。

■ 仕様、使い方の詳細ですが、
・金額を入力して追加ボタンを押す。商品名は空欄なら --- になる
・デフォルトで1個分チェックされる
・デフォルトで税別価格の入力となる。合計は、これに税率が掛け合わされて合計される
・税込で入力したいなら、あとで税別のチェックを外す
・割引率は、デフォルトで20%、デフォルトで割引のチェックはオフ。見切り品なんかは、ここをチェック
・削除ボタンで行を削除できる
・金額の入力は、数字のみなので、スマホではテンキー入力に切り替わる
・拡大できないようにしてある。スマホでは、テキストボックスにフォーカスを当てると、拡大されてしまい使いづらいので（上の方にviewportとか設定がありますので適当に倍率を変えてください）
・全体の税率を変えたい時は、ラジオボタンで選択（食料品とそれ以外を混在して買うことは想定していないです）

<!DOCTYPE html>
<html lang="ja">
<head>
　<meta charset="UTF-8">
　<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=0.8" />
　<title>商品別割引・税込み計算機</title>
　<link href="https://fonts.googleapis.com/css2?family=Roboto Mono&display=swap" rel="stylesheet">
　<style>
　　body { font-family: sans-serif; margin: 20px; }
　　input, button { margin: 5px; padding: 8px; }
　　table { border-collapse: collapse; width: 100%; margin-top: 20px; }
　　th, td { border: 1px solid #ccc; padding: 2px; text-align: center; }
　　th:nth-child(n+3):nth-child(-n+7),
　　td:nth-child(n+3):nth-child(-n+7) {
　　　width: 30px;
　　}
　　#total {
　　　font-family: 'Roboto Mono', monospace;
　　　font-size: 28px;
　　　font-weight: 600;
　　　letter-spacing: 1px;
　　}
　　#itemName, #itemPrice {
　　　font-size: 16px;
　　　width: 100px;
　　}
　　input[type="number"].discount-input {
　　　width: 30px;
　　}
　　button {
　　　padding: 8px 12px;
　　　font-size: 14px;
　　}
　</style>
</head>
<body>
　<input type="text" id="itemName" placeholder="商品名">
　<input type="number" id="itemPrice" placeholder="金額" inputmode="numeric" pattern="\d*">
　<button onclick="addItem()">追加</button>

　<h4>
　　税率:
　　<label><input type="radio" name="taxRate" value="8" checked onchange="updateTotal()"> 8%</label>
　　<label><input type="radio" name="taxRate" value="10" onchange="updateTotal()"> 10%</label><br>
　</h4>
　<h3>
　　税込み合計金額: ¥<span id="total">0.00</span>
　</h3>

　<table id="itemTable">
　　<thead>
　　　<tr>
　　　　<th>商品名</th>
　　　　<th>金額</th>
　　　　<th>1</th>
　　　　<th>2</th>
　　　　<th>3</th>
　　　　<th>4</th>
　　　　<th>5</th>
　　　　<th>割引率（%）</th>
　　　　<th>割引</th>
　　　　<th>税別</th>
　　　　<th>削除</th>
　　　</tr>
　　</thead>
　　<tbody></tbody>
　</table>

　<script>
　　function addItem() {
　　　const nameInput = document.getElementById("itemName").value.trim();
　　　const name = nameInput === "" ? "---" : nameInput;
　　　const price = parseInt(document.getElementById("itemPrice").value, 10);
　　　if (isNaN(price)) {
　　　　alert("金額を正しく入力してください");
　　　　return;
　　　}

　　　const table = document.getElementById("itemTable").getElementsByTagName("tbody")[0];
　　　const row = table.insertRow();
　　　row.insertCell().textContent = name;
　　　row.insertCell().textContent = "¥" + price;

　　　for (let i = 0; i < 5; i++) {
　　　　const cell = row.insertCell();
　　　　const checkbox = document.createElement("input");
　　　　checkbox.type = "checkbox";
　　　　checkbox.checked = (i === 0);
　　　　checkbox.classList.add("main-check");
　　　　checkbox.addEventListener("change", updateTotal);
　　　　cell.appendChild(checkbox);
　　　}

　　　const discountRateCell = row.insertCell();
　　　const discountInput = document.createElement("input");
　　　discountInput.type = "number";
　　　discountInput.value = 20;
　　　discountInput.min = 0;
　　　discountInput.max = 100;
　　　discountInput.classList.add("discount-input");
　　　discountInput.setAttribute("inputmode", "numeric");
　　　discountInput.setAttribute("pattern", "\\d*");
　　　discountInput.addEventListener("change", updateTotal);
　　　discountRateCell.appendChild(discountInput);

　　　const discountCheckCell = row.insertCell();
　　　const discountCheckbox = document.createElement("input");
　　　discountCheckbox.type = "checkbox";
　　　discountCheckbox.classList.add("discount-check");
　　　discountCheckbox.addEventListener("change", updateTotal);
　　　discountCheckCell.appendChild(discountCheckbox);

　　　const taxCheckCell = row.insertCell();
　　　const taxCheckbox = document.createElement("input");
　　　taxCheckbox.type = "checkbox";
　　　taxCheckbox.classList.add("tax-check");
　　　taxCheckbox.checked = true;
　　　taxCheckbox.addEventListener("change", updateTotal);
　　　taxCheckCell.appendChild(taxCheckbox);

　　　const deleteCell = row.insertCell();
　　　const deleteButton = document.createElement("button");
　　　deleteButton.textContent = "削除";
　　　deleteButton.onclick = function () {
　　　　row.remove();
　　　　updateTotal();
　　　};
　　　deleteCell.appendChild(deleteButton);

　　　updateTotal();
　　　document.getElementById("itemName").value = "";
　　　document.getElementById("itemPrice").value = "";
　　}

　　function updateTotal() {
　　　let sum = 0;
　　　const selectedTaxRate = parseFloat(document.querySelector('input[name="taxRate"]:checked').value) || 0;

　　　const rows = document.querySelectorAll("#itemTable tbody tr");
　　　rows.forEach(row => {
　　　　const priceText = row.cells[1].textContent;
　　　　const price = parseFloat(priceText.replace("¥", ""));

　　　　const itemChecks = row.querySelectorAll(".main-check");
　　　　const checkedCount = Array.from(itemChecks).filter(cb => cb.checked).length;

　　　　if (checkedCount > 0) {
　　　　　const discountInput = row.querySelector(".discount-input");
　　　　　const discountRate = parseFloat(discountInput.value) || 0;
　　　　　const discountCheck = row.querySelector(".discount-check");
　　　　　const isDiscounted = discountCheck && discountCheck.checked;
　　　　　const taxCheck = row.querySelector(".tax-check");
　　　　　const isTaxed = taxCheck && taxCheck.checked;

　　　　　let unitPrice = isDiscounted
　　　　　　? price * (1 - discountRate / 100)
　　　　　　: price;

　　　　　if (isTaxed) {
　　　　　　unitPrice *= (1 + selectedTaxRate / 100);
　　　　　}

　　　　　sum += unitPrice * checkedCount;
　　　　}
　　　});

　　　document.getElementById("total").textContent = sum.toFixed(2);
　　}
　</script>
</body>
</html>