はじめに
記事を開いていただきありがとうございます！
現在私は GitHub Copilot を活用しながら、業務効率化のためのWebアプリ開発に取り組んでいます。
本記事ではその中のひとつ、OCRを使った経費申請アプリ を作ってみての学びを共有します。
ぜひご覧ください！
目次
開発の背景と使った技術
開発の背景
- 桁を打ち間違えて差し戻し
- 西暦と和暦を間違える
- 月末にまとめて入力 → 精神崩壊
上記のような課題は経費申請で起こりがちだと思います。
「経費申請課題あるある」を解決したい！！！
もしレシートの情報が自動で読み取られて入力まで済んだら、
経費申請の手間がぐっと減るのでは？
そう思ったのが、この開発のきっかけです。
結果として、アプリを作っただけでなく、OCR精度の壁や先輩とのやり取りを通じて多くの学びがありました。
この記事ではそのストーリーをお伝えします。
技術スタック
- フロント: React 19 + Vite（高速リロードで試行回数増）
- UI / スタイル: MUI + Tailwind（部品＋細かい余白調整）
- OCR: OCR.space API + ブラウザ前処理（トリミング/二値化）→ 正規表現で金額・日付・店舗候補抽出
- Docker: node:20 ベース開発コンテナ
- GitHub Copilot: 実装補助
アプリの概要
アプリの流れ
- 領収書を撮影してアップロード
- OCRが金額・日付・店舗名を読み取る
- フォームに自動入力される
- ユーザーは確認&修正して送信
入力はほぼゼロ。人がやるのは最後のチェックだけです！
OCR精度の壁と改善の工夫
期待して動かした結果...。
私が手に握りしめえていたレシートだったため
「レシートぐちゃぐちゃで全然読めないじゃん！」
「この金額、1,000,000円って…ありえないだろ！（笑）」
正直「これ、実用化できるのか…？」と不安になりました。
そんな中での先輩たちとの雑談。
「このレシート、もはやAIどころか人間の目でも読めないレベルじゃない？」
この一言をきっかけに、改善の方向性が見えてきました。
1. 画像前処理
- アップロード時に余白を自動トリミング
- 明るさ補正で印字をはっきり
👉 画像の大きさでOCRが認識できないエラーも発生することが多かったのでトリミングなどで確実に修正しました。
2. 金額のバリデーション
- 「数値型」「範囲（1〜100万円）」をチェック
👉￥1,234がl234と誤認識されても即弾けるよう修正しました。
３. UIで修正しやすくする
- 入力欄をロックせず修正可能に
- 候補切り替えをワンタップに
👉 完全自動じゃなくても修正のストレス激減できます。
さらに、GitHub Copilot のサポートにも助けられました。
- コメントを書くだけで正規表現付きのバリデーションを提案
- React のフォーム更新ロジックを自動生成
OCR精度を高めるような「人の工夫」と、
繰り返し処理を任せられる「AIのサポート」。
この組み合わせが、開発を一段加速させてくれました。
結果、入力の約8割削減 を達成！
最後に
結果
- 30秒程度で入力が完了する見込み
- OCRの精度が安定すれば、差し戻しも大幅に減らせそう
学び
- OCRは完璧じゃない。だからこそ「どう現実に落とすか」の工夫が大事
- AI × 人間の組み合わせが最強
- 「周りと一緒に作る」ことが改善の近道
この記事が「自分も挑戦してみようかな」と思うきっかけになれば嬉しいです！
まだまだ改善すべきところはたくさんありますが、
小さな工夫の積み重ねで、少しずつ現実的に使えるツールに近づけていけたらと思います。
最後までご覧いただきありがとうございました！！