AIは、チャット画面で質問に答えるだけのものではありません。Web開発者にとっては、文章生成、要約、検索、分類、JSON出力、関数呼び出し、コード補助などをアプリに組み込める処理基盤として見ると理解しやすくなります。
この記事では、AI・生成AI・LLM・AI APIの違い、Web開発での使いどころ、AIアプリの基本構成、最初に学ぶ順番を整理します。
一般的な生成AIの使い始め方を知りたい場合は、先に 生成AIとは｜初心者向けにできること・使い方・注意点を解説 を読むと全体像をつかみやすいです。この記事では、WebサイトやWebアプリにAIを組み込む開発者目線に絞ります。
この記事の内容は、2026年7月9日時点のOpenAI API、Google Cloud公式ドキュメントをもとにしています。AI API、モデル名、料金、制限、提供機能は変わりやすいため、実装前には必ず公式ドキュメントを確認してください。
結論：AIは文章を返す道具ではなく、Web開発に組み込める処理基盤として理解する
エンジニアがAIを学ぶときは、「ChatGPTのような会話ツール」としてだけ見るより、入力を受け取り、モデルで処理し、必要なら外部データや関数を使い、結果をUIやシステムに返す仕組みとして見るほうが実装に近づきます。
Web開発でAIを使う場面は、大きく分けると次のようになります。
| 使い方 | 例 | 開発で考えること |
|---|---|---|
| 文章を生成する | 説明文、メール、FAQ、ブログ構成 | プロンプト、出力形式、校正フロー |
| 情報を整理する | 要約、分類、タグ付け、比較表 | 入力データ、JSON出力、保存先 |
| 外部データを使う | 社内資料検索、FAQ検索、商品検索 | RAG、検索、権限、引用元 |
| 関数やAPIを呼ぶ | 予約、在庫確認、DB検索、メール送信 | Function Calling、Tool Calling、検証 |
| 開発を補助する | コード生成、レビュー、テスト作成 | 差分確認、セキュリティ、実行テスト |
つまり、AIは「便利な相談相手」でもありますが、Webアプリ側から見ると、自然言語を扱える新しい処理レイヤーです。
AI・生成AI・LLM・AI APIの違い
AI関連の言葉は似ていますが、開発では役割を分けて理解すると迷いにくくなります。
| 用語 | 意味 | Web開発での見方 |
|---|---|---|
| AI | 分類、予測、生成、判断支援などを行う技術の総称 | 広い概念。従来の機械学習も生成AIも含む |
| 生成AI | 文章、画像、音声、動画、コードなどを新しく作るAI | 記事作成、要約、画像生成、コード補助などに使う |
| LLM | 大規模言語モデル。文章やコードなどのテキスト処理に強いモデル | チャット、要約、分類、JSON出力、コード相談の中心になる |
| AI API | AIモデルをアプリケーションから呼び出すためのインターフェース | サーバー側からリクエストを送り、結果をUIやDBへ返す |
たとえば、ユーザーが問い合わせフォームに入力した文章を分類したい場合、実装者が直接扱うのはAI APIです。その奥でLLMが文章を処理し、生成AIとして分類結果や返信案を作ります。
OpenAI APIのテキスト生成ドキュメントでは、プロンプトからテキスト、コード、数式、JSON、人間らしい文章などを生成できることが説明されています。Google Cloudの生成AIドキュメントでも、モデル選択、プロンプト設計、デプロイ、監視、RAG、エージェント、関数呼び出しなど、アプリ開発の流れとして生成AIが整理されています。
Web開発でAIが使われる代表的な場面
Web開発にAIを組み込むときは、いきなり大きなAIエージェントを作るより、既存の機能の一部をAIに置き換えるところから考えると安全です。
問い合わせやFAQの回答補助
ユーザーの質問を分類し、関連するヘルプ記事を探し、回答の下書きを作る用途です。
ただし、AIにそのまま回答を任せると、存在しない仕様や間違った手順を返すことがあります。最初は「候補を作る」「社内担当者が確認する」「根拠リンクを表示する」のように、人間が確認できる設計にするのがおすすめです。
管理画面での文章作成
商品説明、メタディスクリプション、FAQ、記事タイトル案などを作る用途です。
この用途では、AIの回答をそのまま公開するのではなく、下書きとして保存し、編集者が確認してから公開するフローにすると運用しやすくなります。WordPressの記事制作やブログ運用では、AIでブログ記事を書く方法 とも相性がよい領域です。
テキスト分類と構造化
問い合わせ内容を「料金」「不具合」「資料請求」のように分類したり、自由入力の文章から名前、会社名、要望、緊急度を取り出したりする用途です。
ここでは文章の自然さよりも、アプリ側で扱いやすい形式が重要になります。AIの回答をJSONとして扱いたい場合は、後続記事の `ai-json-output` や `structured-outputs-basics` で深掘りするのがよいです。
検索やRAG
サイト内の記事、社内ドキュメント、FAQ、PDFなどを検索し、その内容をもとに回答させる構成です。
Google Cloudの生成AIドキュメントでは、GroundingやRAGはAIの回答をデータソースにつなげ、正確性を高め、ハルシネーションを減らすための技術として説明されています。自分のサイト記事をAI検索に使う場合は、通常のチャットAIよりも、検索、Embedding、ベクトルDB、チャンク分割の理解が必要になります。
AIコーディング
コード生成、エラー調査、レビュー、テスト作成、リファクタリングにAIを使う方法です。
Google CloudのAIコード生成解説では、自然言語の説明からコードスニペットや関数を生成したり、コード補完、デバッグ支援、リファクタリングに使ったりできることが紹介されています。実務では、AIに任せる範囲と人間が確認する範囲を分けることが大切です。
AIコーディングツールを比較したい場合は、AIコーディングツール比較 も参考にしてください。
AI APIとローカルAIの違い
AIをWebアプリに組み込む方法は、大きく分けるとクラウドのAI APIを使う方法と、ローカル環境や自前のサーバーでモデルを動かす方法があります。
| 項目 | AI API | ローカルAI |
|---|---|---|
| 始めやすさ | APIキーとSDKで始めやすい | モデル、GPU、環境構築が必要 |
| 品質 | 高性能なモデルを使いやすい | モデル選定と環境に左右される |
| データ管理 | 外部サービスへ送るデータを精査する必要がある | 手元や自社環境で閉じやすい |
| 運用 | API制限、料金、障害、仕様変更に注意 | サーバー、GPU、モデル更新、監視が必要 |
| 向いている用途 | Webアプリへの早い組み込み、PoC、実務機能 | 機密性重視、検証、ローカル開発、独自運用 |
最初に学ぶなら、AI APIから始めるほうが理解しやすいです。アプリ側の入力、サーバー側の処理、APIレスポンス、UI表示というWeb開発の流れにそのまま乗せられるためです。
一方で、機密情報や顧客情報を扱う場合は、AIに送ってよいデータと送ってはいけないデータを必ず分けます。一般的な注意点は、生成AIの安全な使い方 でも整理しています。
AIアプリの基本構成：入力・モデル・ツール・出力
AIアプリは、次の4つに分けて考えると設計しやすくなります。
| 要素 | 役割 | 例 |
|---|---|---|
| 入力 | ユーザーの質問や対象データ | フォーム入力、記事本文、PDF、検索クエリ |
| モデル | 入力を処理するAI | LLM、画像生成モデル、Embeddingモデル |
| ツール | モデルが必要に応じて使う外部機能 | 検索、DB、関数、社内API、ファイル検索 |
| 出力 | アプリ側で使う結果 | 文章、JSON、分類ラベル、UI表示、保存データ |
処理の流れは、たとえば次のようになります。
ユーザー入力
↓
フロントエンドから自分のサーバーAPIへ送信
↓
サーバー側でプロンプト・権限・入力値を検証
↓
AI APIへリクエスト
↓
必要なら検索・DB・関数を使う
↓
文章またはJSONを受け取る
↓
UIに表示、またはDBに保存フロントエンドから呼び出す場合も、AIサービスのAPIキーをブラウザに置かないことが重要です。ブラウザ側のコードは誰でも見られるため、APIキーを含めると悪用される可能性があります。
フロント側は、自分のサーバーに対して通常のAPIリクエストを送ります。
async function requestAiSummary(text) {
const response = await fetch("/api/ai-summary", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ text }),
});
if (!response.ok) {
throw new Error("AI summary request failed");
}
return response.json();
}この例では、ブラウザは `/api/ai-summary` に文章を送るだけです。AI APIキーの管理、プロンプトの組み立て、ログ、レート制限、エラー処理はサーバー側で行います。
JavaScriptで外部APIを扱う基礎は、JavaScriptでJSONデータを取得する方法 や JavaScript Promiseの基本 が土台になります。クライアントとサーバーの分担は、クライアントサーバーシステムとは も参考になります。
エンジニアが最初に学ぶべき順番
AI開発は範囲が広いので、最初からRAG、エージェント、MCP、ローカルLLMまで一気に学ぶ必要はありません。Web開発者なら、次の順番が現実的です。
1. Web APIの基本を確認する
AI APIも、基本的にはHTTPリクエストとレスポンスです。まずは `fetch`、JSON、非同期処理、エラー処理、サーバーAPIの作り方を確認します。
Reactで外部APIを扱う場合は、Reactで外部APIのJSONデータを取得する方法 も土台になります。
2. プロンプトの役割を理解する
AIへの指示は、単なる質問文ではなく、出力の品質を左右する入力設計です。目的、前提、制約、出力形式、例を分けて書けるようにすると、結果が安定しやすくなります。
一般的な書き方は プロンプトの書き方 にまとめています。開発者向けには、今後 `prompt-engineering-basics` で、プロンプトをアプリ内の設計要素として扱う方法を掘り下げます。
3. JSON出力を扱う
WebアプリにAIを組み込むなら、文章をそのまま表示するだけではなく、分類結果、スコア、配列、オブジェクトとして扱う場面が増えます。
最初は「JSONで返して」とプロンプトで指定するだけでも試せますが、実務では形式が崩れることがあります。OpenAIのStructured Outputsでは、JSON Schemaに沿った出力を扱う方法が用意されています。これは後続の `structured-outputs-basics` で詳しく扱います。
4. Function CallingとTool Callingを理解する
AIに外部関数やAPIを使わせると、単なる文章生成から、実際のアプリ機能に近づきます。
OpenAIのFunction Callingドキュメントでは、モデルがアプリ側の関数や外部データにアクセスできるようにする仕組みとして説明されています。たとえば、在庫確認、予約検索、データベース参照、メール送信などは、この考え方と相性があります。
5. RAGやエージェントに進む
社内資料、サイト記事、FAQ、PDFをAIに参照させたい場合はRAGが必要になります。複数の手順をAIに任せたい場合は、AIエージェントやTool Calling、MCPの理解が必要になります。
すでに公開済みの AIエージェントとは では、普通のチャットAIとの違いを整理しています。
AI実装で起こりやすい失敗
AIをWeb開発に組み込むときは、次の失敗が起こりやすいです。
| 失敗 | 何が問題か | 対策 |
|---|---|---|
| APIキーをフロントに置く | ブラウザから見えて悪用される | サーバー側でAI APIを呼ぶ |
| AIの回答をそのまま保存・公開する | 誤情報や不自然な文章が混ざる | 下書き扱いにし、人間が確認する |
| 出力形式を決めない | UIやDBで扱いにくい | JSON、項目名、必須値を決める |
| 入力データをそのまま送る | 個人情報や機密情報を送る危険がある | 送信前にマスク、除外、同意確認を行う |
| 評価せずにプロンプトを変える | 品質劣化に気づきにくい | 代表ケース、テスト、ログで比較する |
| 全部をAIエージェントに任せる | 失敗時の原因が追いにくい | 小さい処理に分けて段階的に自動化する |
AIは便利ですが、アプリに組み込むほど、通常のWeb開発と同じように認証、権限、ログ、エラー処理、テスト、ユーザー体験が重要になります。
次に読むべき関連記事
この記事では、AIをWeb開発に組み込むための全体像を整理しました。次は目的に合わせて読む記事を分けると進めやすいです。
- 一般的な生成AIの使い始め方: 生成AIとは｜初心者向けにできること・使い方・注意点を解説
- AIへの指示の基本: プロンプトの書き方
- AIツールの選び方: 生成AIツール比較
- AIコーディングの入口: AIコーディングツール比較
- AIエージェントの考え方: AIエージェントとは
- JavaScriptのAPI取得基礎: JavaScriptでJSONデータを取得する方法
今後は、`generative-ai-basics`、`llm-basics`、`ai-json-output`、`structured-outputs-basics`、`function-calling-basics` の順に、より実装寄りの記事へつなげていく予定です。
まとめ
エンジニアがAIを学ぶときは、チャットツールとしてではなく、Webアプリに組み込める処理基盤として理解すると整理しやすくなります。
重要なのは、次の5つです。
- AI、生成AI、LLM、AI APIを分けて理解する
- AI APIはサーバー側から呼び出し、APIキーをブラウザに置かない
- AIの出力は文章だけでなく、JSONや分類結果として扱える
- 外部データや関数を使うと、RAGやFunction Callingの設計が必要になる
- 便利さだけでなく、情報漏洩、誤回答、評価、ログ、テストを考える
まずは、AIを「何でもできる魔法」ではなく、「入力、モデル、ツール、出力を設計する機能」として見るところから始めると、次の実装記事にも進みやすくなります。