中学生にも分かる 自分の資料に答えるAI検索アプリの作り方 #5
◉ AI×ビジネス活用 / 2026年08月

中学生にも分かる 自分の資料に答えるAI検索アプリの作り方 #5

2026年08月3日 読了目安:約20分 著者:AIFRONTNEWS編集部 RAG / VS Code / テスト

あなたの資料に根拠がない質問には、アプリが「登録した資料の中では確認できません」と落ち着いて答えられたら安心ですか。

今回は、VS Code内のOpenAI Codexと一緒に、資料検索つきAI(RAG)に“根拠がなければ答えない”ルールを加えます。

準備から、安全なAPIキー管理、実装、テストでの確認まで、迷わず進められるよう画面操作つきで案内します。

この回のゴール

  • できること:資料に根拠が十分でないときはノーアンサーを返し、根拠があるときは出典を添えて答える小さなWebアプリを完成させる。
  • 用意するもの:VS Code、OpenAI Codex、OpenAIアカウント(API利用)、練習用のサンプル資料、評価用の質問セット。
  • 大切な約束:APIキーは環境変数で管理し、コード・画面・Codexへの依頼に実値を書かない。料金や仕様はOpenAI公式で必ず最新を確認する。
最初に知っておきたい用語
  • RAG:質問に関連する資料を先に探し、その内容を見ながら答える仕組み。図書館で係の人が本の該当ページを開いて教えてくれるイメージ。
  • File Search:OpenAIが提供する資料検索の道具。登録したファイルを「意味」で探せる保管場所(ベクトルストア)を使う。
  • ベクトルストア:文章の意味を数の並びにして保存し、似ている内容を見つけやすくした倉庫のようなもの。
  • ノーアンサー設計:根拠が弱いときは無理に答えず「分からない」と返すルール。もっともらしい誤回答(ハルシネーション)を減らすための守り。
  • 閾値(いきち):検索の確からしさを数で区切る線。これより低ければ答えない、と決める基準。
  • トップk:検索で上位何件の候補を使うかという数。少なすぎると見落とし、多すぎるとノイズが増える。
  • Responses API:OpenAIの回答生成API。File Searchの結果を参照しながら回答を作れる。
  • 評価テスト:想定質問をまとめて流し、狙い通りに動くかを確かめること。

1. この記事でできること

今回の目標は、RAGの「資料にない質問へ答えない」ふるまいを最小構成で入れることです。
買い物で「レシートにない商品は返品できない」のと同じで、根拠が記録にないときは処理を止めます。
このルールにより、もっともらしいけれど裏付けのない回答を減らします。

2. 完成イメージ

ノーアンサー判定と根拠付き回答の完成イメージ
Photo by kuu akura on Unsplash

3. 最初に知っておきたいこと

RAG(Retrieval-Augmented Generation)は「地図+メガネ」。地図=登録資料、メガネ=関係部分を拡大して読む道具です。
この記事では「地図に載っていない場所は案内しない」=ノーアンサー設計を入れます。
誤回答(ハルシネーション)は0にはなりませんが、根拠が薄いときに止めることで大きく減らせます。
モデル名、対応ファイル、上限、料金などは変わることがあるため、作業前にOpenAIの公式ドキュメントとPlatformの画面で最新を確認してください。

4. 対象読者

RAGアプリの対象読者像の説明
Photo by Emile Perron on Unsplash

前回の記事をまだ読んでいない場合は、短い準備の流れを先に確認してください。
中学生にも分かる 自分の資料に答えるAI検索アプリの作り方 #4

5. 必要なものと入れ方

ここでは、道具を「これは何?→用意→入れ方→最初の設定→できたか確認」の順に説明します。
道具は料理のレシピ本とキッチンの関係に似ています。VS Codeはキッチン、Codexは助っ人シェフ、OpenAI APIは食材の宅配サービスです。

VS Code

  1. これは何?:プログラムや設定を編集し、動かすための作業机のアプリです。
  2. 用意するもの:インターネットにつながるPC、ブラウザ(Edge/Chrome/Safariなど)。
  3. 入れ方・開き方:公式サイトからOSに合うインストーラを取得し、案内に従って入れ、アプリを開きます。公式の入手先はVS CodeのWebサイトをご確認ください。
  4. 最初の設定:初回起動時に日本語表示が必要なら拡張機能で言語パックを追加します。
  5. できたか確認:「Visual Studio Code」のウィンドウが開き、左側に「拡張機能」アイコン(四角が4つ)が見えたら成功です。

