JavaScriptでGemini APIを使用するまで
2025年10月現在、いまだにGemini APIは一部無料で使える生成AIのAPIです。
そのため、何かしらAIを使用したアプリを作ろうとしたときによく利用しています。
ただ、「どう設定したら使えるんだっけ?」とわからなくなることが多々あるので、備忘録として手順を残します。
APIキーの準備
まずは、管理画面からAPIキーを用意します。
API管理画面
右上のAPIキーを作成をクリックして、新しいキーを作成します。
「キー名の設定」はわかりやすい名前を付けておきます。
「インポートしたプロジェクトを選択」は、Googleサービスの使用や課金の管理などで使用します。
もし、まだ作成していない場合は、Create projectから新しくプロジェクトを作成してください。
※始めてプロジェクトを作成する場合は、支払い情報の登録ができていないはずなので、デフォルトで無料枠になる(?)はずです。
APIキーを生成後は、APIの情報が表示されます。
(この時、割り当てティアのところに無料枠と書かれていれば、勝手に課金されない設定になっています。)
キーの青文字をクリックすると、APIキーの詳細情報が表示されます。
この中に、実際に使用するAPIキーが記載されています。
後ほどAPIキーを使用するので、コピーするなどしておいてください。
APIを使用する
Gemini APIを使用するためのライブラリをインストールします。
今回はJavaScriptを使用するので、npm install @google/genaiをターミナルで実行します。
実行後、package.jsonにGemini APIのライブラリが記入されていることを確認します。
テストとして、下記の内容を記述するjsファイルを作成します。
YOUR_API_KEYは先ほどコピーしたAPIキーを入力してください。
import { GoogleGenAI } from "@google/genai";
const ai = new GoogleGenAI({ apiKey: "YOUR_API_KEY" });
async function main() {
const response = await ai.models.generateContent({
model: "gemini-2.5-flash",
contents: "Hello",
});
console.log(response.text);
}
main();
これをターミナルでnodeで実行すると、下記のように出力されます。
「Hello! How can I help you today?」と出力されました。
もうちょっと追加で設定
.envでAPIキーを管理する
先ほど、APIキーを入力したかと思いますが、ベタ打ちのAPIキーはセキュリティ上避けた方が良いです。
そのため、.envファイルを作成してそこにAPIキーを管理するようにしましょう。
.envファイルを扱うためのツールをインストールします。
npm i --save dotenv
.envファイルを作成して、APIキーを記入します。
GEMINI_API_KEY="YOUR_API_KEY"
先ほど実行したjsファイルに、dotenvをインポートする記述と、.envファイルから呼び出すAPIキーを取得するように記述します。
+ import 'dotenv/config';
import { GoogleGenAI } from "@google/genai";
+ const apiKey = process.env.GEMINI_API_KEY;
+ const ai = new GoogleGenAI({ apiKey: apiKey });
- const ai = new GoogleGenAI({ apiKey: "YOUR_API_KEY" });
モジュールシステムをCommonJSからESModuleに変更する
importを使用してライブラリを使用しているために、実行すると警告が表示されます。
package.jsonファイルに次のように追記します。
{
+ "type": "module",
"dependencies": {
"@google/genai": "^1.22.0",
"dotenv": "^17.2.3"
}
}
もう一つ警告が出ています(2025年10月6日現在)が、Gemini APIによるものです。
パッケージの更新を待つと表示されなくなると思うので、一旦は無視して問題ないはずです。
モデルごとの使用について
無料枠/有料枠で使用できる内容は下記の通りになります。
Discussion