Receipt Jpの設計・技術選定・コミット履歴を解説

01 / 概要

プロジェクトの概要と目的

レシート家計簿 レシート画像をアップロードすると、Claude API（Claude Haiku）が商品名・金額・日付を自動で読み取り、カテゴリ別に分類・集計する家計簿Webアプリです。 機能 レシート画像のアップロード → Claude APIによる自動読み取り 商品名・金額・日付の一覧表示 カテゴリ別（食費・日用品・外食など）の自動分類・集計 Chart.jsによるカテゴリ別円グラフ・月別棒グラフ 登録データはブラウザのlocalStorageに保存（リロードしても消えない） 構成 client/ — React Vite フロントエンド server/ — Node.js Express バックエンド。Claude APIの呼び出しはここでのみ行い、APIキーをブラウザに公開しない セットアップ 1. サーバー 2. クライアント ブラウザで http://localhost:5173 を開いてください。

本記事は公開されている構成と main ブランチのコミットを一次情報として整理しています。

02 / 使用技術

使用技術と役割

03 / 設計

構成から読み解く設計

主な項目は CLAUDE.md、README.md、client、server です。

• API・サーバー層

04 / 変更履歴

コミットから見る実装の変遷

以下は既定ブランチの直近の変更です。リンク先で原文と一次情報を確認できます。

1. 2026/07/04
   機能・コンテンツを追加72aa65fをGitHubで確認 ↗
2. 2026/07/04
   機能・コンテンツを追加b198ab2をGitHubで確認 ↗
3. 2026/07/04
   機能・コンテンツを追加8012e01をGitHubで確認 ↗

05 / 学び

このプロジェクトから得られる学び

• 変更を小さく記録する

  コミット単位で目的を分けると、実装の意図を追跡しやすくなります。

• 構成と技術選定を結び付ける

  JavaScriptの採用理由と各ディレクトリの責務を説明できることが保守性につながります。

• READMEと実装を同時に育てる

  説明とコードを近い状態に保つことが、再利用と振り返りを助けます。

06 / よくある質問

よくある質問