1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

僕が考えた最強のGeminiCLI環境構築 - DevContainer, VSCode, GitHub Actions, MCPサーバー導入 -

Last updated at Posted at 2025-09-10

はじめに

私生活でもスマホはGoogle Pixel、スマートウォッチはPixel Watch、調べ物はGemini...。そんな、すっかりGoogleに魂を売っている私が、個人開発の環境をGemini CLIメインで構築してみました。

正直なところ、コーディングに関しては1ヶ月だけ課金して使ってみた「Claude Code」の方が使いやすいと感じる場面がありました。ただ、プライベートでの開発用で「Claude Code」はコスパ的に厳しかったので、今回は無料枠が多くてパワフルな「Gemini CLI」を軸にして、「AI駆動開発」を体感していきたいと思います。

この記事が、私と同じように「Gemini CLIをメインで使ってAI駆動開発を体感していきたい!」と思っている方の手助けになれば嬉しいです。

1. DevContainerでクリーンな開発環境を!

まずはGemini CLIのインストールから。でも、自分のPCに直接あれこれインストールするのって、環境がごちゃごちゃして少し嫌ですよね。

そこで私は、DevContainer を使って環境構築しました。これならローカル環境を汚さずに済みますし、誰でも同じ環境をサッと作れるのでおすすめです。

具体的な手順は下の記事にまとめたので、ぜひ参考にしてみてください。(ついでに「Claude Code」も使える環境になっているのでClaude派の人も是非使ってみてください。)

もし初回起動時の認証でつまづいたら、公式GitHubを見るのが一番です。

2. VSCodeと統合して、もっと便利に

CLIは便利ですが、やっぱり普段使っているエディタから直接AIを呼び出せると、開発がもっとスムーズになります。Gemini CLIはVSCodeとの連携もバッチリサポートされていて、設定も簡単です。

以下の公式ガイドの手順通りに設定すればOK。

これを設定すると、VSCode上で選択した範囲のコードだけをGemini CLIにコンテキストとして渡すことができるので、コードの一部のみ解説してもらったり、修正してもらったりと、AIコーディングがよりスムーズに進められます。
以下のGoogle公式ブログにもどんなことができるようになるのか、説明が記載されているので是非チェックしてみてください。

3. GitHub Actionsと連携!レビューも自動化

Gemini CLIは、GitHub Actionsと連携させてCI/CDパイプラインに組み込むこともできます。Googleが公式で提供しているActionを使えば、プルリクエストのレビューなどを自動化できてしまいます。
これも設定方法は以下の公式ガイドの手順通りに設定すればOkです。
※「Google AI Studio」からGeminiのAPIキーを取得して、GitHub上にシークレットキーとして設定する必要があります。

プルリクを作成したら、Geminiが自動でレビューしてくれるので非常に助かっています。自分には無い視点でコメントをくれることも多々あるので流石Geminiです。

4. MCPサーバー連携でGeminiをさらに賢く!

ここからが本番です。Gemini CLIの面白いところは、MCP (Managed Component Provider) サーバーと連携することで、その能力をどんどん拡張できる点にあります。

設定は ~/.gemini/settings.json ファイルに追記していく形になります。

MCPサーバーって何?

MCPサーバーは、一言でいうと「Geminiにもっと詳しい情報を教えてあげる」ための仕組みです。例えば、GitHubリポジトリの中身やWebサイトの内容、FigmaのデザインなどをGeminiが直接見られるようになるので、より文脈に合った的確な答えを返してくれるようになります。

私が使っているおすすめのMCPサーバーを紹介しますね。

a. github-mcp-server:GitHubとの自然言語によるやり取り

このMCPサーバーを使えば、Gemini CLIとGitHubを直接接続することができます。
これにより、例えば「issue#1の作業を実施して」と日本語で指示するだけで、GitHub上に作成されているIssueの内容をしっかり理解して、Geminiが実装作業を進めてくれます。
個人的にはこのMCPサーバーが一番導入効果を感じました。 導入前後で、GeminiがIssueの内容を正常に読み取れなかったり、PRのコメントを取得できなかったり、というエラーが格段に減ったように思います。GitHubでソースコードやタスクを管理している方には特におすすめです。

  • 注意: 導入時には別途、GitHubでPersonal Access Token(PAT)の作成が必要です

b. context7:最新のライブラリ情報の取得

このMCPサーバーを使えば、フレームワークや各種ライブラリの最新情報をGeminiに渡すことができます。
GeminiなどのLLMは、モデル学習時の断面の知識しか持っていないため、実装時に使用するライブラリに関する情報は古いことがあります。そのせいで、バージョンの依存関係などで度々エラーが発生したりします。そんな問題を解決できるのがこのMCPサーバーです。
使い方は非常に簡単で、Geminiに渡すプロンプト内にuse context7と追記するだけです。

  • 補足: APIキーはオプションなので、設定ファイルのCONTEXT7_API_KEYの行は消してしまってOKです

c. playwright-mcp:ブラウザを操作するE2Eテストツール

このMCPサーバーを使えば、Geminiがブラウザを操作して、E2Eテストの実行をすることが出来るようになります。
フロントエンドの開発をよくする方にはおすすめです。
まだ私は実施したことがないですが、Webスクレイピングもできるみたいです。

d. Figma Context MCP (Figmaを使う人向け)

FigmaのデザインデータをGeminiが直接見れるようになります。「このデザインをHTML/CSSで再現して」のように、デザインから実装への流れがすごくスムーズになります。
ただ、FigmaMakeで作成した画面デザインは上手くGeminiに渡すことができなかったです。これはFigma側の仕組みが原因のようでしたが、執筆時点ではまだ原因がよくわかっていません...もし原因をご存じの方がいらっしゃれば、コメントで教えて頂けると嬉しいです!

  • 注意: 導入時に別途、FigmaでPersonal Access Tokenの作成が必要です

settings.json の設定例

全部設定すると、~/.gemini/settings.json はこんな感じになります。

{
  "mcpServers": {
    "github": {
      "httpUrl": "https://api.githubcopilot.com/mcp/",
      "trust": true,
      "headers": {
        "Authorization": "Bearer $GITHUB_PAT" # ここで取得したPATを設定した環境変数を参照します
      }
    },
    "context7": {
      "httpUrl": "https://mcp.context7.com/mcp",
      "headers": {
        "Accept": "application/json, text/event-stream"
      }
    },
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    },
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=$FIGMA_PAT", # ここで取得したPATを設定した環境変数を参照します
        "--stdio"
      ]
    }
  }
}

おわりに

今回は、DevContainerをベースに、VSCodeやGitHub Actions、そして色々なMCPサーバーと連携させた「僕が考えた最強のGemini CLI環境」を紹介しました。

この環境を整えることで、Gemini CLIが単なるコード生成ツールとしてだけでなく、設計から実装、レビューまで、開発のあらゆる場面で頼りになる相棒になってくれるはずです。

AIと一緒に開発するスタイルは、まだまだこれから面白くなっていく分野だと思います。この記事を参考に、ぜひ自分だけの最強環境を作ってみてください!

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?