Gemini CLI は、ターミナルから直接 Gemini と対話できるコマンドラインインターフェースツールです。Gemini CLI がワークスペース上にあるファイルを読み込んで理解した上で、ワークスペースにあるドキュメントを要約したり、アイデアを出力したり、コードの生成や修正を行ったりすることができます。

利用料金とプライバシー

Gemini CLI は、個人の Google アカウントで利用する場合、無料で始めることができます。1 分あたり 60 リクエスト、1 日あたり 1,000 リクエストという個人利用には十分な利用枠が提供されています。

ただし、デフォルトではコードや会話データがGoogle のモデルのトレーニングに使用される可能性があります。業務データなど機密情報を含む場合は、プライバシーが保護される API 経由での利用や、エンタープライズ向けの有料プランをご検討ください。
 

利用規約やプライバシーポリシーについて詳しく知りたい方は、Gemini CLI: Terms of Service and Privacy Notice をご確認ください。
 

開始する前に、以下の前提条件を満たしていることを確認してください。

• Node.js バージョン 20 以上: コマンドプロンプトなどから node -v を実行することで確認できます。
• Google アカウント: Gemini CLI の認証に使用します。
• Google Cloud プロジェクト (有償ライセンスを使用する場合のみ)

1. コマンドプロンプトなどで以下のコマンドを実行し、Gemini CLI をグローバルにインストールします。

npm install -g @google/gemini-cli

2. Gemini CLI を起動します。
個人の Google アカウントを使用する場合:

gemini

Google Workspace など有償のライセンスを使用する場合: GOOGLE_CLOUD_PROJECT にプロジェクト名をセットしてから Gemini CLI を起動します。今回は Windows を使用するため、set コマンドを用います。

set GOOGLE_CLOUD_PROJECT="YOUR_PROJECT_NAME"

gemini

3. Select Theme でテーマを選択します。後ほど変更可能です。

4. Select Auth Method で認証方法に Login with Google を選択します。自動的に Web ブラウザが起動するので、Google アカウントで認証を行います。

これで Gemini CLI のインストールが完了しました。
 

今回は、2025 年 8 月 13 日に Gemini CLI + VS Code: Native diffing and context-aware workflows で発表された、VS Code と Gemini CLI を統合する拡張機能 Gemini CLI Companion (プレビュー) を使用するのでインストールします。

拡張機能をインストールすることで、Gemini CLI は、VS Code で開いているファイルや選択中のテキスト、カーソルの位置といったコンテキストを認識できるようになります。例えば、コードの一部を選択して内容を要約してもらうということも可能です。さらに、Gemini CLI による変更提案の内容を VS Code の差分 (diff) ビューで直接確認することができ、その場で修正や適用することができるようになります。
 

それでは、実際に拡張機能をインストールしてみましょう。開始する前に、以下の前提条件を満たしていることを確認してください。

• Gemini CLI バージョン 0.1.20 以上: gemini -v を実行することで確認できます。
• VS Code バージョン 1.99.0 以上: VS Code の メニュー ヘルプ > バージョン情報 から確認できます。

1. VS Code の サイドバー > 拡張機能 から Gemini CLI の拡張機能 Gemini CLI Companion をインストールします。

2. VS Code のターミナルから Gemini CLI を起動します。有償のライセンスを使用する場合は、Google Cloudプロジェクトを設定することを忘れないでください。

gemini

3. Gemini CLI が起動したら以下のコマンドを実行してステータスを確認します。

/ide status

Connected to VS Code と表示されており、拡張機能が正常にインストールされ、有効であることを確認できます。
 

準備が整ったところで、Gemini CLI と VS Code を使って簡単な Todo アプリケーションを作成します。コーディングはすべて Gemini CLI に任せるため、ここではアプリケーションの要件を記述したドキュメントのみ用意します。
 

1. ワークスペースに Todo アプリの要件を記載した requirements.md を作成します。

# Todo アプリ





## 技術スタック

* Vite

* React

* CSS





## データ

### tasks

| カラム | 型 | 必須項目 | 備考 |

| ---- | ---- | ---- | ---- |

| id | Integer | 必須 | ID, 主キー, 自動採番 | 

| name | String | 必須 | タスク名, ユーザーの入力値 | 

| due‌_‌date | Date | 必須 | 期限日 (yyyy-mm-dd), ユーザーの入力値 | 

| completed | Boolean | 必須 | タスク完了フラグ, デフォルトは false | 

| created_at | DateTime | 必須 | タスク作成日時, システム日付を使用 | 

| updated_at | DateTime | 必須 | タスク完了日時, システム日付を使用 | 





## 画面一覧

### ヘッダ

* アプリ名を表示します。



### タスク一覧画面

* タスクの一覧を表示します。

* タスクは期限日の昇順で表示します。

* 1 ページあたり 10 件表示します。10 件を超える場合はページングします。

