講師が作ったPDF比較ツールのデモを見た後、同じアプリをゼロから自分のプロンプトで開発します。Claude Codeへの「指示の出し方」が試される実践セッションです。
Session 3ではHTMLファイル1つで動くアプリを作りました。ここからは、サーバーとAI APIを使った本格的なウェブアプリに挑戦します。
ただし、今回は完成品のコードを渡して改修する形ではありません。講師のデモを見てから、自分自身のプロンプトでゼロからアプリを開発していただきます。
講師が作った pdf-compare-app フォルダは参照用として配布しています。行き詰まったときにコードを見る用途に使ってください。メインの学びは「自分のプロンプトで作ること」にあります。
講師がPDF比較ツールの完成版を操作します。画面を見ながら、以下の点を意識して観察してください。
PDFをアップロードするエリアが2つ、比較実行ボタン、結果の表示エリアがどう配置されているかを見てください。
PDFを選ぶ → 比較を実行 → 結果を読む → レポートやメールに変換、という一連の流れを追ってください。
概要、一致点、相違点（重要度つき）、片方にだけある記述、の4セクションに分かれて表示されます。
比較結果をビジネスレポートやメール文面に変換するボタンがあります。上司への報告を自動化する発想です。
後の開発で「この画面を参考にしてください」とClaude Codeに見せる材料になります。Windows の場合は Win + Shift + S、Mac の場合は Cmd + Shift + 4 で画面の一部をキャプチャできます。
配布フォルダの sample-data/ に3種類の文書ペアが入っています。講師と一緒にそれぞれの内容を開いて確認しましょう。比較対象の文書にどんな差分が含まれているかを事前に把握しておくと、完成後の動作検証がスムーズになります。
| セット | 文書の種類 | ファイル名 | 注目すべき差分 |
|---|---|---|---|
| set1 | 設備点検手順書 | set1_設備点検手順書_v1.0.pdf set1_設備点検手順書_v2.0.pdf | v2.0でGMP対応の追加、重量検査装置の手順追加、充填精度基準の変更 |
| set2 | 業務委託契約書 | set2_業務委託契約書_A社案.pdf set2_業務委託契約書_B社案.pdf | 報酬条件、責任範囲、契約期間の条項の差異 |
| set3 | 技術仕様書 | set3_技術仕様書_HX-200現行.pdf set3_技術仕様書_HX-300次期.pdf | 型番の違い、スペック数値、新機能の有無 |
自分専用の開発フォルダを作り、必要なファイルだけ配置します。
my-pdf-compare フォルダを作成してください。sample-data/ を丸ごと my-pdf-compare/ にコピーしてください。.env ファイルを作って講師配布のAPIキーを記入します。claude と入力してClaude Codeを起動してください。.env ファイルに記載するAPIキーは認証情報です。メールやチャットに貼り付けたり、GitHubにアップロードしたりしないでください。研修終了後にキーは無効化されます。
このPDF比較ツールは、アップロードされたPDFの全文をClaude APIに送信して分析しています。研修ではダミーデータを使うため問題ありませんが、実業務で使う場合は注意が必要です。社外秘の文書、個人情報を含む書類、法的に外部送信が制限されるデータは、APIに送信してよいかセキュリティポリシーを事前に確認してください。.envファイルをGitにコミットしないよう .gitignore に追加する運用も習慣にしてください。
ここが本セッションの核です。デモで見た画面をゴールとして、Claude Codeに「何を作りたいか」を自分の言葉で伝えてください。
プロンプトをいきなり完璧に書く必要はありません。まず大まかな指示を出し、足りない部分を追加で伝える。Session 3で身につけた「具体的に / 一度にひとつ / 結果を確認」のリズムがここでも使えます。
以下の要素をヒントにして、自分なりのプロンプトを組み立ててください。一度に全部伝えても、数回に分けて伝えても構いません。
Claude Codeに「どんな開発者として振る舞ってほしいか」を伝えます。
作りたいものを端的に伝えます。一文で言い切れるのが理想です。
使う技術やポート番号など、守ってほしい制約を伝えます。
なぜ作るのか、どんな場面で使うのかを補足します。スクリーンショットの説明も有効です。
テスト用のデータがどこにあるかを伝えます。
ファイル構成の指定です。サーバー側とフロント側を分ける構成も伝えられます。
外部APIをどう使うかを伝えます。キーの場所も知らせてください。
以下は全要素を盛り込んだ場合の一例です。丸写しではなく、自分の言葉で書き換えて使ってください。
プロンプトを送信すると、Claude Codeがファイルを生成し、必要なパッケージのインストールまで実行してくれます。生成が終わったら、ターミナルで npm start を実行してブラウザで http://localhost:3001 を開いてください。画面が表示されれば第一段階は成功です。
sample-data/ の set1（設備点検手順書 v1.0 と v2.0）を使って比較を実行してください。結果が表示されればアプリは完成です。
もし結果の表示がおかしかったり、機能が足りなかったりしたら、追加のプロンプトで修正を依頼してください。一度で完璧にならなくて当然です。
Claude Codeがserver.jsを修正した場合は、ターミナルで Ctrl+C → npm start でサーバーを再起動してください。public/ フォルダだけの変更ならブラウザのリロード（F5）で反映されます。
このアプリの server.js には、Claude APIに送る分析指示（プロンプト）が含まれています。「AIに指示を出す文章を、別のAIに書いてもらう」構造です。ここを調整すると分析の切り口が変わります。「法務観点で分析して」「安全管理の視点で比較して」といった指示も有効です。
思うように動かない場合は、配布済みの pdf-compare-app フォルダのコードを見て構いません。server.js のプロンプト構造や public/ のUI構成を参考にして、自分のアプリに反映してください。