💻

【VS Codeで体験】Gemini Code Assist活用術①ローカルファイルをリファクタリングする

に公開

この記事は、AIコーディングアシスタント「Gemini Code Assist」をVS Codeに導入し、特に強力な機能である**「ローカルコードベースの理解」「自動タスク実行」**を体験するための初心者向けガイドです。

🚫 AI拡張機能(Copilotなど)の無効化・有効化手順

この手順は、VS Codeの拡張機能ビューから行います。Mac/Windows共通です。

  1. 拡張機能ビューを開く: VS Codeの左側のアクティビティバーにある拡張機能アイコン(四角が4つ並んだもの)をクリックします。
  2. 拡張機能を見つける: 検索窓に無効にしたい拡張機能の名前(例: GitHub Copilot)を入力します。
  3. AIを無効にする: 詳細パネルの上部にある**「無効にする (Disable)」**ボタンをクリックします。あるいは詳細パネル右上の歯車アイコン⚙️をクリックし、「無効にする (Disable)」を選択します。
  4. AIを有効にする手順 (元に戻す時): 詳細パネルの上部にある**「有効にする (Enable)」**ボタンをクリックします。あるいは詳細パネル右上の歯車アイコン⚙️をクリックし、「有効にする (Enable)」を選択します。

通常、これらの操作を行った後、VS Codeの再起動を促されることがあります。表示された場合は、再起動してください。


🚀 導入編:セットアップ(Mac/Windows共通)

Gemini Code Assistは、VS Codeの拡張機能として利用できます 非常に強力な無料枠(月間数万回のコード補完、チャット機能など)が提供されており、個人開発者の日常的な作業には十分すぎる機能をカバーしています。

ステップ 1: VS Code拡張機能のインストール

  1. VS Codeを起動し、左側のアクティビティバーにある拡張機能アイコン(四角が4つ並んだもの)をクリックします。
  2. 検索窓に「Gemini Code Assist」と入力します。
  3. 検索結果に表示された拡張機能を選択し、「インストール」ボタンをクリックします。

ステップ 2: Googleアカウントでサインイン

  1. インストール後、VS Codeの左側にあるGeminiアイコン(アクティビティバー内)をクリックしてチャットパネルを開きます。
  2. パネル内に表示された「Sign in」または「Connect Google Account」をクリックします。
  3. Webブラウザが起動し、Googleアカウントの認証画面が開きます。画面の指示に従い、ご自身の個人Googleアカウントでログインし、権限を許可します。
  4. 認証が完了すると、VS CodeのサイドバーにGeminiのチャットパネルが表示され、準備完了です。

💡 実践編:CLIの機能に相当するエージェントモードを使う

Gemini Code Assistの真価は、プロジェクト全体を理解してタスクを自動でこなす「エージェントモード」にあります。ローカルファイルを理解するデモを体験しましょう。

ステップ 3: デモ用のコードを用意する

まず、ローカルの任意の場所に作業用フォルダを作成し、VS Codeでそのフォルダを開いてください(この開いた状態が「ワークスペース(@workspace)」となります)。

その開いたフォルダ内に、以下の内容でcalculator.pyというファイルを作成してください。

calculator.py
def add(a, b):
    return a + b

def multiply(a, b):
    return a * b

def divide(a, b):
    return a / b

ステップ 4: ローカルファイルを理解させてタスクを依頼する(日本語コメント指定)

チャットパネルで@workspaceを使い、ローカルファイルを読み込ませてタスクを依頼します。

  1. Geminiアイコンをクリックしてチャットパネルを開きます。
  2. チャットの入力欄で、以下の指示を入力します。
@workspace
@workspace calculator.py に日本語で、シンプルなコメントを追加してください。

ステップ 5: AIの提案を確認し、適用する

  1. Geminiから、リファクタリングの**変更プレビュー(Diff)**が表示されます。
  2. 内容を確認し、「Accept」または「適用」ボタンをクリックしてファイルを更新します。

ステップ 6: ターミナルコマンドをチャットに指示して動作確認!

修正したコードが期待通りに動くか、チャットパネル内で確認しましょう。

  1. チャット入力欄に、以下の実行コマンドを指示します。

    入力する指示:

    python3 を使って、calculator.py の add(10, 5) と multiply(4, 3) の結果を出力してください。
    
  2. AIの応答とコマンドの実行

    • Geminiが、実行すべきコマンドのプレビューを提示します。
    • 「Accept」(承認)をクリックすると、Geminiが内部でコマンドを実行し、結果が出力されます。
  3. 動作確認の結果

    • 1512 が出力されれば成功です。これで、コード修正から動作確認まで、すべてチャットパネル内で完了しました!

📝 まとめと次のステップ

Gemini Code Assistは、あなたのコードを理解し、実行まで支援してくれる強力なツールです。

参考サイト: ![Google CLI 公式サイト] (https://codeassist.google)

関連記事
【VS Codeで体験】Gemini Code Assist活用術②:バグを見逃さない!単体テストを自動生成する手順
【VS Codeで体験】Gemini Code Assist活用術③:テスト失敗から始める!AIでバグ修正する
【VS Codeで体験】Gemini Code Assist活用術④デモで学ぶ実践的な注意点

Discussion