* タスクには、チェックボックス、タスクの名前、期限日、編集ボタン、削除ボタンを表示します。

* タスクがない場合、「タスクがありません」と表示します。

* タスクのチェックボックスを押下すると、タスクの completed=true, updated_at=システム日付 で更新します。

* タスクの編集ボタンを押下すると、タスクの id を引数に詳細画面に遷移します。

* タスクの削除ボタンを押下すると、そのタスクを削除 (物理) します。

* タスク一覧の右上に追加ボタンを表示します。

* 追加ボタンを押下すると、id を指定せずにタスク詳細画面に遷移します。



### タスク詳細画面

* タスクの詳細を表示します。

* 引数として id を持ちます。id に値がある場合は id に紐づくタスクの編集、値がない場合は追加とします。

* タスク名の入力欄、期限日の入力欄、決定ボタン、戻るボタンを表示します。

* 決定ボタンを押下すると、タスク名と期限日が入力されているかチェックします。チェック結果 NG であれば画面にエラーを表示します。OK であれば Session Storage にタスクを登録または変更し、タスク一覧画面に遷移します。

* 戻るボタンを押下すると、タスク一覧画面に遷移します。

2. VS Code で Gemini CLI を起動し、以下のプロンプトを実行します。@requirements.md を記述することで、Gemini CLI が requirements.md の内容を参照しながらコードを生成します。@ コマンドについて詳しく知りたい方は、At commands (@) を参照してください。

@requirements.md に従って todo-list ディレクトリ配下にアプリケーションを作成してください。

数分後に「これで requirements.md に基づく実装は完了です。」というメッセージが表示されました。npm run dev コマンドを実行してアプリケーションを起動し、動作を確認します。タスクの追加や削除などの機能も想定通り実装できていそうです。

次に、生成されたコードの一部を選択し、内容について質問してみます。生成された以下のコードの 3 〜 23 行目を選択して「これはどのような処理をしていますか？」というプロンプトを実行します。

import { useState } from 'react';



const useSessionStorage = (key, initialValue) => {

  const [storedValue, setStoredValue] = useState(() => {

    try {

      const item = window.sessionStorage.getItem(key);

      return item ? JSON.parse(item) : initialValue;

    } catch (error) {

      console.log(error);

      return initialValue;

    }

  });



  const setValue = (value) => {

    try {

      const valueToStore =

        value instanceof Function ? value(storedValue) : value;

      setStoredValue(valueToStore);

      window.sessionStorage.setItem(key, JSON.stringify(valueToStore));

    } catch (error) {

      console.log(error);

    }

  };



  return [storedValue, setValue];

};



export default useSessionStorage;

✦ このコードは useSessionStorage という名前の React のカスタムフックを定義しています。



  主な機能は次のとおりです。



   1. データの永続化: sessionStorage を使って、コンポーネントの状態（state）をブラウザのセッション内に保存します。これにより、ページをリロードしてもデータが消えません。

   2. 値の取得: コンポーネントがマウントされたとき、指定されたキー (key) を使って sessionStorage から値を読み込もうとします。値が存在すればそれを、なければ提供された初期値 (initialValue) を使います。

   3. 値の保存: setValue 関数を呼び出すと、コンポーネントの状態が更新されると同時に、新しい値が sessionStorage にJSON形式で保存されます。

   4. `useState` と同じインターフェース: React の useState フックと同様に、現在の値 (storedValue) と、その値を更新するための関数 (setValue) のペアを配列として返します。



  簡単に言うと、useState のように使え、かつ状態を自動的にブラウザのセッションストレージに保存・復元してくれる便利なフックです。

Gemini CLI が VS Code で開いているファイルや選択中のテキスト、カーソルの位置といったコンテキストを認識していることが分かります。
 

今度は、コードの修正を依頼し、Gemini CLI による変更提案の内容を VS Code の差分ビューで確認できるか試してみます。

ボタンを 背景色: #f5f5f5、文字色: #171717、角丸: 0.25rem にしてもらえますか。

差分ビューで変更提案内容を確認できました。変更提案内容の適用は、ターミナルでの選択操作でも可能ですが、差分ビューの右上にあるチェックマーク (Accept Diff) ボタンを押下することでも適用することができます。
 

本記事では、Gemini CLI と VS Code、さらに VS Code の拡張機能である Gemini CLI Companion を使用して、簡単な Todo アプリを作成する手順をご紹介しました。今回のような AI 駆動開発によって、今後ますます開発効率が向上すると考えています。ぜひ、Gemini CLI を導入して、バイブコーディングを体験してみてください。
 

余談

アプリケーションのデザインがミニマルすぎたので、Gemini CLI に 30 分程度でレトロゲーム風に変更してもらいました。「デザインをレトロゲーム風にして」といった曖昧で大雑把な指示にもかかわらず、デザインのテイストを短時間でガラッと変えられるのは、AI 駆動開発の大きな魅力ですね。