はじめに
私生活でもスマホは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と一緒に開発するスタイルは、まだまだこれから面白くなっていく分野だと思います。この記事を参考に、ぜひ自分だけの最強環境を作ってみてください!