自社サービスにAIを組み込むなら ― GPT（ChatGPT API）を使う場合 〜実装と活用のポイント〜
導入：生成AIを“活用する側”へ
ChatGPTをはじめとする生成AIの進化により、WebやアプリにAIを組み込む機会が急速に増えています。
ChatGPT APIもAIを組み込む有力な選択肢のひとつとなっています。
API経由でChatGPTの知能を直接呼び出すことで、チャットボットや記事生成、社内ツールなど、幅広い分野で活用できます。
本記事では、ChatGPT APIの基本機能・料金体系・実装例を中心に、実際にサンプルコードを交えて紹介します。
第一章：ChatGPT APIの基本と料金体系
ChatGPT APIは、インターネット経由でAIモデルにテキストを送信し、JSON形式で応答を受け取るシンプルな仕組みです。
PHP・JavaScript・Swift・Kotlinなど、あらゆる言語や環境で手軽に利用できます。
ChatGPT APIを使うメリット
| 項目 | 内容 |
|---|---|
| コスト効率が高い | 通常のChatGPT（月額課金のChatGPT Plusなど）を使うより、API経由の方が安価に運用できるケースが多い。使用量に応じた従量課金制で、1,000トークン（数百文字）あたり数円〜数十円程度。 |
| モデル選択が可能 | GPT-4、GPT-4-turbo、GPT-3.5など、用途に応じて指定できる。 |
| Markdown対応 | レスポンスはMarkdown形式で返されるため、HTML変換してCSSで自由にレイアウトできる。 |
| 拡張性が高い | REST構成のため、既存CMSや社内システムにも統合しやすい。 |
トークン課金制は、「使った分だけ支払う」という合理的な仕組みです。
一度の会話で消費するトークン量を抑えれば、月額数百円〜数千円で本格的なAI機能を運用することも可能です。
第二章：実装例 ― ChatGPT API連携
ここでは、VueでのChatGPT API連携のコア部分を抜粋し、ポイントを解説します。
vue
// ChatGPT API 呼び出し部分（抜粋）
const response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${OPENAI_API_KEY}`,
},
body: JSON.stringify({
model: "gpt-4-turbo",
messages: [{ role: "user", content: userInput }],
stream: true,
}),
})
1. APIリクエスト構造の基本
ChatGPT APIは、HTTP POST形式でJSONを送信し、JSONを受け取るという非常に汎用的な設計になっています。
そのため、JavaScriptに限らず、PHP・Swift・Kotlinなど、どの言語からでも同じように扱うことが可能です。
特に重要なのがmessagesプロパティ。
これは会話履歴を保持する構造で、roleごとにメッセージを並べることでChatGPTに文脈を理解させられます。
vue
"messages": [
{ "role": "system", "content": "あなたは親切なアシスタントです。" },
{ "role": "user", "content": "自己紹介して。" }
]
この配列を保持しておけば、「前回の発言を踏まえた応答」を再現可能です。
単発のQ&Aだけでなく、自然なチャット体験を実装するための基盤になります。
2. stream: true でリアルタイム受信
通常のAPIレスポンスは「リクエスト → 完了 → 一気に表示」という流れですが、Streamingを使うと、生成の過程そのものがUI体験に変わります。
stream: trueを指定すると、ChatGPT APIはレスポンスを逐次送信します。
これにより、ChatGPT公式サイトのように“文字が少しずつ流れる”表示を再現できます。
response.body.getReader()でサーバーからのデータストリームを読み込み、TextDecoderでUTF-8文字列に変換しながら描画する仕組みです。
vue
const reader = response.body.getReader()
const decoder = new TextDecoder("utf-8")
while (true) {
const { done, value } = await reader.read()
if (done) break
const chunk = decoder.decode(value)
displayText += parseChunk(chunk)
}
このループ処理によって、トークン単位で描画される自然な出力を実装できます。
結果として、ユーザーは“AIが考えながら話しているような”滑らかな体験を得られます。
3. Markdown整形とレンダリング
ChatGPT APIの出力はMarkdown形式で返されます。
Vueでは、次のようにHTMLへ変換して描画します。
vue
<div v-html="marked(displayText)"></div>
CSSで調整すれば、ChatGPT風のスタイルも実現できます。
このように、ChatGPT APIは短いコードで完結しつつ、文脈保持・Markdown整形・リアルタイム描画まで対応できます。
どの言語やフレームワークでも同様の考え方で構築でき、開発者にとって扱いやすいAPI設計です。
まとめ：柔軟でコスパの高いAI導入手段
ChatGPT APIは、ChatGPTの知能を自社のWeb・アプリに統合できる柔軟な手段です。
従量課金制でコスト管理がしやすく、StreamingやMarkdown対応など、開発者にとって扱いやすい設計になっています。
特別なAI基盤を構築しなくても、APIを通じて「自社UIの中でAIが自然に応答する体験」を実現できます。
AI導入を検討する企業にとって、現実的で拡張性の高い選択肢といえるでしょう。
今回は、ChatGPT APIをご紹介しました。
今後もアプリ開発の現場から、実践的な知見やノウハウを発信していきます。
次回の更新もお楽しみに。
お問い合わせ
ARCHESでは、アプリの企画・設計・開発・運用まで、 一貫した体制でサポートを行っています。開発に関するご相談は下記ページからお気軽にご相談ください。