割り勘・会費計算アプリの作り方｜AIに頼んで端数と幹事分も計算

AI（Claude）が書き、運営者が確認して公開した記事です。分担と確かめたもの →

飲み会の会計が30,100円で、参加者が30人。1人いくら集めて、端数はだれが持つか。幹事が毎回スマホの電卓で悩むこの計算を、ブラウザで動く小さなアプリにします。AIのチャットに日本語で頼むだけで作れて、インストールは要りません。

デモを開いて試す → 完成版の HTML をダウンロード（MIT）

ダウンロードしたファイル（warikan-calculator.html）は、パソコンならダブルクリックするとブラウザで開きます。中身を書き換えたいときは、メモ帳などで開いて保存し直します（MIT ライセンス。ライセンスの説明）。

スマホで読んでいる人へ: このレシピの保存の手順はパソコン向けです。スマホでは、上のデモをそのまま使うか、ブックマークしてください。

このレシピは、AI（Claude）が作って確かめた記録です。AIが「はじめての人がAIに送りそうな文」を想定し、その頼み方どおりにコードを書き、テストとブラウザで確かめて、見つかったバグを直しました。

先に結論：計算の式は1行、手間がかかるのは「おかしな入力」

忙しい人は、次の3つで足ります。

1. デモを開く
2. 下の「AIへの頼み方」の4つの文をコピーして、AIに順に送る
3. 答えを保存して、ブラウザで開く

割り勘の計算そのものは「合計 ÷ 人数を、決めた単位に切り上げる」の1行で書けます。AI（Claude）の1回目のコードも、普通の金額なら正しく計算できました。

手間がかかったのは、計算の外側です。

• 人数に0を入れると「Infinity 円」と出た
• 「幹事が端数を持つ」にすると、人数が多いときに幹事の支払いがマイナスになった（30,100円・30人で -1,800円）
• 大きすぎる数を入れると、数字が少し変わったまま計算された

人数0・「30,100円を30人で、幹事が端数を持つ」・16桁を超える数を入れると、3つとも見つかります。ふつうに使っているだけでは気づきにくいバグです（入れて確かめる数字は、下の「AIへの頼み方」の各回にあります。自分で作るときも、同じ数字で確かめられます）。

このレシピでやること

HTML はページの中身、CSS は見た目、JavaScript は動き（ボタンを押したときの計算など）を書くための言葉です。この3つを1つのファイルにまとめてもらいます。

AIへの頼み方：4回の文と、そのたびに分かったこと

下の文は、コピーしてそのままAIのチャットに貼り付けられます。AIの答え方は毎回少しずつ違うので、出てくるコードがこのレシピと同じになるとは限りません。違っていても、保存して開き、決めた数字を入れて確かめるところは同じです。

AIのチャットをどこで開けるかは「生成AIで何ができる？」にまとめています。

1回目：最小限の割り勘を作ってもらう

飲み会の割り勘を計算するアプリを作ってください。
合計金額と人数を入れると、1人いくら払えばいいかを表示します。
1人分は100円単位に切り上げて、集めすぎた余りがいくらかも表示してください。
HTML・CSS・JavaScriptを1つのファイルにまとめて、外部のライブラリやインターネットへの接続は使わないでください。
計算の部分は、画面の処理とは別の関数に分けてください。

書き換える場所は、上から3行目の「100円単位に切り上げて」です。10円単位にしたい、切り捨てにしたい、という場合はここを変えます。

最後の1行は、計算の部分だけを取り出して確かめやすくするためのお願いです。関数とは「数字を渡すと答えを返す、ひとまとまりの処理」のことです。

答えを保存して開く

AIの答えの中のコード（<!DOCTYPE html> から </html> まで）をコピーし、メモ帳に貼り付けて warikan.html という名前で保存し、そのファイルをダブルクリックするとブラウザで開きます。Windows のメモ帳と Mac のテキストエディットでの保存手順は、「ポモドーロタイマーの作り方」の「答えをファイルに保存して、ブラウザで開く」に詳しく書いています。

開いたら、この6つの数字を入れてみる

AI（Claude）が1回目のコードで実際に試した入力です。電卓を使わなくても、正しい答えが分かる数字を選んでいます。

Infinity は「無限大」、NaN は「数ではない」という意味で、0で割ったときなどに JavaScript が返す値です。アプリとしては、計算せずに「人数を入れてください」と出すのが親切です。