OpenAI Codex(VS Code拡張)

  1. これは何?:VS Codeの中で指示文を渡すと、コードを書いてくれるコーディングの相棒です。
  2. 用意するもの:OpenAIアカウント(ChatGPTアカウントまたはOpenAI APIキーでサインイン)。
  3. 入れ方・開き方:左の「拡張機能」を開き、検索ボックスに「Codex」と入れて検索。OpenAIのCodex拡張を選び、「インストール」を押します。完了後、VS Codeの再読み込みが求められたら従います。
  4. 最初の設定:「サインイン」ボタンを押し、画面の案内に沿ってサインイン。サインイン後、コマンドパレット(上の検索欄)から「Codex: Open Chat」を実行し、エディタ右側にチャット欄を開きます。
  5. できたか確認:「Codex Chat」ペインが現れ、メッセージ入力欄が表示されていれば成功です。

OpenAI Platform(API)

  1. これは何?:アプリからAIに質問したり、File Searchで資料を探したりするための公式サービスです。
  2. 用意するもの:OpenAIアカウント、支払い方法の設定(必要に応じて)。料金は利用量により発生する可能性があります。最新の金額はOpenAIの料金ページとPlatformのダッシュボードで確認してください。
  3. 入れ方・開き方:ブラウザでOpenAIのPlatformにサインインし、APIを利用できる状態にします。
  4. 最初の設定:ダッシュボードでAPIキーの発行やアクセス権限を確認します。画面の操作方法は公式ドキュメントを参考にしてください。
  5. できたか確認:ダッシュボードでAPIキーが管理でき、利用状況の画面が見られたら準備完了です。

Node.js(実行環境)

  1. これは何?:JavaScriptでサーバーを動かすための土台です。コンロのような存在です。
  2. 用意するもの:PCの管理者権限。
  3. 入れ方・開き方:公式サイトからLTS版をダウンロードしてインストール。案内に従って完了します。
  4. 最初の設定:特に難しい設定は不要です。
  5. できたか確認:VS Codeの下部ステータスバーや、プロジェクトの初期化時にNode.jsバージョンが表示されればOKです。

練習用のサンプル資料と評価用質問セット

  1. これは何?:アプリに登録して検索させる資料と、動作確認のための質問リストです。スポーツの練習で使う標的のような役割です。
  2. 用意するもの:個人情報や会社の秘密、有料コンテンツは使いません。Codexに依頼して、架空のサンプル資料を作ってもらいます。
  3. 入れ方・開き方:Codexが用意したサンプルファイルをプロジェクト内に保存します。
  4. 最初の設定:ファイル形式はPDF/TXT/Markdown/DOCXなど最小限を許可します。
  5. できたか確認:アプリ画面の「登録状態」で、サンプル資料が登録済みと表示されればOKです。

6. エージェントと作るものの全体像

RAGフローの全体像(検索、閾値、ノーアンサー、ログ)
Photo by Hanna Morris on Unsplash

完成形は「最小プロダクト」。
流れは、質問→File Searchで検索→スコア判定(閾値)→回答またはノーアンサー→ログ保存です。
家の玄関で「宅配便か訪問販売か」を表札で判定するように、一定の条件を満たすときだけ中へ通します。

7. 手順1: ツールを準備する

目的と動き

VS CodeでCodexを使える状態にし、プロジェクトを開けるようにします。
ここが土台です。運動前のストレッチのように、後の作業をスムーズにします。

画面で行うこと

終えたら確認

右側にCodexチャットが開き、メッセージ入力欄があればOKです。
見当たらないときは、拡張機能の一覧でインストール状態を再確認します。

8. 手順2: APIキーを安全に用意する

APIキーを環境変数とenvで安全に管理する方法
Photo by Zulfugar Karimov on Unsplash

目的と理由

APIキーはアプリの合鍵です。見える場所に置くと、家の鍵を玄関に貼るのと同じ危険があります。
環境変数や.envでサーバー側だけが読むようにします。.gitignoreでリポジトリに載せません。

画面で行うこと

終えたら確認

