Works
Claude CodeでCSV売上アプリを1日公開｜月次レポート自動化
売上のCSVをドラッグすると、集計・グラフ・月次レポートが出て、AIが月の動きを要約するWebアプリ。2026年6月28日に Claude Code と組んで1日で作って公開し、今は Cloudflare Workers の上で動く見本です。
2026年6月28日に、売上のCSVを入れるだけで集計と月次レポートが出るWebアプリを、Claude Code と組んで作って、その日のうちに公開しました。
何ができるかを先に書きます。CSV をドラッグすると、全期間の売上、前月比と前年同月比、月別の推移、チャネル別の割合、売れた商品の上位10が1画面に出る。月を選ぶと、その月の経営者向けレポートになって、テキストで保存できます。AI に月の動きを3〜4文で要約させたり、売上の数字を見ながら「来月どう動くか」を相談したりもできる。
見本は今も動いとります。
できること（2026年10月22日の時点）
入口の「サンプルデータで開く」を押すと、架空のネットショップの売上が入ります。Amazon・楽天・Shopify の3チャネル、20商品、2025年7月から2026年6月までの12か月で、5,029行あります。10月22日に開くと、総売上は ¥22,236,827、件数は5,029件と出ました。
画面は3つです。
- ダッシュボード：全期間の総売上、いちばん新しい月の前月比と前年同月比、扱っとる商品の数、月別の推移のグラフ、チャネル別の割合のドーナツグラフ、商品の売上上位10
- 月次レポート：月を選ぶと、その月の売上・前月比・前年同月比・件数と平均単価のカード、AI の要約の欄（ボタンを押すと3〜4文で要約）、日別の推移・チャネル別・商品の上位10が出る。「テキストで保存」で書き出せる
- AI への相談：右下のボタンから。売上の数字を前提に答える形にしてある
10月22日に開いて分かったことも書いときます。サンプルが12か月ぶんしか無いので、前年同月比は「比較対象月のデータなし」と出ます。1年より長いデータを入れたら数字が出る作りです。それと、商品の数は10以上やと「10+」とだけ出ます。
自分の CSV も入れられます。要るのは日付・チャネル・商品名・数量・単価の列で、売上の列が無ければ数量×単価で計算する。列の名前は、「日付」か「受注日」、「チャネル」か「店舗」、「売上」か「金額」のように、決めてある言い方のどれかに合わせる必要があります。
ただ、今の見本が読めるのは UTF-8 の CSV 1つだけです。Excel で普通に「CSV」で保存した物は Shift_JIS になるので列の名前が読めずに止まるし、数量や単価が「1,200」のようにカンマ入りの行は飛ばされます。日付も「2026-06-01」の形だけで、「2026/6/1」の形やと取り込みはできても月の集計が崩れます（どれも10月22日に、見本の読み込みの部分を手元で動かして確かめた）。
CSV の中身はサーバーに送らず、使う人のブラウザの中だけで扱います。AI のボタンを押した時だけ、次の物がサーバーを通って Anthropic の AI に渡ります。渡る物は、要約と相談でちがいます。
- 要約のボタン：その月の売上の合計、前月比と前年同月比（前月と前年同月の売上も）、チャネル別の売上、商品の上位10（商品名・カテゴリ・数量も）。CSV のファイル名や件数は入りません
- 相談のボタン：全期間の月別とチャネル別の売上、商品の上位10（商品名・カテゴリ・数量も）、CSV のファイル名と件数、相談で打った文（それまでのやり取りも含めて）
どう作ったか
使った物は、画面が Next.js と TypeScript、グラフが Recharts、CSV の読み込みが PapaParse、AI が Anthropic の Claude の API です。月の要約は Claude Haiku 4.5、相談のほうは Claude Sonnet 4.6 を呼んどります（設定ファイルの値）。
進め方は、Claude Code に日本語で「CSV を読み込んで、こういう画面を出したい」と渡して、出てきた物を動かして、ちがう所を言って直してもらう、の繰り返しです。当時、Web開発は初めてでした。工場で工作機械のプログラム（NCコード）を少し触っとったので、命令を順番に組み立てる考え方だけは体に入っとった、くらいの下地です。
前の記事では、1日の流れを「朝に CSV、昼にグラフ、夕方に AI、夜に公開」と書いてました。git の記録と見比べると、これとは合いませんでした。記録に残っとるのは、Next.js のひな形が14時46分、全部入りの初版が15時02分、最後の手直しが15時54分。コミットの時刻で見ると、ひな形から全部入りの初版まで16分です（コミットとコミットの間隔で、作るのにかかった時間ではありません）。何時に何をしたかまでは、記録からは分かりません。確かなのは、「明日から作るサンプル1本目」と書いた朝の記事と同じ日の午後には、Vercel の上で動いとったことです。
途中で1回コケたのも、前の記事とは中身が少しちがいます。前は、Anthropic の SDK を Edge Runtime で動かそうとして本番のビルドが落ち、エラーを見せたらたぶん5分で原因が分かった、と書いてました。記録を見ると、AI の相談が動いてへんと私が思い込んで、Claude Code と Edge Runtime に切り替えたのが15時34分。ビルドが通らんで元の形に戻したのが15時54分です。この2つのコミットの間は20分やけど、その間に言葉の直しのコミットが2つ（15時44分・15時45分）入っとるので、原因探しに何分かかったかは記録からは分かりません。しかも、相談は最初から動いとって、動いてへんというのは私の勘違いでした（戻した時のコミットの文にも、そう残っとります）。
もう1つ、作った日に直したのが言葉です。月次レポートの保存ボタンは最初「Markdownで保存」、データの置き場の説明は「localStorage」になっとった。Markdown のほうのコミットの文には「ターゲット顧客に合わせて」とあって、使う人（店長さんや経営者）には通じん語やから、という理由が残っとります。どっちもその日のうちに、「テキストで保存」と「お使いのブラウザ内」に言い換えてあります。
公開した後に足したこと
2026年9月3日に、Claude Code と組んで、置き場所を Vercel から Cloudflare Workers へ移しました。前の URL も今は新しい URL へ転送されます（10月22日の時点）。
9月20日には、これも Claude Code と組んで、AI のボタンに回数の上限を入れました。誰でも押せる AI のボタンは、続けて押されると料金が上がり続けるからです。今の上限はこうです。
何の上限 | 値 | 超えた時 |
|---|---|---|
同じ回線から1分 | 10回 | 日本語の案内を出して止める |
同じ回線から1日（日本時間の0時で区切り） | 50回 | 同じ |
見本全体で1日 | 300回 | 同じ |
1回に入れる文字 | 2,000字 | AI を呼ばずに断る |
回数は、要約と相談を合わせて1つに数えます。「見本全体で1日300回」は、全体の上限をきっちり数える作りではありません。超えた時の止めとして、Anthropic の側に月の上限を別にかけてあります。値はコードの1か所にまとめてあります。入れた時のコミットの記録には、手元で試して11回目が止まったことと、2,001字が断られたことが残っとります。今回の書き直しでは、料金がかかるので AI のボタンは押してません。
業務に合わせるなら変える所
この見本は、どこの会社の CSV でもそのまま動く物やなく、作り込む前の形を見せるための物です。実際に使う形にするなら、変えるのはだいたい次の所です。
- CSV の列：レジや受注の仕組みが書き出す CSV の列の名前・文字コード（Shift_JIS など）・日付の形に合わせる。チャネルごとに別のファイルで出てくるなら、まとめて読めるようにする
- 見る数字：粗利、担当者別、店舗別など、毎月見とる物に変える
- 出し方：今はテキストの保存だけ。PDF にする、決まった日にメールや Slack へ送る、は今の見本には無いので足す所です
- AI の料金：使う会社の Anthropic のアカウントの API キー（AI を使うための鍵）を入れて、そちらで払う形にする。上の回数の上限も、使う人数に合わせて決め直す
Excel の中で自動化するか、こういうブラウザの道具に出すかで迷っとるなら、Excelの業務自動化はVBAかWebアプリかに、私がこっちを選んだ時の比べ方を書いてます。
毎月の売上の集計で困っとったら
いま手で回しとる CSV の列の名前と、毎月見とる数字の名前を書いてもらえたら（売上の数字は要りません）、この見本をどう変えれば合うかを、こちらで書き起こします。