もう1つ、スマホの幅（320px）を再現して開くと、ページ全体が980px幅として縮小されて、文字が小さく表示されました。スマホ向けの幅の指定（viewport）が入っていなかったためです。

2回目：おかしな入力を止めて、端数の選び方を増やす

次の4つを直してください。
1. 人数に0を入れると「Infinity 円」、空欄のままだと「NaN 円」と出ます。金額や人数が空欄・0・マイナス・小数のときは計算せずに、何がおかしいかを文字で出してください。
2. スマホで開くと文字が小さすぎます。スマホの幅でも読めるようにしてください。
3. 端数の単位（1円・10円・100円）と、切り上げ・切り捨てを選べるようにしてください。
4. 「幹事が端数を持つ」も選べるようにしてください。幹事以外は単位どおりの金額にして、合計との差を幹事の支払いで合わせます。

「1.」の「」の中は、自分の画面に出た表示に書き換えます。何をしたら、どうなったかをそのまま書くと、AIは直す場所を探しやすくなります。

AI（Claude）は2回目で、頼まれていない改良も1つ入れました。全角の「３０,０００円」のようにカンマや「円」が付いた入力も、数として読む作りです。

2回目で見つかったバグ：幹事の支払いがマイナスになる

2回目のコードを、組み合わせを総当たりするテストにかけたところ、「幹事が端数を持つ」で幹事の支払いがマイナスになる組み合わせが出ました。

30,100円を30人、100円単位・切り上げで計算すると、次のようになります。

• 30,100 ÷ 30 = 1,003.3… → 100円単位に切り上げて 1,100円
• 幹事以外の29人が 1,100円ずつ払うと 31,900円
• 幹事の支払い = 30,100 − 31,900 = -1,800円

切り上げた分が29人ぶん積み重なり、合計を超えてしまうのが原因です。人数が多いほど、また単位が大きいほど起きやすくなります。30,100円・30人なら、切り捨てにすれば直ります（幹事以外1,000円・幹事1,100円）。

12,100円・12人のように、幹事の支払いがちょうど0円になる組み合わせもあります。計算としては間違いではないので、0円はそのまま表示する作りにしました。

3回目：マイナスを止めて、多めに払う人とコピーを足す

次の4つを直してください。
1. 30,100円を30人、100円単位で切り上げ、幹事が端数を持つにすると、幹事の支払いが -1,800円になります。幹事の支払いがマイナスになるときは計算せずに、「切り捨て」か小さい単位を選ぶよう表示してください。
2. とても大きな金額を入れると、数字が少し変わったまま計算されます。上限を決めて、超えたらエラーにしてください。
3. 多めに払う人を指定できるようにしてください（例: 8人のうち2人が、1人あたり2,000円多く払う）。
4. 結果をメッセージに貼れるように、コピーするボタンをつけてください。

「2.」の「大きな金額」は、16桁を超えるような数のことです。JavaScript の数は、9,007,199,254,740,991 より大きい整数を1の位まで正確に表せないことがあります。AI（Claude）の2回目のコードに「9007199254740993」を入れると、黙って …992 として計算されました。飲み会の会計では出てこない数ですが、エラーにしておくと計算結果を疑わずに済みます。AI（Claude）は上限を合計10億円・人数10,000人にしました。

「3.」の例（8人・2人・2,000円）は、自分の会に合わせて書き換えます。AI（Claude）のコードでは、多めに払う人は「ほかの人の金額＋上乗せ額」を払います。

AI（Claude）は3回目でも、頼まれていない変更をいくつか入れました。単位に500円と1,000円を足したこと、入力を変えたら古い結果とコピーボタンを消すこと（古い結果をコピーして送らないため）、暗い画面設定への対応です。

4回目：スマホの幅で見つけたずれを直す

完成した画面を幅320pxで撮影すると、3つ気になる点がありました。AIに送ったのは、そのうち次の2つです。

スマホの幅（320px）で見ると、次の2つが気になります。
1. 「1人あたり多く（円）」の文字が2行に折れて、右の入力欄だけ下にずれています。左右の入力欄の高さをそろえてください。
2. 多めに払う人がいて幹事も端数を持つとき、結果に「幹事以外 5人」と出ます。幹事以外は7人いるので紛らわしいです。分かりやすい言い方にしてください。

