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

はじめに

ChatGPTのようなAI(人工知能)に、Webページやプログラムから直接質問を送りたいと思ったことはありませんか。実は「API(エーピーアイ)」という仕組みを使えば、JavaScriptからでもAIに文章を投げて、返ってきた答えを画面に表示することができます。APIとは「Application Programming Interface」の略です。あるサービスの機能を外部のプログラムから使わせてもらうための「窓口」のようなものです。この記事では、JavaScriptからAI APIを呼び出す基本の流れを、初めての人にもわかるように解説します。

AI APIを使う前に知っておきたいこと

APIキーとは何か

多くのAIサービスは、誰でも自由に使えるわけではなく「APIキー」と呼ばれる文字列を発行しています。これはサービスを利用するための合言葉のようなもので、リクエスト(サービスへの依頼)に添えることで「誰がどれだけ利用したか」をサービス側が把握できる仕組みです。APIキーは家の鍵と同じくらい大切な情報なので、コードにそのまま書いてSNSやGitHubに公開したりしないよう注意しましょう。

ブラウザとNode.jsでの違い

JavaScriptには大きく分けて、Webブラウザ上で動かす場合と、Node.js(サーバー側でJavaScriptを実行できる環境)で動かす場合があります。ここで気をつけたいのが、ブラウザのコードにAPIキーを直接書いてしまうと、Webページのソースを見れば誰でもキーを見られてしまうという点です。そのためAPIキーを使うAI API呼び出しは、基本的にNode.jsなどのサーバー側で行います。ブラウザからは、そのサーバーを経由してAIに問い合わせるという形にするのが安全とされています。

fetch APIを使った呼び出し方の基本

JavaScriptにはfetchという、Webサービスと通信するための標準機能が最初から用意されています。Pythonなどでは外部ライブラリをインストールして通信を行うことが多いですが、JavaScriptではfetchが言語やブラウザに組み込まれています。そのため、追加の準備なしにすぐ使い始められるのが特徴です(Node.jsの場合はバージョン18以降で標準対応しています)。基本の書き方は次のようになります。

const apiKey = process.env.AI_API_KEY; // 環境変数からキーを読み込む

async function askAI(question) {
  const response = await fetch("https://api.example.com/v1/chat", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      messages: [{ role: "user", content: question }]
    })
  });

  const data = await response.json();
  console.log(data);
}

askAI("こんにちは");

コード中のprocess.env.AI_API_KEYは、「環境変数」(プログラムの外側で管理し、実行時にコードへ渡す値)からAPIキーを読み込む書き方です。APIキーをコードに直接書かずに済むため、先ほど触れた「キーを人目に触れさせない」ための代表的な方法です。

fetchは非同期処理(処理の完了を待つ間、他の作業を止めずに進められる仕組み)を前提に作られています。そのため、awaitという「結果が返るまで待つ」という意味のキーワードとセットで使うのが基本です。awaitを使う関数には、あらかじめasyncという目印を付けておく必要があります。

エラー時に気をつけたいこと

API呼び出しは必ず成功するとは限りません。APIキーが間違っている、通信が不安定、利用回数の上限に達しているなど、さまざまな理由でエラーが返ることがあります。こうした場合に備えて、tryとcatchという「エラーが起きても処理を止めずに対応する」ための構文を使うと安心です。

