Gemini API を開発環境で使うための手順（React + Vite）

はじめに

Googleが提供する大規模言語モデル「Gemini API」を、React（Vite）で構築したアプリから呼び出し、英単語検索や要約・文章生成などに使う方法をまとめます。

今回のユースケース

英単語検索アプリ

検索欄に英単語を入力して「検索」ボタンを押すと、Gemini API がその単語の意味や品詞、発音記号、例文などを返してくれます。
これを整形してカード形式で画面に表示することで、ユーザーは視覚的にわかりやすく情報を得ることができます。

プロンプトに出力フォーマットを明示することで、APIの応答内容も安定し実用的な辞書アプリのような機能を実現できます。

開発環境

• React（Vite）
• Google Gemini API（無料枠）
• firebase

手順まとめ

1. Google Cloudでの準備

プロジェクト作成

• Google Cloud Console で新規プロジェクトを作成

Gemini API を有効化

• 「API とサービス」→「ライブラリ」→ Generative Language API を検索して「有効にする」

APIキーの作成

• 「認証情報」→「＋認証情報を作成」→「APIキー」
• 制限なしで作成して .env に設定

VITE_GEMINI_API_KEY=（作成したAPIキー）

Viteの開発サーバーを再起動

npm run dev

2. Gemini API を呼び出すコードを書く

以下のコードは検索語を使って Gemini API を呼び出し、結果を画面に表示する一連の流れを実装したものです。

// ボタンを押したときに実行される非同期関数を定義
const handleSearch = async () => {

  // Gemini API に送る質問文（プロンプト）を定義
  // APIに送る「質問文（プロンプト）」を定義しています。整った出力が得られるよう、形式を指定しています。
  const prompt = `
  次の英単語について、以下の形式で日本語で答えてください：

  1. 意味
  2. 品詞
  3. 発音記号
  4. 例文（英語と訳）

  単語: ${input}
  `;

  // Gemini API へ POST リクエストを送る
  // fetch関数でエンドポイントにアクセスし、headersとbodyを含めてリクエスト
  const res = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${import.meta.env.VITE_GEMINI_API_KEY}`,
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        contents: [{ parts: [{ text: prompt }] }]
      })
    }
  );

  // レスポンスを JSON 形式で取得し、候補の中の最初のテキスト部分を抽出
  const data = await res.json();
  const result = data.candidates?.[0]?.content?.parts?.[0]?.text;

  // テキストが取得できれば state にセット、なければエラーメッセージ
  setResult(result || '取得できませんでした');
};

Gemini API特有の部分

以下は会話の流れを構造的に扱うためのGemini API特有の部分です

body: JSON.stringify({
contents: [{ parts: [{ text: prompt }] }]

contents

「会話の全体（1回分の質問）」を表します。
配列なので、複数のやりとり（例：システム→ユーザー→アシスタント）をまとめて送れるようになっています。

1つの質問文（会話の1ターン）を1オブジェクトで表しています。

parts

これは「その会話の中身（メッセージの断片）」を表します。
→ たとえば1つの文に「テキスト」「画像」など複数のパートを入れられます（今回はテキストだけ）

質問文の中で送る「テキスト」を指定している部分に該当します。

text: prompt

あなたが書いた質問（＝プロンプト）。
たとえば「この単語の意味と例文を日本語で教えて」というような内容です。

このコードは Google Generative Language API（Gemini）公式ドキュメント をもとに、Reactアプリ内での使用に最適化したサンプルです。プロンプトや取得方法は本プロジェクトのユースケースに合わせて調整しています。

3. モデルについて

モデル名	特徴
gemini-1.5-flash	高速・軽量・無料枠でも安定
gemini-1.5-pro	高精度・無料枠は厳しい制限あり

MVPや学習用途ではflashで十分な精度だと思いました。

今後の拡張性

• prompt の工夫で整形された出力が得られる
• 長文をカットしたい場合は result.slice(0, 300) などで調整可能
• 表示構造を整えたい場合は JSON形式での返答を促すことできる

補足

• 429 Too Many Requests エラーが出た場合は時間をおいて再実行 or proモデルからflashモデルへの切り替えを検討
• .envの変更後はViteを再起動しないと反映されません

以上がReactアプリにおけるGemini API連携の一通りの流れです。