AI（Claude）は見出しを「多く払う額（円）」に短くし、入力欄を下ぞろえにしました。結果の表記は「ほかの 5人」に変えています。頼んでいない変更として、折れていた枠の見出しも「多めに払う人（いなければ0）」に縮めました。

できたもの

完成品は /demos/warikan-calculator/ で実際に動かせます。計算のテストは calc.test.mjs です。

• 合計金額と人数を入れて「計算する」を押すと、1人分・集まる金額・余り（または足りない額）が出る
• 単位は1円・10円・100円・500円・1,000円、端数は切り上げか切り捨てを選べる
• 「幹事が端数を持つ」にすると、合計ちょうどになるよう幹事の支払いで合わせる
• 多めに払う人の人数と、1人あたり多く払う額を指定できる
• 結果を「結果をコピー」ボタンで写し取れる。メッセージに貼れば、参加者に金額をそのまま伝えられる
• 1つの HTML ファイル（約13KB）だけで動き、入れた数字はインターネットに送らない

たとえば合計30,000円・8人で、2人が2,000円多く払い、幹事が端数を持つ場合の結果は次のとおりです。

割り勘（合計 30,000円・8人・100円単位で切り上げ）
多めに払う人 2人: 1人 5,300円
ほかの 5人: 1人 3,300円
幹事: 2,900円
合計 30,000円（ちょうど）

普通の人の金額は (30,000 − 2,000 × 2) ÷ 8 = 3,250円 を切り上げた3,300円です。検算すると 5,300 × 2 ＋ 3,300 × 5 ＋ 2,900 = 30,000円 で、合計と一致します。

確かめたこと

完成版を確かめた方法は、次の3つです。

• 計算のテスト 21件: Node.js（JavaScript をブラウザの外で動かす道具）の標準のテスト機能で実行し、21件すべて合格しました。テストは HTML ファイルの中の計算部分をそのまま読み込むので、配っているファイルそのものを検査しています
• 割り切れる（30,000円・6人）、1円余る（10,001円・2人・1円単位・切り上げ）、1円足りない（同じ条件で切り捨て）、人数1人、10億円ちょうど
• 入力エラー: 0円、マイナスの金額、人数0、人数マイナス、小数、空欄、10億1円、多めに払う分だけで合計に届く場合
• 幹事がマイナスになる 30,100円・30人はエラーになり、切り捨てにすると幹事以外1,000円・幹事1,100円で計算できる
• 合計が元の金額と一致するかの総当たり（21件のうちの1件）: 金額・人数・単位・切り上げと切り捨て・幹事のあり・なし・多めに払う人の組み合わせを全部計算し、合計が一致するか、幹事がマイナスになるなどの場合はエラーで止まるかを確かめる方法です
• ブラウザで操作: Chromium というブラウザを画面を出さない形で動かし、スマホの幅320pxと375pxを再現して入力・計算・コピーを操作しました。横にはみ出す表示はなく、ページのエラーは0件でした。コピーボタンを押すと、画面と同じ文が写し取られることも確認しています

テストのファイルは、Node.js が入っていれば node --test calc.test.mjs で動きます（完成品の HTML と同じフォルダに置いた場合）。AIが書いたコードが違う形なら、このテストはそのままでは使えません。その場合は上の「6つの数字」と、30,100円・30人の幹事の例を手で入れて確かめてください。

⚠️ AI（Claude）は、実機のスマホ（iPhone・Android）では試していません。スマホの幅を再現したブラウザで確かめたところまでです。パソコンのふだんのブラウザ（Windows・Mac の Chrome や Safari など）でも、画面を出す形では開いていません。コピーボタンも、実機で許可を求める表示が出るかどうかは確かめていません。

総当たりの数: 1〜3,000円 × 1〜12人 × 単位5種 × 切り上げ・切り捨て × 幹事あり・なし × 多めに払う人3通りで、1,588,686 通りが合計一致、259,314 通りがエラーで停止。別に、1,000〜50,000円（100円刻み）× 2〜30人の 14,239 通りでは、100円単位・切り上げで 3,647 通り（約26%）が幹事マイナスでした。

つまずいたこと

AI（Claude）が4回のやりとりで実際に出したバグと、気づいたきっかけをまとめます。

