C
Claude Code Hackathon

Lab: 見積書ジェネレーターを作る

このLabでは、Claude Code に 見積書ジェネレーター を作ってもらいます。 プログラミングの知識は一切不要です。日本語で指示を出すだけで、ブラウザで動く本格的な業務ツールが完成します。

所要時間： 約 20〜30 分

完成イメージ： 会社名・商品名・数量・単価を入力すると、消費税込みの見積書がブラウザ上に表示され、PDF出力や履歴管理までできるWebアプリケーション

Phase 1：準備

ウォームアップ体験で作った hackathon フォルダを使います。 ターミナルに以下を 1行ずつ 貼り付けて Enter してください。

cd ~\Desktop\hackathon
claude

> マークが出て入力待ちになれば準備完了です。

ヒント： もし hackathon フォルダがまだない場合は、デスクトップに右クリック → 新規作成 → フォルダー で作ってください。

Phase 2：基本の見積書ツールを作成する

さっそく Claude Code に見積書ツールを作ってもらいましょう。 以下のプロンプトをそのままコピーして、> の後ろに貼り付けて Enter を押してください。

会社名、商品名、数量、単価を入力すると見積書が表示されるWebツールを作ってください。
消費税10%の自動計算、合計金額の表示、印刷ボタン付きでお願いします。

Claude Code の動き

  1. Claude Code が「HTMLファイルを作成します」と計画を見せてくれます
  2. 許可を求められたら y を押して Enter
  3. 数秒〜十数秒で estimate.html（または似た名前のファイル）が作成されます

ポイント： たった1つのプロンプトで、HTMLファイルがまるごと完成します。デザイン、計算ロジック、印刷機能まで全部入りです。

Phase 3：ブラウザで動作確認する

作成されたファイルを実際に開いてみましょう。

  1. デスクトップの hackathon フォルダを開く
  2. 作成された .html ファイルを ダブルクリック
  3. ブラウザ（Edge や Chrome）で見積書ツールが開きます

試してみよう

以下の情報を入力フォームに入れてみてください。

項目入力例
会社名株式会社サンプル商事
商品名コピー用紙 A4
数量100
単価500

入力すると、小計・消費税・合計金額が 自動で計算されて 見積書のプレビューに反映されるはずです。

印刷ボタンも押してみてください。印刷プレビューが開き、そのまま紙に印刷したりPDFに保存したりできます。

驚きポイント： プログラミングの知識ゼロで、ものの30秒で業務ツールが1つ完成しました。ここからが Claude Code の本領発揮です。

Phase 4：機能追加の指示を重ねる

ここからが一番面白いところです。Claude Code に追加の指示を出して、ツールをどんどん進化させていきます。

会話を続けるだけでOKです。 Claude Code は今まで作ったファイルの内容を覚えているので、「さっきのファイルに〜を追加して」と言えば伝わります。

4-1. 商品を複数行追加できるようにする

商品を複数行追加できるようにしてください。
「行を追加」ボタンで商品行を増やせて、それぞれの小計と全体の合計が自動計算されるようにしてください。

Enter を押して、許可を求められたら y → Enter。 ファイルが更新されたら、ブラウザで開き直して（またはF5で再読み込みして）確認してみてください。

商品を何行でも追加できるようになっているはずです。

4-2. PDF出力ボタンを追加する

PDF出力ボタンを追加してください。
ボタンを押すと見積書の内容がPDFファイルとしてダウンロードされるようにしてください。

ヒント： ブラウザを再読み込み（F5キー）すると、更新された内容が反映されます。

4-3. 会社ロゴ画像をヘッダーに入れられるようにする

会社ロゴ画像をヘッダーに入れられるようにしてください。
画像ファイルを選択するボタンをつけて、選んだ画像が見積書の左上に表示されるようにしてください。

ロゴ画像がなくても大丈夫です。パソコンにある適当な画像ファイル（写真でもアイコンでも）で試してみてください。

4-4. 見積書番号と日付を自動で入れる

見積書番号を自動採番にして、日付も自動で入るようにしてください。
見積書番号は「EST-20250101-001」のように日付＋連番の形式でお願いします。

もう手入力する項目がどんどん減っていきます。面倒な番号管理も自動化されます。

4-5. 過去の見積を保存・呼び出しできるようにする

過去の見積をブラウザに保存して、一覧から呼び出せるようにしてください。
保存ボタンを押すと現在の見積内容が保存され、
「保存済み見積一覧」から過去の見積を選んで読み込めるようにしてください。

