何も考えずにClineを使ってアプリを作ろうとしたらダメだった。とそれの考察

Clineは話題になってましたが「全自動ってどうなの」って思ってました。
が、mizchiさんの記事を見てやってみるかぁと思ってやってみました。（してみむとてすなり）
https://zenn.dev/mizchi/articles/all-in-on-cline

現状、やってみた結果の感想として「ダメだったな」と思っているのですが、
タイトルに書いている「ダメだった」というのは、何も考えずにやったから、ということだと思っています。
”何も考えず”というのがミソだと思うので、調整していけばいい気もしています。

無料でCline試してみる方法も記載しておくので、追走したい人は是非。（今のところ無料でできてます）

前提など

やりたかったこと

もともとやりたかったのは、Tauri＋Reactで始めたプロジェクトに、Chakra-UIをセットアップしてもらうという題材にしました。

やったこと

• Cline互換のRooCode(旧RooCline)をVSCodeにインストール
• Tauri+Reactはあらかじめセットアップしておく(yarn create tauri-app)
• その状態でVSCodeを開いてRooCodeを使って「Chakra-UIをセットアップして」と入力
• APIProviderはVS Code LM API(claude-3.5-sonnet)とGoogleGemini(gemini-2.0-flash-001)の2つを試した。

結果

全然思った通りになりませんでした。

• さすがにセットアップぐらいは(前提などのインプットなしでも)できるかなと思っていた
• やってみたところ、古いバージョンの記載を試していた。（現状Chakra-UIの最新バージョンは3であり、Version2との互換性はない。）
• エラーが出て対応はするものの、何回やってもVersion3の記載にならない。
• 挙句の果てにはTypescriptを消してみたり、Chakra-uiの適用をあきらめたりした（本来はProviderのコンポーネントを使う必要があるが、使わない状態で動作させてOKとしていた）

利用にあたっての準備

2025/02/27時点での自分のRooCodeの環境セットアップ方法を記載しておきます

VSCodeセットアップ

割愛します。

RooCodeセットアップ

VSCodeExtentionからRooCodeで調べてインストール

VS Code LM APIを利用する

まずは無料でやりたかったのでいろいろ調べてみたところ、「VS Code LM API」というものがあるらしく、無料で使えるらしいことがわかりました。

が、これは結局GithubCopilotの利用が前提になっているらしいので、VSCodeとしてCopilotが使えるようにしておくことが必要です。

私の環境では既にCopilotがセットアップされていたので、そのまま利用できました。（以下の記事が参考になりました。ありがとうございます。）

https://qiita.com/taiyyytai/items/1e3d394e4bedaac19967

Copilotが有効になっていれば、ProviderでVS Code LM APIを選択するだけです。

Geminiも使ってみる

LLMのAPIという意味では、GoogleGeminiも無料で使える枠があるようですので、こちらも使ってみます。

以下の記事が参考になりました。ありがとうございます。

https://zenn.dev/peishim/articles/2e2e8408888f59

やることはDevelopプログラムに参加し、GoogleAIStuioからAPIキーを発行し、VSCodeにセットするだけです。

起きたこと

やっていく中で何が起きたかを書いておきます。

Chakra-UIがセットアップできなかった

冒頭にも書いてますが、Chakra-uiのセットアップができませんでした。
まず、指示をした後に「yarn add @chakra-ui/react@2 @emotion/react @emotion/styled framer-motion」をしていました。（後述しますが、この時点で嫌な予感はしていました。）

旧バージョンであるVersion2の書き方

Version2の書き方では、以下のような形になります。

https://v2.chakra-ui.com/getting-started

import * as React from 'react'

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )

つまり、<ChakraProvider>でラップすることになるのですが、初手これをやってました。

Version3としての正しい書き方

Version3からはここの書き方が変わり、Providerでラップすることになっています。

https://chakra-ui.com/docs/get-started/frameworks/vite#setup-provider

import { Provider } from "@/components/ui/provider"
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>,
)

ちなみに、依存関係もV2から減っており、インストール自体は「npm i @chakra-ui/react @emotion/react」となっています。

で、ここがずっとエラーになるのですが、何度やっても解決せず、最後にはChakra-uiの定義を消してました。

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

そりゃこの定義にしたらエラーはなくなるよな、と思います。（そもそも何もしていない）

V3でと指定しても...

若干かわいそうになったので、最初指示をするときに「Chakra-UIのインストールとセットアップをして。Versionは最新、つまり3で」としたのですが、完全に無視して以下のコマンドが実行されました。

npm install @chakra-ui/react@latest @emotion/react@latest @emotion/styled@latest framer-motion@latest

このセットアップだと結局Version2を意識しているので、ダメだなと思ったら案の定ダメでした。（指定しない時と同じ結果）
いい感じに無視されているなと思いました。

Typescriptを消した

また、当然インストールされているVersion3にはChakraProviderがないので、型エラーになるのですが、それを解消して四苦八苦して、最終的にTypescriptを削除してました。（npm uninstall typescript）

といってもそのあとバージョンを指定してインストールの処理をしているので、Typescriptのバージョンのせいかも、と思ったんですかね。

ただ、きちんと型エラーに対しても「対処しよう」という気概は感じられたのですごいなと思いました。

Tauriを意識していない

これもしょうがないといえばしょうがないのですが、Tauriのプロジェクトであったのに「yarn dev」などで開発サーバを起動していました。Tauriだと「yarn tauri dev」になりますね。

人間ならpackage.jsonを見て判断するような箇所かなと思うのですが、若干残念でした。
（とはいえ、これはきちんと説明していない指示側が悪い気もします。）

モデルを変えても同じだった

claudeとgemini-flashを使ってみましたが、同様の結果（Version3に対応できない）となりました。
もしかしたらより上位のモデルを使えば解決する部分ではあるかもしれません。
（が、一応無料でやる前提としているので、検証はいったんここまで）

所感

• 結局やりたいことはできなかった、という思いではあります。
  • が、ここに関しては冒頭記載の通り、もう少しきちんと指示してあげたり、.clineruleの整備などをしていけば使い物になるのかなという思いです。
• 自動的に処理がなされていくのは気持ちがよい
  • 自動承認モードが怖かったので一つずつ確認しながら進めましたが、「src/App.tsxみたいよ」とか言われて人間と同じようにトラブルシュートとかしてるんだなぁと思いました。
• テストとかまで本当はやりたかった
  • ヘッドレスブラウザとかでテストされるらしいのですが、そこまで到達しなかったです。。。

以上です。現時点では「使い物にならない」が、「未来は感じる」というありきたりな感想でした。

追記

• 社内の他の人のデモを見ていたらある程度動くものが出力されていました。
  • 私との違いを見てみると、きちんとした細かい指示をしていました。（例えば、フレームワークはReactを使う、UIはMaterialUIを使う、など）
• そういうのを含めて考えると、Clineがあっても引き続きエンジニア力は問われるのかなと思いました。
  • 指示するにもゴールや手法を理解していないとできないので、「指示する人間」の力量は引き続き問われるのかなと思います。
    • もしかしたらそれすらAIが保管していくのかもしれませんが
  • mizchiさんの「運転席を譲る覚悟」というのはとてもしっくりきました。
    • 運転席はClineに譲りつつ、人間がナビゲートしていく構造というのはイメージが合いました。

文字ばかりになってしまいましたが、どこかでGif動画などはりたいですね