Clineを試してみた
AIエージェントの Cline を試してみました
VSCodeに拡張機能を入れて使います
Cline (prev. Claude Dev) - Visual Studio Marketplace
事前準備
VSCodeに Cline (prev. Claude Dev) - Visual Studio Marketplace をインストールします
左メニューのClineのアイコンから開きます
初回起動時にLLMサービスのAPIキーをセットします
費用がリーズナブルで評判のよさそうな DeepSeek のAPIを用意しました
実行してみる
Vite + TypeScript + React.js でTODOアプリが作りたいですの命令をしてみました
cline >
ユーザーはVite + TypeScript + React.jsでTODOアプリを作成したいとのこと
現在の作業ディレクトリは空で、プロジェクトのセットアップから始める必要がある
まずViteプロジェクトを作成し、TypeScriptとReactのテンプレートを使用する
必要なツールはexecute_commandで、Viteプロジェクトの作成コマンドを実行する
必要なパラメータはすべて揃っているでコマンドの実行を促される
npm create vite@latest . -- --template react-tsRunボタンを押すと、ターミナルで実行されます
cline >
Viteプロジェクトの作成が完了した
次に依存関係をインストールする必要がある
npm installコマンドを実行する
必要なツールはexecute_commandで、npm installコマンドを実行する
必要なパラメータはすべて揃っているでコマンドの実行を促される
npm installRunボタンを押すと、ターミナルで実行されます
cline >
依存関係のインストールが完了した
次にTODOアプリの基本的なコンポーネントを作成する
App.tsxを編集してTODOアプリの基本構造を作成する
必要なツールはreplace_in_fileで、App.tsxを編集する
必要なパラメータはすべて揃っているsrc/App.tsxを編集される
Saveボタンを押すと、ファイルが保存されます
cline >
App.tsxの更新が完了したが、未使用のインポートに関するESLintエラーが発生している
reactLogoとviteLogoのインポートを削除する必要がある
必要なツールはreplace_in_fileで、App.tsxから未使用のインポートを削除する
必要なパラメータはすべて揃っているインポートエラーが出てたので、直してくれます
src/App.tsxを編集される
Saveボタンを押すと、ファイルが保存されます
cline >
未使用のインポートを削除し、ESLintエラーを解消した
次にApp.cssを編集してTODOアプリのスタイルを整える必要がある
必要なツールはreplace_in_fileで、App.cssを編集する
必要なパラメータはすべて揃っているスタイルを直してくれるそう
src/App.tsxを編集される
Saveボタンを押すと、ファイルが保存されます
cline >
App.cssの更新が完了し、TODOアプリのスタイルが整った
次に開発サーバーを起動してアプリを確認する
必要なツールはexecute_commandで、npm run devコマンドを実行する
必要なパラメータはすべて揃っているでコマンドの実行を促される
npm run devRunボタンを押すと、ターミナルで実行されます
動作するアプリができました
shoji-k/cline-todo at cline-sample
失敗例
Azure OpenAI のモデルを使ってTodo生成ボタンを作って
の命令は微妙に古い情報を参照してくるとかで、うまく動くコードになりませんでした
情報量が少ないものは苦手かもです
まとめ
AIエージェントの威力を感じました
ボタンを押すだけで、スムーズに開発進んでいいですね
ここまでで $0.0037 かかりました
もうちょっと使ってみようと思います
PR
生成AI時代の新プログラミング実践ガイド Pythonで学ぶGPTとCopilotの活用ベストプラクティス
このリンクは、アフィリエイトリンクです
Amazonのアソシエイトとして、blog.freks.jp は適格販売により収入を得ています。
This site is managed by freks