技術

Cline 使ってみる

はじめに

最近流行りのAIアシスタントClineを使ってみる。
ここでは、Clineをインストールしてちょっとしたアプリの開発まで行う。

環境

Visual Studio Code 1.98.2
Claude 3.7 Sonnet

準備

  • Visual Studio Codeがインストール済み

Cline拡張機能をインストール

  1. Ctrl + Shift + P でコマンドパレットを開く
  2. 拡張機能のインストールを選択する。
  3. 「Cline」で検索をし、下記をインストールする。
install-cline-01
  1. メニューに下記のマークが増えていればOK
install-cline-02

Clineを使ってみる

Clineへのログイン

まずは無料版を使ってみる。

  1. 「Get Started for Free」を選択する。
use-cline-01
  1. 「Cline」のログインページがブラウザで開かれるのでログインをする
use-cline-02
  1. ログイン後、VSCode上でClineが使用できるようになる。
use-cline-03

設定

Clineが利用できるようになったら、以下の設定を行う。

use-cline-04

設定内容は以下のようにした。(Auto-approve以外は全部チェックを入れた)

  • Auto-approve (自動承認) 自動承認を使用すると、Clineは許可を求めずに以下のアクションを実行できる。
    注意して使用し、リスクを理解している場合のみ有効にしてください。

  • Read files and directories (ファイルとディレクトリの読み取り)
    コンピューター上のあらゆるファイルを読み取るアクセスを許可する。

  • Edit files (ファイルの編集)
    コンピューター上のあらゆるファイルの変更を許可する。

  • Execute safe commands (安全なコマンドの実行)
    安全なターミナルコマンドの実行を許可します。モデルがコマンドが潜在的に破壊的だと判断した場合、承認が必要。

  • Use the browser (ブラウザの使用)
    ヘッドレスブラウザで任意のウェブサイトを起動し操作する機能を許可する。

  • Use MCP servers (MCPサーバーの使用)
    ファイルシステムを変更したりAPIと連携したりする可能性のある設定済みMCPサーバーの使用を許可する。

  • Max Requests: 20
    Clineはタスクを進める承認を求める前に、この数のAPIリクエストを自動的に行う。

  • Enable Notifications (通知の有効化)
    Clineが承認を必要とする場合やタスクが完了した場合にシステム通知を受け取る。

use-cline-05

簡単なアプリを作る

Clineを試してみたいので、以下のようなアプリを作ってみる。

アプリ概要

仕様

  • Amazonの売れ筋ランキングのTop10を取得し、CSVにする。
  • CSVの列は 商品名, 値段とする。
  • 売れ筋ランキングのカテゴリーは実行時のコマンド引数で選択できるようにする。

言語

  • 言語は typescriptを使用する。

マニュアル

  • アプリの使い方をテキストとして出力する。

というわけで、ざっくりとして感じで上記で作らせてみる。

作ってみる

初期状態は以下

create-app-with-cline-01 create-app-with-cline-02

npm init -y をする

create-app-with-cline-03

入っていないので node --version をする。

create-app-with-cline-04

yarn --version をする。

create-app-with-cline-05

pnpm --version をする。

create-app-with-cline-06

Node.js入れるから、パッケージマネージャ何使っているか調べるよという感じ。

create-app-with-cline-07 パッケージマネージャーのチェックからも何も出力されない。とClineからきている。

ls -alで調べてみるわという感じ。

ここで、ls -alして時間をとらせるのもあれなので、プロンプトを入力して軌道修正を図る。
先ほどのアウトプットで以下が出力されていたことを情報として入れてあげる。

/usr/bin/apt-get
yum not found
dnf not found
pacman not found
create-app-with-cline-08

軌道修正できたみたいなので、以下のコマンドを実行する。 (Run Commandを押す)

sudo apt-get update && sudo apt-get install -y nodejs npm
create-app-with-cline-09

入ったかどうかを確認するために、node --version && npm --version を実行する。

create-app-with-cline-10

入っているので、npm init -yするとのこと。

create-app-with-cline-11

修正した内容はこれでいいか？という感じ。 Saveをする。

create-app-with-cline-12

修正した内容はこれでいいか？という感じ。 同じくSaveをする。

create-app-with-cline-13

srcディレクトリを作成

create-app-with-cline-14

アプリケーションを即座に作ってくれた。 index.tsの変更内容これでいいか？という確認を求められている。
Saveする。

create-app-with-cline-15

作ったアプリケーションにエラーが出てる、これは依存パッケージ入れる必要があるね。
じゃあ入れようとのこと。
実行する。

create-app-with-cline-16

README.mdを作ってくれた。
変更内容これでいいか？という確認を求められている。 Saveする。

create-app-with-cline-17

typeScriptのコードコンパイルしようとのこと。 実行する。

create-app-with-cline-18

無料版だとここまででCreditがなくなった。
というわけでBuy Creditsを押して課金をしてくる。
$5課金したので続ける。

create-app-with-cline-19

成果物のディレクトリを確認させてくれとのこと。

create-app-with-cline-20

何も出力されていないように見えるよ？とのこと。 なんかコンソールの出力が受け取れていないのかも。
とりあえず、先ほどの出力を渡してみる。

create-app-with-cline-21

コンパイル成功してるじゃん！とのこと。
アプリケーション実行できるか試すね。ということで実行をする。

create-app-with-cline-22

CSVファイルができているかどうか確認させてとのこと。
コンソール出力はエラーになっているのであれなのだが。

create-app-with-cline-23

CSVないからコード修正するとのこと。
中身確認しないでSaveをする。

create-app-with-cline-24

コード修正するとのこと。
同じく、中身確認しないでSaveをする。

create-app-with-cline-25

コンパイル

create-app-with-cline-26

実行

エラーが見えないようなので入力してあげると思ったが、これを何回も繰り返すのは困るので対処をする。
以下を参考に修正してみる。

で色々調べたら、過去にテーマとしてインストールしたpowerlevel10kが原因ぽかった。

なので、一旦はbashを既定のターミナル構成として続けることにする。

create-app-with-cline-27

エラーの内容を見て修正したとのこと、Saveを押す。

create-app-with-cline-28

README.mdの修正内容を見てSaveを押す。

というわけで試行錯誤すること十数回で完成した。
結局 $6以上かかっているようだ。

create-app-with-cline-28

多分他の人の記事にも書いてあると思うが、ターミナルの出力結果を読み取るのがかなり料金がかかっていそう。
また、今回はCLIのツールなので、テストとして何回も実行していたのだが、出力したCSVの中身を出力→読み取って直すということをやっているのでこれがコストとしてかかっていそうだった。
テストを用意してテストがPassしたかどうかで判断させる方が良いのかも。

完成したプログラム

今回、Clineオンリーで作成したプログラムは以下となる。

参考

おわりに

Clineをちょっと遅れながらも使ってみた。
C#とかでも使えるのかな。
Visual Studioとかでも使えるようになったら…！
ひとまずは、TypeScriptで色々アプリを作ってみようかな。

.clinerulesでプロンプトの設定もできるようなので、このあたりも試していきたい。

© 2020 - 2025 kbushi
Hugo で構築されています。
テーマ Stack は Jimmy によって設計されています。