Claude Codeで爆速！ミニロト解析ページを丸ごと作ってみた

登場人物

リナ社長 … 高校生なのに会社経営するやり手ギャル。テックにも強くてAI活用が得意。

タクヤ … 入社3年目の男性社員。真面目で少しだけコードが書ける。

リナ社長「てかタクヤ、ミニロトって知ってる？」

タクヤ「ロトですか？1〜31の中から5つ選ぶやつですよね、たしか」

リナ社長「そーそー。で、あたしそれの解析ページ作ったんだけど、聞く？」

タクヤ「解析ページって、出たり出なかったりの数字を分析するやつですか？開発工数けっこうかかりそうですね……」

リナ社長「かかんないよ？Claude Codeに頼んだら半日で終わったし、えぐくない？」

タクヤ「え？マジですか……」

そもそも何を作ったの？

jinbei-lab.devに追加した ミニロト解析ページ はこんな感じ：

機能	内容
出現頻度ヒートマップ	1〜31の各番号が歴代何回出たか色で表示
本数字グラフ	全期間・直近50回・ボーナス数字の出現頻度グラフ
ホット／コールド数字	直近50回で熱い数字・最近出ていない数字を一覧
当選番号一覧	全1387回分のデータを検索・スクロールで表示

タクヤ「これ全部AIが作ったんですか？」

リナ社長「ほぼそう。あたしがやったのは”こういうの作って”って指示することと、デザインの最終確認くらい。神じゃない？」

タクヤ「……神ですね（困惑）」

技術スタック

タクヤ「ちなみに何使ってるんですか、技術的には」

リナ社長「シンプルだよ。これだけ」

Astro … サイトのフレームワーク。静的サイト生成が得意でパフォーマンスいい
Cloudflare Pages … ホスティング。無料でGitHub pushから自動デプロイ
Chart.js … グラフ描画ライブラリ。棒グラフをサクッと実装できる
Claude Code … AIコーディングアシスタント。今回の主役

タクヤ「Astroって最近よく聞きますね」

リナ社長「パフォーマンスいいし書き方もシンプルで好き。Cloudflare Pagesと組み合わせるのが今の定番って感じ」

Claude Codeで作る流れ

タクヤ「実際どうやって指示したんですか？」

リナ社長「まずデータ用意して、あとは”こういうページ作って”って言うだけ。ワンチャンこれだけで動く」

Step 1. データを用意する

ミニロトの当選番号データはCSVで用意して src/data/miniloto.csv に置いた。

round,date,n1,n2,n3,n4,n5,bonus
1387,2026-05-19,1,10,17,20,26,23
1386,2026-05-12,12,21,25,27,30,28
...

タクヤ「このデータはどこから持ってきたんですか？」

リナ社長「みずほ銀行の公式サイトにPDFで公開されてるやつ。それをCSVに整形した」

タクヤ「整形もAIに？」

リナ社長「そこはさすがに手作業だけど、フォーマット統一はClaudeに手伝ってもらった」

Step 2. Claude Codeに指示する

実際に投げたプロンプトはこんな感じ：

ミニロトの解析ページを作ってください。
- src/data/miniloto.csv のデータを使う
- 出現頻度のヒートマップ（番号1〜31）
- 本数字の出現グラフ（Chart.js使用）
- 全期間・直近50回・ボーナス数字でタブ切り替え
- 当選番号の一覧テーブル（検索機能つき）
- Cloudflare Workers で動くこと（node:fs は使わない）

タクヤ「……これだけ？」

リナ社長「これだけ。数分待ったら最初の版が出てきた」

タクヤ「やばいですね、ほんとに」

リナ社長「でしょ。ポイントは最後の”Cloudflare Workersで動かす”って制約をちゃんと伝えること。これ忘れると後でハマる」

ハマったポイント（3つ）

タクヤ「ゼロトラブルではなかったってことですよね？」

リナ社長「まあね。3回くらい詰まった。でも全部Claudeに相談したら解決したし」

① Cloudflare Workers は Node.js じゃない

fs.readFile でCSVを読もうとしたら即エラー。CloudflareのWorkerランタイムはNode.jsではないので node:fs が動かない。

→ 詳しい解決方法は Cloudflare WorkersではNode.jsが使えない

② グラフが全く表示されない（JSONが壊れてた）

AstroでJSONデータを <script type="application/json"> に埋め込んだら、" が " にHTMLエスケープされてJSON.parseが失敗してた。

→ 詳しい解決方法は AstroでJSONを埋め込んだらグラフが消えた

③ 31番だけ色がない

番号の色を Math.ceil(n / 10) で出す実装にしたら、31番だけ ball-4 というCSSクラスが生成されてスタイルがない状態に。

→ 詳しい解決方法は 31番だけ色がない——Math.ceilの落とし穴

タクヤ「意外とハマるじゃないですか（笑）」

リナ社長「AIが作ったコードでも、環境の制約は人間が把握しておかないとね。でもコンソールのエラーをそのままClaudeに貼ったらだいたい解決してくれたし、ストレスは少なかった」

まとめ：AIで作るときのコツ

リナ社長「てかタクヤ、今回の話で何か持ち帰れそう？」

タクヤ「はい。AIって”全部お任せ”じゃなくて、“何を作るか”と”動かす環境の制約”をちゃんと伝えることが大事なんだなって」

リナ社長「そー！それだけ分かってたら爆速で作れるよ。まとめるとこれ」

データを先に用意する → AIへの指示が明確になる
環境の制約を一緒に伝える → 「Cloudflare Workersで動かす」「node:fsは使わない」など
エラーはそのままAIに貼る → コンソールのエラーをコピペするだけでOK

タクヤ「なんかこれ、プログラマーじゃなくても全然いけそうですね」

リナ社長「そういうこと！まず作ってみることが大事。次は何作る？」

つまずきポイントの詳細は順次別記事で公開予定です。