はじめに
Googleから Gemini CLIがリリースされたのでWSLで試してみる。Amazon Q Developer CLIとかと同様に、ターミナルから直接AIチャットができるので、開発中にちょっと質問したい時や、既存のコードベースについて質問したい時などに便利そうだ。
ということで、今回はWSL2環境でGemini CLIをセットアップして使ってみる。
環境
Windows 11 Pro
WSL2 (Ubuntu 24.04 LTS)
nvm 0.40.3
Node.js v22.17.0
npm v10.9.2前提条件
Node.js 22 をインストール
※要件としてはNode.js 18だが、最新のLTSであるNode.js 22をインストールする。
既存のNode.jsの確認
# 現在のバージョンを確認
node --version
npm --versionNode Version Manager (nvm) を使用したインストール
# nvmをインストール（まだインストールしていない場合）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# シェルを再起動するか、nvmを有効化
source ~/.bashrc
# zshrcの場合は下記
source ~/.zshrc
# nvmのバージョンを確認
nvm --version# Node.js 22 LTSをインストール
nvm install 22
# Node.js 22を使用
nvm use 22
# デフォルトに設定
nvm alias default 22Google アカウントの準備
Gemini CLIを使うには、Googleアカウントが必要だ。
個人のGoogleアカウントでも利用可能で、無料版では1日1,000回まで、1分間に60回までのリクエストが可能だ。
Gemini CLIのセットアップ
インストール方法
Gemini CLIのインストールは複数の方法がある。
方法1: npxで直接実行
npx https://github.com/google-gemini/gemini-cli方法2: グローバルインストール
# グローバルにインストール
npm install -g @google/gemini-cli
# 実行
gemini
初回セットアップ
初回実行時に以下の設定を行う
カラーテーマの選択
- 好みのカラーテーマを選択
認証
- 個人のGoogleアカウントでサインイン
- ブラウザが開くので、アカウントを選択して認証
認証が完了すると、ターミナルでGeminiとのチャットが開始される。
基本的な使い方
※以降は geminiコマンドが使える状態とする。
シンプルなチャット
# Gemini CLIを起動
geminiメッセージを送ってみる。
> こんにちは！今日はいい天気ですね。# Geminiが回答を返す
何かお手伝いできることはありますか？簡単なTodoアプリを作ってもらう
新しいプロジェクトの作成
# 新しいディレクトリを作成
mkdir todo-apps
cd todo-apps
# Gemini CLIを起動
gemini
# プロジェクト作成を依頼
> TypeScriptで簡単なTodoアプリを作ってください。プロンプトとログ
Tips for getting started:
1. Ask questions, edit files, or run commands.
2. Be specific for the best results.
3. Create GEMINI.md files to customize your interactions with Gemini.
4. /help for more information.
> TypeScriptで簡単なTodoアプリを作ってください。
✦ はい、承知いたしました。TypeScriptで簡単なTodoアプリを作成します。
まず、プロジェクトのセットアップから始めます。
1. プロジェクト用のディレクトリを作成します。
2. package.jsonファイルを初期化します。
3. TypeScriptをインストールします。
4. tsconfig.jsonファイルを作成します。
5. HTMLファイルとTypeScriptファイルを作成します。
これらの手順を順番に実行します。まずはプロジェクトディレクトリの作成とnpmの初期化から行います。
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Shell mkdir simple-todo-app && cd simple-todo-app && npm init -y (Create a new directory name… │
│ │
│ Wrote to /home/kbushi/workspace/todo-apps/simple-todo-app/package.json: │
│ │
│ { │
│ "name": "simple-todo-app", │
│ "version": "1.0.0", │
│ "main": "index.js", │
│ "scripts": { │
│ "test": "echo \"Error: no test specified\" && exit 1" │
│ }, │
│ "keywords": [], │
│ "author": "", │
│ "license": "ISC", │
│ "description": "" │
│ } │
│ │
│ │
│ │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ 次に、TypeScriptをインストールします。
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Shell cd simple-todo-app && npm install typescript (Install TypeScript as a dependency in the… │
│ │
│ │
│ added 1 package, and audited 2 packages in 888ms │
│ │
│ found 0 vulnerabilities │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ tsconfig.jsonファイルを作成します。これにより、TypeScriptコンパイラがどのように動作するかを設定し
ます。
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Shell cd simple-todo-app && npx tsc --init (Create a `tsconfig.json` file in the `simple-todo… │
│ │
│ │
│ Created a new tsconfig.json with: │
│ │
│ target: es2016 │
│ module: commonjs │
│ strict: true │
│ esModuleInterop: true │
│ skipLibCheck: true │
│ forceConsistentCasingInFileNames: true │
│ │
│ │
│ You can learn more at https://aka.ms/tsconfig │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ HTMLファイル、TypeScriptファイル、およびCSSファイルを作成します。まず、distとsrcディレクトリを作
成します。
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Shell cd simple-todo-app && mkdir src dist (Create `src` and `dist` directories inside the `s… │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ dist/index.html、dist/style.css、src/index.tsの3つのファイルを作成します。
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Shell cd simple-todo-app && touch dist/index.html dist/style.css src/index.ts (Create `index.… │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ 次に、これらのファイルに基本的な内容を書き込みます。まずはdist/index.htmlです。
╭─────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ WriteFile Writing to simple-todo-app/dist/index.html │
│ │
│ 1 <!DOCTYPE html> │
│ 2 <html lang="en"> │
│ 3 <head> │
│ 4 <meta charset="UTF-8"> │
│ 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> │
│ 6 <title>Simple Todo App</title> │
│ 7 <link rel="stylesheet" href="style.css"> │
│ 8 </head> │
│ 9 <body> │
│ 10 <div class="container"> │
│ 11 <h1>Todo App</h1> │
│ 12 <div class="input-area"> │
│ 13 <input type="text" id="todo-input" placeholder="Add a new todo"> │
│ 14 <button id="add-button">Add</button> │
│ 15 </div> │
│ 16 <ul id="todo-list"></ul> │
│ 17 </div> │
│ 18 <script src="index.js"></script> │
│ 19 </body> │
│ 20 </html> │
╰─────────────────────────────────────────────────────────────────────────────────────────╯
✦ 次に、dist/style.cssにスタイルを追加します。
╭─────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ WriteFile Writing to simple-todo-app/dist/style.css │
│ │
│ 1 body { │
│ 2 font-family: sans-serif; │
│ 3 background-color: #f4f4f4; │
│ 4 display: flex; │
│ 5 justify-content: center; │
│ 6 align-items: center; │
│ 7 height: 100vh; │
│ 8 margin: 0; │
│ 9 } │
│ 10 │
│ 11 .container { │
│ 12 background: white; │
│ 13 padding: 20px; │
│ 14 border-radius: 5px; │
│ 15 box-shadow: 0 2px 5px rgba(0,0,0,0.1); │
│ 16 width: 400px; │
│ 17 } │
│ 18 │
│ 19 h1 { │
│ 20 text-align: center; │
│ 21 } │
│ 22 │
│ 23 .input-area { │
│ 24 display: flex; │
│ 25 margin-bottom: 20px; │
│ 26 } │
│ 27 │
│ 28 #todo-input { │
│ 29 flex: 1; │
│ 30 padding: 10px; │
│ 31 border: 1px solid #ddd; │
│ 32 border-radius: 3px; │
│ 33 } │
│ 34 │
│ 35 #add-button { │
│ 36 padding: 10px 15px; │
│ 37 background-color: #007bff; │
│ 38 color: white; │
│ 39 border: none; │
│ 40 border-radius: 3px; │
│ 41 cursor: pointer; │
│ 42 } │
│ 43 │
│ 44 #add-button:hover { │
│ 45 background-color: #0056b3; │
│ 46 } │
│ 47 │
│ 48 #todo-list { │
│ 49 list-style: none; │
│ 50 padding: 0; │
│ 51 } │
│ 52 │
│ 53 li { │
│ 54 background: #eee; │
│ 55 padding: 10px; │
│ 56 margin-bottom: 10px; │
│ 57 border-radius: 3px; │
│ 58 display: flex; │
│ 59 justify-content: space-between; │
│ 60 align-items: center; │
│ 61 } │
│ 62 │
│ 63 li.completed { │
│ 64 text-decoration: line-through; │
│ 65 color: #888; │
│ 66 } │
│ 67 │
│ 68 .delete-button { │
│ 69 background-color: #dc3545; │
│ 70 color: white; │
│ 71 border: none; │
│ 72 padding: 5px 10px; │
│ 73 border-radius: 3px; │
│ 74 cursor: pointer; │
│ 75 } │
│ 76 │
│ 77 .delete-button:hover { │
│ 78 background-color: #c82333; │
│ 79 } │
╰─────────────────────────────────────────────────────────────────────────────────────────╯
✦ 最後に、src/index.tsにTypeScriptのコードを追加します。
╭─────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ WriteFile Writing to simple-todo-app/src/index.ts │
│ │
│ 1 const todoInput = document.getElementById('todo-input') as HTMLInputElement; │
│ 2 const addButton = document.getElementById('add-button') as HTMLButtonElement; │
│ 3 const todoList = document.getElementById('todo-list') as HTMLUListElement; │
│ 4 │
│ 5 interface Todo { │
│ 6 text: string; │
│ 7 completed: boolean; │
│ 8 } │
│ 9 │
│ 10 let todos: Todo[] = []; │
│ 11 │
│ 12 function renderTodos() { │
│ 13 todoList.innerHTML = ''; │
│ 14 todos.forEach((todo, index) => { │
│ 15 const li = document.createElement('li'); │
│ 16 li.textContent = todo.text; │
│ 17 if (todo.completed) { │
│ 18 li.classList.add('completed'); │
│ 19 } │
│ 20 │
│ 21 const deleteButton = document.createElement('button'); │
│ 22 deleteButton.textContent = 'Delete'; │
│ 23 deleteButton.classList.add('delete-button'); │
│ 24 deleteButton.addEventListener('click', () => { │
│ 25 deleteTodo(index); │
│ 26 }); │
│ 27 │
│ 28 li.addEventListener('click', () => { │
│ 29 toggleTodo(index); │
│ 30 }); │
│ 31 │
│ 32 li.appendChild(deleteButton); │
│ 33 todoList.appendChild(li); │
│ 34 }); │
│ 35 } │
│ 36 │
│ 37 function addTodo() { │
│ 38 const text = todoInput.value.trim(); │
│ 39 if (text) { │
│ 40 todos.push({ text, completed: false }); │
│ 41 todoInput.value = ''; │
│ 42 renderTodos(); │
│ 43 } │
│ 44 } │
│ 45 │
│ 46 function deleteTodo(index: number) { │
│ 47 todos.splice(index, 1); │
│ 48 renderTodos(); │
│ 49 } │
│ 50 │
│ 51 function toggleTodo(index: number) { │
│ 52 todos[index].completed = !todos[index].completed; │
│ 53 renderTodos(); │
│ 54 } │
│ 55 │
│ 56 addButton.addEventListener('click', addTodo); │
│ 57 │
│ 58 renderTodos(); │
╰─────────────────────────────────────────────────────────────────────────────────────────╯
✦ tsconfig.jsonを更新して、コンパイルされたJavaScriptファイルの出力先をdistディレクトリに設定します
。
╭───────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Edit simple-todo-app/tsconfig.json: "module": "commonjs", => "module": "commonjs",... │
│ │
│ 26 // "moduleDetection": "auto", /* Control what method │
│ is used to detect module-format JS files. */ │
│ 27 │
│ 28 /* Modules */ │
│ 29 - "module": "commonjs", /* Specify what module │
│ code is generated. */ │
│ 29 + "module": "commonjs", │
│ 30 + "outDir": "./dist", /* Specify what module │
│ code is generated. */ │
│ 31 // "rootDir": "./", /* Specify the root │
│ folder within your source files. */ │
│ 32 // "moduleResolution": "node10", /* Specify how │
│ TypeScript looks up a file from a given module specifier. */ │
│ 33 // "baseUrl": "./", /* Specify the base │
│ directory to resolve non-relative module names. */ │
╰───────────────────────────────────────────────────────────────────────────────────────────╯
✦ package.jsonにビルドスクリプトを追加します。
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Edit simple-todo-app/package.json: "test": "echo \"Error: no test... => "test": "echo \"Error… │
│ │
│ 3 "version": "1.0.0", │
│ 4 "main": "index.js", │
│ 5 "scripts": { │
│ 6 - "test": "echo \"Error: no test specified\" && exit 1" │
│ 6 + "test": "echo "Error: no test specified" && exit 1", "build": "tsc" │
│ 7 }, │
│ 8 "keywords": [], │
│ 9 "author": "", │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ これで、TypeScriptのコードをJavaScriptにコンパイルできます。
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Shell cd simple-todo-app && npm run build (Compile the TypeScript code to JavaScript using th… │
│ │
│ npm error code EJSONPARSE │
│ npm error JSON.parse Invalid package.json: JSONParseError: Expected ',' or '}' │
│ after property value in JSON at position 109 (line 6 column 20) while parsing near │
│ "...\n \"test\": \"echo \"Error: no test speci..." │
│ npm error JSON.parse Failed to parse JSON data. │
│ npm error JSON.parse Note: package.json must be actual JSON, not just JavaScript. │
│ npm error A complete log of this run can be found in: │
│ /home/kbushi/.npm/_logs/2025-06-29T09_10_46_297Z-debug-0.log │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ package.jsonのJSON形式に誤りがあったようです。修正します。
╭───────────────────────────────────────────╮
│ ✔ ReadFile simple-todo-app/package.json │
╰───────────────────────────────────────────╯
✦ package.jsonのJSON形式に誤りがあったようです。修正します。また、mainのエントリポイントも修正しま
す。
╭─────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ WriteFile Writing to simple-todo-app/package.json │
│ │
│ 1 { │
│ 2 "name": "simple-todo-app", │
│ 3 "version": "1.0.0", │
│ 4 - "main": "index.js", │
│ 4 + "main": "dist/index.js", │
│ 5 "scripts": { │
│ 6 - "test": "echo "Error: no test specified" && exit 1", "build": "tsc" │
│ 6 + "test": "echo \"Error: no test specified\" && exit 1", │
│ 7 + "build": "tsc" │
│ 8 }, │
│ 9 "keywords": [], │
│ 10 "author": "", │
╰─────────────────────────────────────────────────────────────────────────────────────────╯
✦ 再度ビルドを実行します。
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Shell cd simple-todo-app && npm run build (Compile the TypeScript code to JavaScript using th… │
│ │
│ │
│ > [email protected] build │
│ > tsc │
│ │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ ビルドが成功しました。distディレクトリにindex.jsファイルが生成されているはずです。
これで、dist/index.htmlをブラウザで開くと、Todoアプリが動作します。
Todoアプリの使い方は以下の通りです。
1. 入力ボックスにTodoを入力します。
2. 「Add」ボタンをクリックすると、Todoがリストに追加されます。
3. Todoアイテムをクリックすると、完了／未完了を切り替えることができます。
4. 「Delete」ボタンをクリックすると、Todoを削除できます。
以上で、TypeScriptによる簡単なTodoアプリの作成は完了です。何か他に質問はありますか？
accepting edits (shift + tab to toggle)
╭───────────────────────────────────────────────────────────────────────────────────────────────╮
│ > Type your message or @path/to/file │
╰───────────────────────────────────────────────────────────────────────────────────────────────╯
~/workspace/todo-apps no sandbox (see /docs) gemini-2.5-pro (99% context left)完成したTODOアプリ
注意事項
セキュリティとプライバシー
機密情報
機密情報を含むコードでは使用を避けるデータの取り扱い
入力したデータはGeminiモデルの改善とトレーニングに使用される可能性がある企業利用
企業のプライベートリポジトリや機密プロジェクトでは使用前に利用規約を確認する個人情報
個人を特定できる情報やプライベートな情報の入力は避けるAPIキー
APIキーは適切に管理し、公開リポジトリにコミットしない
詳細については、利用規約とプライバシーポリシーを参照すること。
入力したコードや質問内容がGoogleのAIモデルの学習データとして使用される可能性があるため、機密性の高い情報は入力しないよう注意が必要。
利用制限
| プラン | 1日あたりの制限 | 1分間あたりの制限 | 備考 |
|---|---|---|---|
| 無料版 | 1,000回 | 60回 | 個人のGoogleアカウントで利用 |
| 有料版 | より多くのリクエスト | より多くのリクエスト | APIキー使用で制限緩和 |
注意: 連続使用時はレート制限に注意
参考
Gemini CLI : オープンソース AI エージェント
https://cloud.google.com/blog/ja/topics/developers-practitioners/introducing-gemini-cli/Gemini CLI - GitHub
https://github.com/google-gemini/gemini-cliGoogle AI Studio
https://aistudio.google.com/Gemini API Documentation
https://ai.google.dev/gemini-api/docs
おわりに
Gemini CLIをWSL2環境で使ってみた。
現在はレート制限があるとはいえ、無制限に近いレートなので個人かつトレーニングされてもよいコードベースには適用できそうだ。Claude Codeとかもまだ試せていないので試していきたい。
