Gemini APIでシンプルなチャットを作る
大規模言語モデルを使ってみたかった。
Gemini APIを選んだ。GoogleのAPIで、無料枠がある。APIキーを取得すれば、すぐに使える。まずは単純なチャット形式のやり取りから試した。
作ったもの
Gemini APIを使ったシンプルなチャットシステムだ。
ユーザーがテキストを入力すると、Gemini APIに送信して、回答を取得する。APIキー、モデル名、トークン数を管理する機能も実装した。
モデル一覧を取得する機能もある。利用可能なモデルを一覧表示し、選択できる。各モデルのトークン上限も確認できる。
API呼び出しの仕組み
Gemini APIの呼び出しは意外とシンプルだ。
async function callGemini(apiKey, model, prompt) {
const API_URL = `https://generativelanguage.googleapis.com/v1beta/${model}:generateContent?key=${apiKey}`;
const response = await fetch(API_URL, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
contents: [{ parts: [{ text: prompt }] }]
})
});
const data = await response.json();
return { status: response.status, data };
}
URLにAPIキーとモデル名を含め、リクエストボディにcontents配列を設定する。partsにtextフィールドでプロンプトを渡す。
最初、リクエストの形式を間違えた。一度つまずいた。
ドキュメントを見直したら、contentsは配列で、各要素にparts配列を含む必要があった。ネストが深い。
正しい形式で送信したら、すぐに動いた。これだ。
モデル選択の実装
Geminiには複数のモデルがある。gemini-1.5-pro、gemini-1.5-flashなど。
モデル一覧を取得するAPIを呼び出し、generateContentに対応しているモデルだけをフィルタリングする。
async function listModels(apiKey) {
const url = `https://generativelanguage.googleapis.com/v1beta/models?key=${apiKey}`;
const response = await fetch(url);
const data = await response.json();
return data;
}
// generateContent対応モデルのみ抽出
const models = (data.models || []).filter(m =>
(m.supportedGenerationMethods || []).includes("generateContent")
);
モデルごとに、入力トークン上限と出力トークン上限が異なる。Proは約100万トークン、Flashは約100万トークン。どちらも大容量だ。
トークン数の管理
ユーザーが入力するたびに、トークン数を表示している。
// モデル情報のマップ（各モデルのトークン上限を保持）
const modelInfoMap = {
'gemini-1.5-pro': { inputTokenLimit: 1000000 },
'gemini-1.5-flash': { inputTokenLimit: 1000000 }
// ... 他のモデル情報
};
function updateTokenCount() {
const input = document.getElementById("gemini-input").value;
// 簡易トークン数（厳密にはAPIのcountTokens推奨）
const tokens = Math.ceil(input.length / 4);
const model = document.getElementById("gemini-model").value.trim();
let limit = modelInfoMap[model]?.inputTokenLimit || '?';
document.getElementById("token-count").textContent = `入力トークン: ${tokens} / ${limit}`;
}
文字数を4で割って、簡易的にトークン数を計算している。正確ではないが、概算としては十分だ。
厳密なトークン数を知りたい場合は、countTokens APIを使うべきだが、今回は簡易版で対応した。
トークン数が上限を超えた場合は、送信前にエラーを表示する。ユーザーが無駄なリクエストを送らずに済む。
実際に試した質問
「JavaScriptの非同期処理について教えて」と質問した。Geminiはasync/await、Promise、コールバックの3つのパターンを丁寧に説明してくれた。コード例も付いている。分かりやすい。
「Three.jsで球体を作る方法は？」と聞いた。SphereGeometryの使い方を、パラメータの説明を含めて教えてくれた。すぐに実装できた。
「このコードのエラーを直して」と、エラーが出るコードを送った。Geminiは原因を特定し、修正版のコードを提示してくれた。驚いた。エラーの説明も丁寧だ。
APIレスポンスの構造
Geminiのレスポンスは、candidates配列の中にcontentがあり、さらにparts配列の中にtextフィールドがある。ネストが深いが、慣れれば簡単だ。
全体の流れ
ユーザーの入力を受け取り、Gemini APIに送信し、回答を取得してチャット履歴に追加する。このサイクルを繰り返す。
使ってみて
Gemini APIでシンプルなチャットシステムを作った。
ポイントは以下の3つ：
- API呼び出しは
fetch()でPOSTリクエスト、contents配列にparts配列を含める
- モデル一覧APIで利用可能なモデルを取得し、
generateContent対応のみをフィルタリング
- 簡易トークン数計算（文字数÷4）で上限チェック
Gemini APIの基本的な使い方を理解できた。無料枠で十分試せるのが嬉しい。
同じようにGemini APIを試したい方の参考になれば嬉しいです。
まとめ
今回は、Gemini APIを使ったシンプルなチャットシステムを作った。
ポイントは以下の4つ：
- APIキーを入力してGemini APIに接続
- モデル選択機能で複数のモデルを切り替え可能
- トークン数を簡易計算（文字数÷4）して上限チェック
- JSON形式でアクション判定し、対応する関数を実行
Gemini APIの基本的な使い方を学べた。リクエストとレスポンスの構造はシンプルで、すぐに実装できる。
さらに深く学ぶには
この記事で興味を持った方におすすめのリンク：
自分の関連記事：
最後まで読んでくださり、ありがとうございました。