【NodeJS】Geminiを使った画像生成（Nano Banana）

ホーム
BLOG
【Node.js】
【NodeJS】Geminiを使った画像生成（Nano …

【Node.js】
2025.09.27

【NodeJS】Geminiを使った画像生成（Nano Banana）

概要
nodeのインストール
プロジェクトを作成
必要なライブラリをインストール
ソースコード
実行
ディレクトリの構造
備考
参考

【NodeJS】自作MCPサーバー with Gemini CLI

1. 概要

前回は自作MCP(Model Context Protocol)サーバーをGemini CLIと連携して使ってみる内容についてでした。今回はGemini 2.5 Flash Image (Nano Banana)を使って画像を生成する内容になります。

対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. nodeのインストール

こちらを参考

【Node.js】バージョン管理をVoltaに移行する | 株式会社isub

3. プロジェクトを作成

mkdir nano-banana-test

cd nano-banana-test

npm init

npm i -D typescript @types/node ts-node nodemon dotenv

npx tsc --init

※Gemini API キーが必要です。キーがない場合は、Google AI Studio で無料で取得できます。

4. 必要なライブラリをインストール

npm install @google/genai

5. ソースコード

5-1. package.json

{
  "name": "nano-banana-test",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "author": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "dev": "tsc && NODE_ENV=dev node dist/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@types/node": "^24.5.2",
    "dotenv": "^17.2.2",
    "nodemon": "^3.1.10",
    "ts-node": "^10.9.2",
    "typescript": "^5.9.2"
  },
  "dependencies": {
    "@google/genai": "^1.21.0"
  }
}

5-2. tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "verbatimModuleSyntax": true,
    "esModuleInterop": true,
    "strict": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

5-3. .env.local

GEMINI_API_KEY=******

5-4. src/env.ts

import dotenv from "dotenv";
import { fileURLToPath } from "url";
import path from "path";

export const __dirname = path.dirname(fileURLToPath(import.meta.url));

export const loadEnv = async () => {
  if (process.env.NODE_ENV === "dev") {
    console.log(`This is dev environment.`);
    dotenv.config({ path: [".env.local"] });
  }
};

5-5. src/index.ts

import { loadEnv } from "./env.js";
import {
  GenerateContentResponse,
  GoogleGenAI,
  type Candidate,
} from "@google/genai";
import * as fs from "node:fs";

const run = async () => {
  const ai = new GoogleGenAI({});

  try {
    const imgFileName = "panko-enjoying-halloween-with-gemini.png";
    const prompt =
      "こちらのPanko```https://panko.world/ja```画像ですが、ハロウィンを楽しむ感じの画像を作成してください。細かい事はお任せします。";

    const response: GenerateContentResponse = await ai.models.generateContent({
      model: "gemini-2.5-flash-image-preview",
      contents: prompt,
    });
    const candidates: Candidate[] | undefined = response.candidates;
    if (!candidates || candidates.length === 0) {
      console.log("No candidates found in the response.");
      return;
    }
    for (const part of candidates[0].content?.parts!) {
      if (part.text) {
        console.log(part.text);
      } else if (part.inlineData) {
        const imageData: string | undefined = part.inlineData.data;
        if (!imageData) {
          console.log("No image data found in the response.");
          return;
        }
        const buffer = Buffer.from(imageData, "base64");
        fs.writeFileSync(imgFileName, buffer);
        console.log(`Image saved as ${imgFileName}`);
      }
    }
  } catch (error) {
    console.error("API呼び出し中にエラーが発生しました:", error);
    throw error;
  }
};

const main = async () => {
  await loadEnv();
  await run();
};

await main().catch((err) => {
  console.error("アプリケーションの実行に失敗しました:", err);
  process.exit(1);
});

6. 実行

npm run dev

> nano-banana-test@1.0.0 dev
> tsc && NODE_ENV=dev node dist/index.js

This is dev environment.
[dotenv@17.2.2] injecting env (1) from .env.local -- tip: ⚙️  suppress all logs with { quiet: true }
はい、承知いたしました。Pankoがハロウィンを楽しんでいる画像を生成しますね！細かいところはお任せください。

Image saved as panko-enjoying-halloween-with-gemini.png

プロンプト

こちらのPanko```https://panko.world/ja```画像ですが、ハロウィンを楽しむ感じの画像を作成してください。細かい事はお任せします。

生成画像

7. ディレクトリの構造

.
├── dist
│   ├── env.js
│   └── index.js
├── package-lock.json
├── package.json
├── panko-enjoying-halloween-with-gemini.png
├── src
│   ├── env.ts
│   └── index.ts
└── tsconfig.json

2 directories, 8 files