アプリの設定画面やログに、APIキーの実値が一切表示されていないことを確認します。
SDKやCLIの動作確認はCodexに自動チェックを依頼します。

9. 手順3: エージェントにアプリを作ってもらう

目的と完成物

Codexに、日本語の依頼文だけで以下を作ってもらいます。
バックエンド(Responses API+File Search)、フロント(チャットUI)、ノーアンサー判定、出典表示、ログ保存、評価用テストスクリプトです。

このボックスをコピーして、VS Code内のCodexチャットに送ります。

Codexに送るプロンプト

目的:RAGのノーアンサー設計を最小実装した小さなWebアプリを作る。前回(#4)までの機能(資料登録・検索・参照表示)を壊さないこと。
要件:
- サーバーはNode.js/Express。OpenAI Responses APIを使用し、File Searchツールで登録資料を検索する。Assistants APIは使わず、Responses API+File Searchの組み合わせで実装。
- 秘密情報(OPENAI_API_KEYなど)はサーバー側の環境変数から読み、ブラウザへ送らない。APIキーの実値をコード、HTML、ログ、依頼文に書かない。
- 安全なAPIキー管理:.envを用意し、.gitignoreに.envを追加。サンプルとして.env.exampleを作る(ダミー値)。
- 取り扱うファイル形式はPDF/TXT/Markdown/DOCXなど必要最小限。ファイル名だけで安全と判断しない。サイズ上限と拡張子チェックをサーバーで実装。
- File Search:ベクトルストアを利用し、検索スコア(または類似度スコア)を取得。トップkとスコア閾値を設定可能にする(例:TOP_K、SCORE_THRESHOLD を環境変数で)。
- ノーアンサー判定:
  1) 上位ドキュメントのスコアが閾値未満、または根拠の一致が確認できない場合は、一般知識で補わず固定文面「登録した資料の中では確認できません」を返す。
  2) 回答時は、引用できた根拠スニペットと出典ファイル名(APIが返す引用情報の範囲で)を回答下に配列で返す。
- フロント:シンプルなチャットUI。質問欄、回答欄、参照元一覧(ファイル名+スニペット)。
- ログ:各リクエストごとに、質問、検索クエリ、スコア、採否(回答/ノーアンサー)、参照元ファイル名、時刻をJSON Linesでlogs/以下に保存。
- 評価:tests/ に評価用の質問セット(CSVまたはJSON)を用意。nodeスクリプトから一括実行し、各質問の合否(期待:answer/none)、理由(閾値未満/出典なし/OK)を表で標準出力する。
- 動作確認:
  a) ローカル起動方法をREADMEに記載(コマンドは自動で生成・実行ボタンも用意)。
  b) ブラウザで動作確認できるURLと、初回テスト手順をREADMEに記載。
- 質問方針:不明点(Responses APIとFile Searchの具体的な呼び出し、引用情報の取り出し方、スコアの向きなど)があれば、作業前に質問してから実装して。
- サンプル資料:実在の秘密情報は使わず、あなたが架空の安全な資料を数点作成し、登録・検索できる状態にして。
出力:変更ファイル一覧、主要ファイルの要点、環境変数の項目、テスト実行方法、初回の確認チェックリスト。

Codexが作るものと確認ポイント

10. 手順4: 動かして確認する

ブラウザでの動作確認とテスト実行の様子
Photo by Campaign Creators on Unsplash

目的

根拠あり/なしの分岐が正しく働くかを、画面とテストで確かめます。
水道の元栓を少しずつ開けて漏れがないか点検するイメージです。

画面で行うこと

成功の目印

11. 手順5: エージェントと直す

目的

誤回答をさらに減らすため、パラメータと前処理を調整します。ラジオのチューニングを微調整する感覚です。

Codexへの依頼例と観察ポイント

12. よくあるエラー

RAG実装のよくあるエラーと対処
Photo by David Pupăză on Unsplash

13. 次に試すこと

14. まとめ

RAGノーアンサー設計のまとめと注意点
Photo by Jakub Żerdzicki on Unsplash

「資料に根拠がないなら答えない」は、RAGにおける最重要ガードレールです。
小さく作り、テストで守備範囲を見える化し、運用で定期的に見直しましょう。
料金や仕様は変動するため、OpenAIの公式ドキュメントとPlatformの画面で都度確認してください。

参考文献・公式情報