#25 TypeScriptで学ぶAI API(ChatGPT等)の呼び出し方の基本

8月 06, 2026

はじめに

最近は、ChatGPTのようなAI(人工知能)が文章を生成してくれるサービスを、自分のプログラムから呼び出して使う機会が増えてきました。こうした「AI API」を使うと、自分で作ったアプリに「文章を要約する」「質問に答える」といったAIの機能を組み込むことができます。

API(エーピーアイ)とは、あるプログラムが別のプログラムの機能を呼び出すための「窓口」のようなものです。AI APIの場合、自分のプログラムからインターネット経由でAIサービスにリクエスト(依頼)を送り、その返事(レスポンス)を受け取って使います。

この記事では、TypeScriptからAI APIを呼び出す際の基本的な考え方を、実際に動かせる形ではなくサンプルコードとして紹介します。実在のAPIキー(利用者を識別するための秘密の文字列)は使わず、仕組みの理解に絞って解説します。

AI API呼び出しの基本の流れ

AI APIの利用は、おおまかに次の3ステップで進みます。

APIに送るデータ(質問文など)を用意する
fetchやaxiosといった仕組みでAPIにリクエストを送る
返ってきたレスポンスを受け取り、必要な部分だけ取り出して使う

この一連のやり取りは、注文を紙に書いて店員に渡し、料理が出てくるのを待つイメージに近いです。TypeScriptでは、このやり取りを型(データの形を決める仕組み)を使って安全に書けるのが大きな特徴です。

fetchで呼び出す場合

ブラウザやNode.jsに標準で用意されているfetch関数を使うと、追加のライブラリなしでAPIを呼び出せます。async/awaitという書き方を使うと、非同期処理(時間のかかる処理を待つ仕組み)を上から下へ読める順序で書けます。「レスポンスが返ってくるまで待ってから次の処理に進む」という流れを、コードの見た目通りに表現できるのが利点です。

// レスポンスの型を先に定義しておく
type ChatApiResponse = {
  choices: {
    message: {
      content: string;
    };
  }[];
};

async function askAI(question: string): Promise<string> {
  const response = await fetch("https://api.example.com/v1/chat", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer YOUR_API_KEY", // 実際はダミー
    },
    body: JSON.stringify({
      model: "sample-chat-model",
      messages: [{ role: "user", content: question }],
    }),
  });

  if (!response.ok) {
    throw new Error(`APIエラー: ${response.status}`);
  }

  const data: ChatApiResponse = await response.json();
  return data.choices[0].message.content;
}

ポイントはtype ChatApiResponseで、あらかじめレスポンスの形を定義していることです。JavaScriptだけで書くと、レスポンスの中身は実際に受け取るまで分かりません。TypeScriptなら「このAPIはこういう形で返ってくるはずだ」と事前に決めておけます。これにより、存在しないプロパティにアクセスしようとした場合など、コードを書いている最中にエディタが間違いを教えてくれます。

axiosで呼び出す場合

axiosは、fetchより少し便利な機能をまとめた外部ライブラリです。エラー時の扱いやリクエストの書き方がやや簡潔になります。

import axios from "axios";

async function askAIWithAxios(question: string): Promise<string> {
  try {
    const res = await axios.post<ChatApiResponse>(
      "https://api.example.com/v1/chat",
      { model: "sample-chat-model", messages: [{ role: "user", content: question }] },
      { headers: { Authorization: "Bearer YOUR_API_KEY" } }
    );
    return res.data.choices[0].message.content;
  } catch (error) {
    console.error("AI APIの呼び出しに失敗しました", error);
    throw error;
  }
}

axios.post<ChatApiResponse>のように、山括弧(<>)で型を指定できるのがTypeScriptらしい書き方です。こうするとres.dataの中身が自動的にChatApiResponse型として扱われ、補完やチェックが効くようになります。

エラーハンドリングを忘れずに

AI APIの呼び出しは、通信環境やサーバー側の都合で失敗することが珍しくありません。エラーハンドリング(エラーが起きたときの対処)を書いておかないと、失敗時にアプリ全体が止まってしまう恐れがあります。

基本の対処は次の2点です。

fetchではresponse.okがfalseのときにエラーとして扱う(fetchは通信自体が成功していれば、404や500のようなエラー応答〔サーバーが処理できなかったことを示すHTTPステータスコード〕でも例外を投げないため)
axiosやawaitを使う処理全体はtry/catchで囲み、失敗時にユーザーへ分かりやすいメッセージを表示する

まとめ

TypeScriptからAI APIを呼び出す基本は、他のWeb APIの呼び出しと大きくは変わりません。異なるのは、レスポンスの型をあらかじめ定義しておくことで、コードを書いている段階で間違いに気づきやすくなる点です。今回紹介したfetchとaxios、どちらの書き方でも仕組みは共通しているので、まずは型定義とasync/await、エラーハンドリングの3点セットを意識してみてください。実際に使う際は、APIキーの取り扱いなどセキュリティ面にも注意しましょう。

本ページはプロモーションを含みます。

参考書籍(PR)

TypeScriptをもっと学びたい方には「プロを目指す人のためのTypeScript入門」がおすすめです。

このブログを検索

Toyoのプログラミング学習ブログ