🥳

Claude CodeとバイブコーディングでPDF翻訳アプリを開発してみた

に公開
Azure
Next.js
Claude Code
Vibe Coding
pdf翻訳アプリ
tech

この記事で書いてること

  • 開発初心者がとりあえずClaude Codeとバイブコーディング(AIと対話しながら直感的にコードを書いていくこと)してみた結果
  • 開発したがら思ったことや学んだことなどを感じたままにまとめた

バイブコーディングについて

自己紹介

普段は構造設計とか物流設計をしているエンジニアです。
ソフト開発に興味を持ち出して0から勉強中。
AI関連はE資格を保持していますが、頭でっかちで実際自分で開発をしてみたことがほぼ皆無なので現在実践中です。
どんどん知識を深めたいので知らなさそうなことがあれば教えて下さい。 言葉を変な風に使ったりしてそう。

PDF翻訳アプリを開発した動機

職業柄よく論文を読んだりするのですが、英語は読むのに時間がかかる…。
英文単体の翻訳ができるサービスは無数に存在しますが、意外とOCRや翻訳ツール等を組み合わせてPDFのレイアウトを保持したまま日本語に変換してくれるサービスが少ないな…と感じたので、勉強がてら作ってみようと思いました

最終的にできたもの


フロントエンド側の画面
とりあえず必要最低限のものを。どこまでブラッシュアップするのかはわかりませんが今後改善していきたいこととかは下のほうにまとめてます。


左：翻訳後、右：元データ
確かになんかできてそう！　グラフ中の文言も翻訳されてますね

NASAのオープンデータをお借りしてます。
https://science.nasa.gov/earth/climate-change/global-warming/

技術スタック

フロントエンド

  • Next.js 15 - React
  • TypeScript
  • Tailwind CSS
    • 正直この辺はClaudeに言われるがまま入れました…なんでこれがいいのか、説明できるようになりたい。他のフレームワークだと何が違うのか知るためにまた別の機会で触ってみたい

バックエンド（Python）

  • PyPDF - PDF操作・テキストオーバーレイ
    • とりあえず調べて一番メジャーそうだったやつ
  • Azure SDK for Python - Azureサービスとの連携
    • 今回は会社でAzure使ってるので、深く考えずAzure使います！

Azure サービス

  • Azure Document Intelligence
    • PDFレイアウト解析・OCRのサービス。たけーんだこれが…。でも性能良しでお手軽だからとりあえず使用。月50ページくらいまでは無料だからテスト用には十分。
  • Azure Translator
    • テキスト翻訳用。
  • Azure Blob Storage
    • PDFファイルの一時保存用。

開発環境

  • Claude Code - AI駆動の開発支援CLI
  • Node.js - JavaScript実行環境
  • Python 3.14 - バックエンド処理
    • 余談ですが、最近会社ではPythonの過去バージョンに脆弱性が見つかり3.12以下は有無を言わさず使用できなくなりました。かなしいね。

やったこと

バックエンド開発

大まかな処理の流れ

  1. PDFからAzure Document Intelligenceでテキスト(英語)とポジション抽出
  2. 取得したテキストをAzure Translatorにぶん投げる
  3. 翻訳後テキストを受け取る
  4. PDF上にテキストを再配置(白背景、黒文字、リサイズなど)
    ⇒Pythonは少し書けるので、2くらいまでは半分自力で書いてました。
    ⇒API呼び出すだけで処理されたデータが受け取れるのですごいよね

Claude Code導入

導入自体は一瞬だった。
VS Code上の拡張機能入れるだけだったから。⇒インストール⇒認証⇒終わり！

バイブコーディング開始

VS Code上に現れたClaudeとのチャットボタンみたいなのを押して、
バイブコーディング開始。　

ええ！　すごい！！　なんか勝手に既存のpyファイル読み取って続き書いてくれてるんだけど！

とりあえず翻訳＆日本語テキスト再配置まで一瞬で出来ちゃった

PDF残しておけばよかったんだけど、残ってなかった…。
あっという間にバックエンドでやる処理については完了して、PDFの翻訳ができるようになった。

途中のやり取り

  • PDFに日本語を配置するときに、「…」に変換されてた。
    • 翻訳後の文章は日本語がちゃんと入ってそうだから原因を追究するように言って修正してもらった。
  • 翻訳後の文章が、若干違和感ある日本語になってた。
    • Document Intelligenceで取得している文字とかを見ると、１行を１文章として個別に翻訳を投げているのが原因ぽい。この部分についても指摘するとすぐに修正完了。
    • 待ち時間1分くらいでばっちり改善できてた。
  • 基本的に書いてもらったコードは一発で動いた。これでもう感動。

フロントエンド開発

未知の領域。とりあえずお願いしてみた

ざっくりClaudeには以下のようなことを言ってみた。

  • フロントエンドを開発して、最終的にはwebアプリとしてAzureにサービスを立ち上げたい
  • そのためにまずはフロントエンド側の開発をローカル環境で実装したい
  • フロントエンドを開発する言語は何がおすすめですか？ メジャーなものが良いです
    　⇒無知にも程がある。

Node.jsをおすすめされたのでいわれるがままインストールしてみて、
そのまま特に構成なども指定せず完全お任せで会話してみた。
すると…
冒頭のフロントエンドの画面が完成してました。

フロントエンド画面
まだローカルのみですが、今後Azure上で動かすところまではやってみたいと思います。

フロントエンド構成

ちょっとまだ各内容を細かく見れてない…。バックエンド側との接続もいつの間にかされてました。

frontend/
├── app/
│   ├── api/translate/route.ts    # バックエンドPythonを呼び出すAPI
│   ├── globals.css               # スタイル
│   ├── layout.tsx                # レイアウト
│   └── page.tsx                  # メインページ
├── components/
│   ├── PDFUploader.tsx           # ドラッグ&ドロップアップロード
│   └── TranslationProgress.tsx   # 進捗バー
└── 設定ファイル (package.json, tsconfig.json, etc.)

改善余地

  • バックエンド
    • お金の関係で２ページまでかつ小容量のPDFしか対応してないので、実用にはもう少し緩める必要あり。
    • Document Intelligenceが高すぎる！1ページ10円くらいなのは何とかしなければ…
      • GPTモデルのVLMに画像化したデータを投げて理解してもらうでも良いかも？
  • フロントエンド
    • 過去に翻訳したデータ見られるようにしたい
    • 翻訳前後のPDFを横に並べて比較できる機能を作りたい。
    • 最終的にはクラウド上にアプリとして立ち上げたい(自分で使う用)
      • ノート端末からも使えるかどうかを確認したい。
  • その他
    • 並列処理による高速化をどこまで図れるか確認したい。
      • 今も遅くはない(15秒くらい？)けど勉強のため。

まとめ・学んだこと

まとめ

しょっぱなとりあえず作ってみる！というところはなんとかできたような気がする。
とりあえず動くものが作れたので、今後の課題や改善点が明確になったかな。

学んだこと

  • Claude Codeとやるバイブコーディングの強力さを実感できた
    • 特にフロントエンドは全く知識がなかったのにも関わらず実装できてしまったのに感動！
      • 勝手に何もかも出来すぎて全然知識が増えなかった…
      • 今後はもう少し対話をしながら相談ベースで開発していくのを意識したほうがよさそう。
      • 今回作ったフロントエンドを読む回を一回設けたいと思う。
    • バックエンドはまだ理解しながら進められていたけどな…

Discussion