📚
今話題のClineを使って'じゃんけん'してみた

2025/01/22に公開
 ClineとはClineは、フロントエンドの開発を支援するツールです。
https://github.com/cline/cline
Claude 3.5 Sonnetのエージェントコーディング機能により、Clineは複雑なソフトウェア開発タスクをステップバイステップで処理することができます。ファイルの作成と編集、大規模なプロジェクトの探索、ブラウザの使用、ターミナルコマンドの実行（許可を与えた後）などが可能なツールを使って、コード補完や技術サポート以上の方法であなたを支援することができます。クラインはモデル・コンテキスト・プロトコル（MCP）を使って新しいツールを作成し、自身の能力を拡張することもできる。自律AIスクリプトは従来、サンドボックス環境で実行されてきたが、この拡張機能は、ファイル変更とターミナルコマンドをすべて人間が承認するGUIを提供し、エージェント型AIの可能性を探るための安全でアクセスしやすい方法を提供する。

 要約https://zenn.dev/shunsuke_stack/articles/eb9cd6c167b835
こちらの記事で紹介しているAiderの上互換ではないかと思っています。

 使用するプロジェクトhttps://github.com/nakajima-sh-cnctor/vue-fizz-buzz-cursor
https://zenn.dev/shunsuke_stack/articles/277e75e9b3df27

 プロンプトの構築テストコードの作成
コンポーネントの作成
App.vueに追加
テスト実行
動作確認

 テストコード生成src/components/__tests__配下にRockPaperScissors.spec.tsを作成してください。

vitestを使用してテストコードを作成してください。

「ぐー」「ちょき」「ぱー」の3つのボタンを押したときに、それぞれの結果が表示されることを確認してください。
下記実行結果

惜しい！ここまでできて何故かvitestをimportできないという!
RockPaperScissors.spec.ts
import { mount } from '@vue/test-utils'
import RockPaperScissors from '../RockPaperScissors.vue' // Assuming the component is named RockPaperScissors.vue

describe('RockPaperScissors Component', () => {
  it('should display the correct result when "ぐー" button is clicked', async () => {
    const wrapper = mount(RockPaperScissors)
    await wrapper.find('button.gu').trigger('click')
    expect(wrapper.text()).toContain('ぐー')
  })

  it('should display the correct result when "ちょき" button is clicked', async () => {
    const wrapper = mount(RockPaperScissors)
    await wrapper.find('button.choki').trigger('click')
    expect(wrapper.text()).toContain('ちょき')
  })

  it('should display the correct result when "ぱー" button is clicked', async () => {
    const wrapper = mount(RockPaperScissors)
    await wrapper.find('button.pa').trigger('click')
    expect(wrapper.text()).toContain('ぱー')
  })
})
vitestから必要なものをインポートしてください

 驚異的な知能レスポンスが英語だったので日本語で対応するかを確認しました
日本語で対応することはできますか？
日本語で対応できるとかいう次元じゃなかった。

次のタスクを理解していることに驚きを隠せない

 テストを修正テストを確認した感じ、詰めが甘いので修正します

クリックされたボタンの結果を表示するが、対戦結果が表示されていないので修正します
テストコードを修正してください

ボタンが押されたら対戦が擬似的に行われてその結果を出力するようにしてください

 コンポーネントの作成RockPaperScissors.vueを作成してください

RockPaperScissors.spec.tsを仕様として作成してください

setup lang="ts"で作成してください
下記実行結果
RockPaperScissors.vue
<template>
  <div>
    <button class="gu" @click="play('ぐー')">ぐー</button>
    <button class="choki" @click="play('ちょき')">ちょき</button>
    <button class="pa" @click="play('ぱー')">ぱー</button>
    <p>{{ result }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const result = ref('')

function play(choice: string) {
  const options = ['ぐー', 'ちょき', 'ぱー']
  const computerChoice = options[Math.floor(Math.random() * options.length)]
  if (choice === computerChoice) {
    result.value = '引き分け'
  } else if (
    (choice === 'ぐー' && computerChoice === 'ちょき') ||
    (choice === 'ちょき' && computerChoice === 'ぱー') ||
    (choice === 'ぱー' && computerChoice === 'ぐー')
  ) {
    result.value = `${computerChoice}に勝ちました`
  } else {
    result.value = `${computerChoice}に負けました`
  }
}
</script>

<style scoped>
button {
  margin: 5px;
}
</style>


 テストの実行Clineに実行させても良いのですがVscodeで開いているテストファイルの左側のアイコンから実行できるのでそれで確認します

結果は全て緑なので正常に動いているみたいです

※ここまで描画確認一度もしていません。
Clineで実装するとこんな感じになります
テストを実行してください
Run Cimmandを押すとnpx vitest runが実行されます
結果も特段問題なさそうです
 RUN  v2.1.8 /Users/nakajijmashunsuke/Documents/Workspace/vue-fizz-buzz-cursor

 ✓ src/components/__tests__/FizzBuzz.spec.ts (3)
 ✓ src/components/__tests__/HelloWorld.spec.ts (1)
 ✓ src/components/__tests__/RockPaperScissors.spec.ts (3)

 Test Files  3 passed (3)
      Tests  7 passed (7)
   Start at  00:00:08
   Duration  680ms (transform 198ms, setup 0ms, collect 333ms, tests 44ms, environment 977ms, prepare 125ms)

 App.vueに追加して描画確認App.vueにコンポーネントを追加してください
下記実行結果

既存のソースに追加する形で修正を入れてくれています
App.vue
<template>
  <v-app>
    <v-main>
      <v-container>
        <FizzBuzz :numbers="[1, 2, 3, 4, 5, 15, 30]" />
        <FizzBuzz :numbers="[6, 7, 8, 9, 10, 11, 12]" />
        <RockPaperScissors />
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import FizzBuzz from './components/FizzBuzz.vue'
import RockPaperScissors from './components/RockPaperScissors.vue'
</script>

<style>
@import 'vuetify/styles';
</style>

vueの起動もClineで実行してくれています。

詳細は省きますが、テストの実行と同じです。
実行結果

ボタンのデザインがフォーマットされていて簡素ですが、「ぐー」「ちょき」「ぱー」のテキストをクリックすれば下に結果が表示されます


 まとめClineの使用感は”Aider”に似ています

Vscodeの拡張機能としてGUIから操作可能なので簡単操作でコードを生成できます。

Cursorとの違いは、Cursorはコーディングをアシストしてくれる機能に長けているのに対してClineはプロンプトから自動生成を行い、コマンドラインの実装などありとあらゆる工程を自動化できます

実際に今回の実装にあたり私自身は一行もコードを書いていません。

 難点これは私の使い方の問題かもしれませんが、同一タスク（チャット）で繰り返しプロンプトを投げると、そのタスクの結果がおかしくなってしまうことがあります。

そのため、タスクを切り分けてプロンプトを投げることを推奨します
GitHubで編集を提案
Clineとは

要約

使用するプロジェクト

プロンプトの構築

テストコード生成

驚異的な知能

テストを修正

コンポーネントの作成

テストの実行

App.vueに追加して描画確認

まとめ

難点

Discussion
