本日の最終成果物です。2つのPDFをアップロードするとAIが差分を分析するウェブアプリを、セットアップし、動かし、Claude Codeでカスタマイズします。
Session 3ではHTMLファイル1つで動くアプリを作りました。ここからはサーバーとAI APIを使った本格的なアプリに挑戦します。
PDF文書比較ツールは、2つのPDFをアップロードすると、Claude APIがその内容を読み取り、一致点・相違点・片方にしかない記述を構造的に分析して表示するアプリです。分析結果をレポート形式やメール形式に変換する機能もあります。
2つのPDFをアップロードして「比較を実行する」を押すだけ。AIが内容を読み取り、一致点、相違点、固有の記述を分類して返します。
比較結果をボタン1つでビジネスレポートや社内メールの文面に変換できます。上司への報告書作成を自動化する発想です。
Session 3のチェックリストはHTMLファイル1つで完結しました。PDF比較ツールは、サーバー（Express）がPDFの受け取りとClaude APIへのリクエストを担当し、フロントエンド（HTML/CSS/JS）がユーザー操作と結果表示を受け持ちます。役割が分かれている分、実務に近い構成です。
講師が配布したフォルダの中に pdf-compare-app があります。このフォルダをVSCodeで開いてください。
npmはNode.jsに付属するパッケージ管理ツールです。npm install を実行すると、このアプリが必要とするライブラリ（Express、Anthropic SDK、multerなど）が自動でダウンロードされ、node_modules フォルダに格納されます。
package.json というファイルに「このアプリが何を必要としているか」が書かれていて、npm install はそれを読み取って処理します。
Claude APIを使うにはAPIキーが必要です。プロジェクトのルートに .env ファイルを作成してください。
.env にする（ドットから始まる点に注意）.env ファイルに記載するAPIキーは認証情報です。メールやチャットに貼り付けたり、GitHubにアップロードしたりしないでください。研修終了後にキーは無効化されます。
セットアップが完了したら、サーバーを起動します。
ターミナルに「PDF比較アプリが起動しました: http://localhost:3001」と表示されたら成功です。ブラウザで http://localhost:3001 を開いてください。
ターミナルで Ctrl + C を押すとサーバーが停止します。再度 npm start で起動できます。カスタマイズ中はサーバーを一度止めてから再起動する場面があります。
このアプリがどう動いているかを把握すると、カスタマイズの精度が上がります。ファイル構成はシンプルです。
アプリの頭脳です。PDFの受け取り、Claude APIへのリクエスト、結果の返却を担当します。Express というフレームワークで動いています。
ユーザーがブラウザで見る画面です。PDFのアップロード、結果の表示、変換ボタンなどを担当します。
新しいターミナルを開いて（サーバーは動かしたまま）、Claude Codeを起動してください。
Claude Codeはファイルの中身を読んで解説してくれます。「/api/compare はどういう処理をしていますか？」のように、特定のエンドポイントを深掘りする質問もできます。
APIは、プログラム同士が会話するための窓口です。このアプリでは、ブラウザがサーバーにPDFを送る窓口（/api/compare）と、Claude APIに分析を依頼する窓口の2つのAPIが登場します。
エンドポイントはAPIの中の個々の入口のことです。/api/compare、/api/convert/report、/api/convert/email の3つがこのアプリのエンドポイントにあたります。
Session 3で覚えた「要件を伝える → 結果を確認 → 追加指示」のサイクルを、このアプリでも使います。以下のカスタマイズを順番に試してください。
フロントエンドの見た目をカスタマイズします。サーバーの再起動は不要で、ブラウザのリロード（F5）だけで反映されます。
server.jsのプロンプトを修正して、分析の出力内容を変えてみます。変更後はサーバーの再起動（Ctrl+C → npm start）が必要です。
レポートとメール以外に、もう1つの出力形式を追加してみます。
server.jsを変更した場合は、ターミナルで Ctrl+C → npm start でサーバーを再起動してください。public/ フォルダだけの変更なら、ブラウザのリロード（F5）で反映されます。
ここまでの演習を終えた方は、自分の業務を想定して自由に機能を追加してみてください。