Zenn
🤖

【無料】はじめてのCline+Geminiでfizzbuzzを書かせる

2025/02/23に公開
fizzbuzz
Gemini
Cline
tech

こんにちは。みなさん、AIコーディング、やっていってますか？
私は本日、初めてのAIコーディングをしました。
AIコーディングってお金と時間溶けるんじゃないの？怖いよ〜！という方もいらっしゃると思います、
今回は無料で短時間でAIコーディングを楽しめる記事となります。

みなさまもこの機会に一度、AIコーディングを試してみましょう。

AIコーディングの一例

とっても楽しいですね。

さて、今日はClineでGeminiにfizzbuzzを書かせ、テストを書かせ、実行させる方法を1から説明していきます。
あくまでも一例ですので、お好みで別の方法をお取りください。
※この記事は人間が書いております。

VSCodeをインストールする

JetBrains IDE派の人も最近はAIのためにVSCodeに乗り換えてるのではないでしょうか。
VSCodeを入れましょう。

Clineを入れる

Extensionsから「Cline」で検索、下記の画像のトップに出てくるものをクリックして「Install」をしましょう。
Cline

Geminiのトークンを入れる

VSCodeの左側にこんなアイコンが出てきたかと思います。クリックしましょう。
Clineのアイコン

すると基本的な設定の部分が入力できるようになります。以下のよう。
Cline Settings
ここではAPI Providerを'Google Gemini'に、Modelを'gemini-2.0-flash-lite-preview-02-05'にしてみましょう。(執筆時点 2025/02/23)
Custom Instructionsには常に従っておいてほしい命令を入力しておきましょう。例えば「常に日本語で答えて」などのよう。

さて、Gemini API Keyを取得しにゆきます。

  1. Google Cloud Consoleから「無料で開始」または上部「コンソール」などをクリックします。
    プロジェクトが未作成の場合は適当にプロジェクトを作成しておきましょう。
  2. 「APIとサービス」をクリックします。なければ検索しましょう。
  3. 「APIとサービスを有効にする」をクリックします。「Gemini API」で検索して、有効にしましょう。
  4. 「APIとサービス」の画面に戻り、「認証情報」をクリック、「認証情報を作成」をクリックしてAPI Keyを取得します。
  5. 取得したAPI Keyコピーして、VSCodeの「Gemini API Key」にペーストして入れましょう。
  6. Gemini API Keyを入力した部分のすぐ上の「Done」をクリックして、Settingを終えましょう。
    試しに「hello」「test」などを入力してAIと対話できるか確認しておきましょう。
    赤いエラーしか返ってこない！という人は設定が上手くいってないので、ググりながら設定を頑張りましょう。SNSで質問したり、他のAIに質問してみたり、ここのコメント欄を使って人間に質問するのも良いでしょう。

Auto-Approveの設定をする

AIにディレクトリを読ませたりファイルを書き換えさせたりしましょう。
Auto-Approve

fizzbuzzを書かせる

あとはAIと対話してコードを書かせる楽しいフェーズです。
何からしていいかわからない！という人のためにプロンプト集を置いておきます。
「fizzbuzzを（任意の言語で）書いて」
「テストも書いて」
「今の状況を説明して」
「テストが通るように実装し直して」など。
「必ず npx vitest --run にして」（これをしないとvitestが一生終わらない）
npx vitest

あとは、私の場合、fizzbuzzの出力の改行とテストの改行処理で躓いて一生テストが通らないなんてことがありました。
思ったほどAIは賢くありません。
ぐるぐるしているAI
その場合は手作業で改行処理を直してもいいですが、AIにできるだけコードを書かせたいですよね。

「fizzbuzzの出力を配列にして」
出力を配列にして！
これで解決することもあります。

「TypeScriptで書き直して」
TypeScriptで書き直して
型をつけるだけでAIはぐんと賢くなることがあります。こういうのも手でしょう。

すべてのテストがパスしました
すべてのテストがパスして完成しました。あなたのGeminiはどんなfizzbuzzを書きましたか？

最後にわたしのGeminiが書いたコードを貼って〆とさせていただきます。

fizzbuzz.ts
function fizzbuzz(n: number): string[] {
  const result: string[] = [];
  for (let i = 1; i <= n; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
      result.push("FizzBuzz");
    } else if (i % 3 === 0) {
      result.push("Fizz");
    } else if (i % 5 === 0) {
      result.push("Buzz");
    } else {
      result.push(i.toString());
    }
  }
  return result;
}

export { fizzbuzz };
fizzbuzz.test.ts
import { describe, it, expect } from 'vitest';
import { fizzbuzz } from './fizzbuzz.ts';

describe('FizzBuzz', () => {
  it('should return the correct FizzBuzz sequence for 15', () => {
    const expected: string[] = ["1", "2", "Fizz", "4", "Buzz", "Fizz", "7", "8", "Fizz", "Buzz", "11", "Fizz", "13", "14", "FizzBuzz"];
    expect(fizzbuzz(15)).toEqual(expected);
  });

  it('should return "Fizz" for multiples of 3', () => {
    expect(fizzbuzz(3)).toEqual(["1", "2", "Fizz"]);
  });

  it('should return "Buzz" for multiples of 5', () => {
    expect(fizzbuzz(5)).toEqual(["1", "2", "Fizz", "4", "Buzz"]);
  });

  it('should return the number as a string for other numbers', () => {
    expect(fizzbuzz(1)).toEqual(["1"]);
  });
});

Discussion