いちばん見つけにくかったのは、幹事がマイナスになるバグです。少人数で試しているあいだは出ません。100円単位・切り上げで5人なら、1〜100,000円のうちマイナスになるのは合計1,599円以下だけでした。30人になると、30,100円のような普通の会計でも起きます。AI（Claude）も、組み合わせを総当たりするテストを書くまで気づきませんでした。

残りの5つは、総当たりのテストがなくても見つかります。0・空欄・マイナス・とても大きな数を入れる、スマホの幅で開いて結果を読む、の2つで足ります。

端数の決め方：同じ10,000円・3人でも5通りある

端数をどう扱うかに、正解は1つではありません。合計10,000円を3人で割ると、決め方によって次のように変わります。

選ぶときの考え方は、次の3つです。

• 小銭のやりとりを減らしたい → 100円か1,000円単位。切り上げなら余りが出るので、余りをどうするか（次回に回す、会場への支払いに足す、など）を先に決めておきます
• だれも多く払わないようにしたい → 1円単位。小銭が増えるかわりに、過不足は人数より少ない円数（3人なら2円まで）に収まります
• 合計ちょうどで締めたい → 幹事が端数を持つ。幹事の支払いだけが半端な金額になります。人数が多いと、上のバグの例のように切り上げでは成り立たない場合があるので、そのときは切り捨てにします

切り捨てで「幹事が端数を持つ」にすると、幹事が多めに払う形になります。10,000円・3人・100円単位なら、幹事以外3,300円、幹事3,400円です。幹事の負担を増やしたくない会では、切り上げにして余りを幹事が受け取るほうが合う場合もあります。どれにするかは、集める前に参加者へ伝えておくと、あとで話が食い違うのを防ぎやすくなります。

気をつけること

お金の計算をAIに任せきりにしない

AIが書いた計算のコードには間違いが入ることがある、という前提で使ってください。このレシピでも、普通の金額では正しいのに、条件がそろうと幹事の支払いがマイナスになるバグが出ました。お金を集める前に、少なくとも1回は電卓で検算してください。確かめる式は1つです。

• 全員の支払い（1人分 × 人数 ＋ 多めの人 ＋ 幹事）の合計が、元の合計金額と一致するか

アプリの答えをそのまま信じるのではなく、合計が合うかを自分の目で見てから、金額を参加者に送るほうが、間違いに気づきやすいです。

公開する前に、自分のファイルを確かめる

作ったアプリを友だちにも使ってもらうため公開するなら、その前に次の3つを確かめます。

• 入れた数字を外に送っていないか: AIに「このファイルはインターネットに何か送っていますか」と聞きます。AI（Claude）の完成版には、外部とやりとりするコード（http・fetch( など）は1か所もありません
• エラーのときに変な表示が出ないか: 上の「6つの数字」と、30,100円・30人の例をもう一度入れます
• ファイルに個人の情報が入っていないか: 参加者の名前や、実際の会の金額を例として書き込んでいたら消します

AIに送る文にも、参加者の名前や連絡先を書く必要はありません。計算に要るのは金額と人数だけです。

会のルールがあれば、そちらに合わせる

サークルや町内会などでは、会費の集め方や端数の扱いが規約で決まっていることがあります。このアプリは計算をするだけで、どの決め方が正しいかは判断しません。決まりがある会では、その決まりに合わせて単位と切り上げ・切り捨てを選んでください。

次にやること

できたアプリは、今は自分のパソコンの中だけで動いています。幹事のスマホからも開けるようにするには、ファイルをインターネット上に置いて公開します。HTML ファイル1つだけのアプリなら、無料の置き場で公開できることが多いです。どこに置けばいいかは「AIで作ったものを無料で公開する方法」で比べています。

同じ「AIに頼む → 保存して開く → 押して確かめる → 直してもらう」の流れで、別のアプリも作れます。時間を扱うアプリなら「ポモドーロタイマーの作り方」、毎月の表の集計なら「毎月のCSV集計をAIに任せる」、お金の記録なら「おこづかい帳アプリの作り方」が近い題材です。

作ったものを人に見てもらうなら → Cloudflare Workers で独自ドメインで公開する

「つくる（アプリ）」のレシピ

• おこづかい帳アプリを作る
• 単語カード・クイズアプリを作る
• スマホだけで自分の単語帳を作る
• ポモドーロタイマーを作る
• 割り勘・会費計算アプリを作る（いま読んでいる記事）

作るのページで、ほかのカテゴリも見る →