async function askAI(question) {
  try {
    const response = await fetch("https://api.example.com/v1/chat", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${apiKey}`
      },
      body: JSON.stringify({ messages: [{ role: "user", content: question }] })
    });

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

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("エラーが発生しました:", error);
  }
}

response.okは、通信が正常に成功したかどうかを判定できる便利なプロパティです。エラーの内容には原因のヒントが含まれていることが多いので、まずは落ち着いてメッセージを確認してみましょう。

まとめ

JavaScriptからAI APIを呼び出す基本の流れは、次の3ステップです。

  1. APIキーは環境変数などで管理し、コードに直接書かない
  2. 組み込みのfetchを使い、async/awaitでリクエストを送る
  3. try/catchでエラーに備える

JavaScriptはfetchが標準で使えるぶん、外部ライブラリの準備なしにすぐ試せるのが魅力です。最初は非同期処理の書き方に戸惑うかもしれませんが、慣れてしまえば短いコードでAIとのやり取りができるようになります。まずは簡単な質問を投げてみるところから始めてみましょう。

関連記事

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

参考書籍(PR)

JavaScriptをもっと学びたい方には「改訂新版JavaScript本格入門」がおすすめです。

コメント

コメントを投稿

このブログの人気の投稿

#11 Rustで学ぶエラーハンドリングの基本

Rustのエラーハンドリングは、他の言語のような「例外」という仕組みを持たず、`Result`という型を使った独自の考え方が中心になります。この記事では、Rustにおけるエラーハンドリングの基本を解説します。 Result型という考え方 失敗する可能性がある処理は、`Result`という「成功か失敗かを表す型」を返します。 fn divide(a: i32, b: i32) -> Result<i32, String> { if b == 0 { return Err(String::from("0では割れません")); } Ok(a / b) } 成功時は`Ok`、失敗時は`Err`という形で結果を包んで返します。 matchで結果を扱う match divide(10, 0) { Ok(result) => println!("結果: {}", result), Err(message) => println!("エラー: {}", message), } ?という便利な記号 Rustには、`Result`がエラーだった場合に、その場で関数の呼び出し元にエラーを伝えて処理を中断できる`?`という記号があります。 fn calculate() -> Result<i32, String> { let result = divide(10, 0)?; Ok(result) } Rustならではの注意点 他の言語の「エラーが起きても気づかずに進んでしまう」という問題を防ぐため、Rustは`Result`の中身を確認しない限り、警告を出す仕組みになっています。エラーの可能性を無視できない設計こそが、Rustの安全性を支えています。 まとめ Rustのエラーハンドリングは`Result`型が中心で、`match`や`?`を使って結果を扱います。エラーの可能性を無視できない設計に慣れていきましょう。 本ページはプロモーションを含みます。 参考書籍(PR) Rustをもっと学びたい方には「 実践Rust入門[言語仕様から開発手法まで] 」がおすすめです。...
続きを読む

#16 TypeScriptで学ぶ辞書型(マップ)の基本

TypeScriptの辞書に相当する仕組みは、JavaScriptと同じですが、キーと値の型をあらかじめ決めておけるのが特徴です。この記事では、TypeScriptにおける辞書の扱い方を解説します。 型付きのオブジェクト interface Person { name: string; age: number; } const person: Person = { name: "太郎", age: 20 }; キーの型が決まっていない辞書 キーの名前が事前に決まっていない辞書のような使い方をしたい場合は、次のように書きます。 const scores: { [key: string]: number } = {}; scores["太郎"] = 90; Mapを使う場合 const person = new Map<string, string>(); person.set("name", "太郎"); `Map<string, string>`のように、キーと値それぞれの型を指定できます。 TypeScriptならではの注意点 型付きのオブジェクト(`interface`)を使うと、存在しないキーにアクセスしようとした際に、実行前の段階でエラーとして教えてもらえます。データの形が決まっている場合は、キーが自由な辞書よりも`interface`を使うほうが安全です。 まとめ TypeScriptの辞書は、形が決まっているなら`interface`、自由なキーを扱うなら`{ [key: string]: 型 }`や`Map`を使います。用途に応じて型の付け方を選びましょう。 本ページはプロモーションを含みます。 参考書籍(PR) TypeScriptをもっと学びたい方には「 プロを目指す人のためのTypeScript入門 」がおすすめです。
続きを読む

#19 Goで学ぶテスト(単体テスト)の基本

Goはシンプルな文法が魅力ですが、書いたコードが正しく動くかどうかは別問題です。この記事では、Goで書いたコードを自動でチェックする「テスト」の基本を解説します。 なぜテストを書くのか コードを修正するたびに、関連する機能が壊れていないかを手作業で確認するのは大変です。テストを用意しておけば、コマンド一つで動作確認ができ、安心してコードを直せるようになります。 Go標準のテスト機能 Goには追加のライブラリを入れなくても使える testing パッケージが標準で備わっています。テスト対象のファイルと同じディレクトリに、名前の末尾が _test.go のファイルを作ります。 // add.go package main func add(a int, b int) int { return a + b } // add_test.go package main import "testing" func TestAdd(t *testing.T) { result := add(2, 3) if result != 5 { t.Errorf("add(2, 3) = %d; want 5", result) } } テスト関数の名前は Test から始める決まりです。ターミナルで go test と実行すると、 _test.go 内の Test から始まる関数がすべて自動で実行されます。 複数パターンをまとめてテストする Goでは、複数の入力パターンをスライス(配列のようなもの)にまとめて、まとめてテストする書き方(テーブル駆動テスト)がよく使われます。 func TestAddCases(t *testing.T) { cases := []struct{ a, b, want int }{ {2, 3, 5}, {0, 0, 0}, {-1, 1, 0}, } for _, c := range cases { if got := add(c.a, c.b); got != c.want { t.Errorf("add(%d,...
続きを読む