用語メモ： 「ブラウザに保存」とは、ブラウザの localStorage という仕組みを使うことです。サーバーは不要で、あなたのパソコンの中だけにデータが残ります。難しいことを知らなくても、Claude Code が全部やってくれます。

Phase 5：完成品を確認する

ブラウザを再読み込み（F5）して、完成したツールを確認してみましょう。

最初の状態（Phase 2 完了時点）

  • 商品1つだけ入力できる
  • 消費税と合計の自動計算
  • 印刷ボタン

最終的な状態（Phase 4 完了時点）

  • 商品を何行でも追加できる
  • PDF出力ができる
  • 会社ロゴを設定できる
  • 見積書番号が自動で振られる
  • 日付が自動で入る
  • 過去の見積をブラウザに保存・呼び出しできる

最初は30秒で作った単機能ツールが、会話を重ねるだけで本格的な業務アプリに進化しました。

しかも、あなたは一行もコードを書いていません。日本語で「こうしてほしい」と伝えただけです。

ここが Claude Code ならでは

ブラウザ版の Claude（claude.ai）との違い

ブラウザ版の Claude にも同じお願いはできます。しかし、ブラウザ版は コードをチャット画面に表示するだけ です。そのコードをコピーして、テキストエディタに貼り付けて、ファイルとして保存して…という作業を自分でやる必要があります。

Claude Code は違います。実際にファイルを作成し、修正し、動くアプリケーションをあなたの手元に残します。 しかも、前の会話を覚えているので「ここを変えて」「これを追加して」と言うだけで、既存のファイルを正しく更新してくれます。

これが「対話しながらアプリケーションを育てる」という、Claude Code ならではの体験です。

Phase 6：驚きのポイントまとめ

今回の体験を振り返ってみましょう。

1. プログラミング知識ゼロで業務アプリが作れた

HTML、CSS、JavaScript といった技術用語を一度も使わずに、日本語の指示だけで見積書ジェネレーターが完成しました。

2. 会話を重ねるだけで機能が増えていく

Claude Code は前の会話と作成したファイルの内容を覚えています。「これを追加して」「ここを変えて」と言うだけで、既存のコードに正しく機能を組み込んでくれます。これを 反復的な開発（イテレーティブ開発） と呼びます。エンジニアが日常的にやっていることを、あなたも日本語だけでできるようになったのです。

3. 30秒 → 本格業務アプリ

最初のプロンプトで基本形が30秒で完成し、5回の追加指示で本格的な業務アプリケーションに進化しました。全部合わせても20〜30分程度です。

4. ファイルが手元に残る

作ったツールは hackathon フォルダに保存されています。いつでもダブルクリックで使えますし、USBメモリにコピーして他のパソコンでも使えます。サーバーやインターネット接続は不要です。

5. さらに発展できる

今日作ったものをベースに、さらに「宛名を敬称付きにして」「備考欄を追加して」「英語版も作って」など、いくらでも発展させられます。Claude Code との会話を続けるだけです。

さらにチャレンジしたい方へ

時間が余った方は、以下のプロンプトも試してみてください。

見積書のデザインをもっとプロフェッショナルにしてください。
ヘッダーに青いラインを入れて、フォントを整えて、全体的にビジネス文書らしい見た目にしてください。
見積書の備考欄と支払条件の欄を追加してください。
支払条件はドロップダウンで「翌月末払い」「翌々月末払い」「納品時払い」から選べるようにしてください。
見積書と一緒に、簡単な納品書も自動生成できるようにしてください。
見積書の内容をコピーして納品書フォーマットに変換するボタンを追加してください。

うまくいかないときは

こんなときやること
ファイルが作られたか分からないhackathon フォルダを開いて .html ファイルがあるか確認してください
ブラウザで開いても何も表示されないファイルを右クリック →「プログラムから開く」→ Edge または Chrome を選んでください
計算結果がおかしいClaude Code に「消費税の計算が合っていないので修正してください」と伝えてください
PDF出力がうまく動かないブラウザによって動作が異なる場合があります。「PDF出力がうまく動きません。別の方法で実装してください」と伝えてみてください
保存した見積が消えたブラウザのキャッシュを削除すると localStorage のデータも消えます。大事なデータは PDF で書き出しておきましょう
前回の続きから再開したい同じフォルダで claude を起動すれば、ファイルは残っているので「estimate.html をさらに改善してください」と伝えれば続きから作業できます
エラーの英語メッセージが出たそのメッセージをそのまま Claude Code に貼り付けて「このエラーを直してください」と伝えてください
全部やり直したいhackathon フォルダ内の .html ファイルを削除して、Phase 2 からやり直してください

困ったときは → 参加者向け Q&A

トラブル発生時 → トラブルシューティング