Clineを使ってデザイナーが開発してみた！

今話題の Cline を業務で実際に使ってみたので、活用シーンと感想をまとめました。

私はUnityやReactでXR系の動くプロトタイプを日々作っているデザイナー職です。コーディングの知識はあまりありません。

これまで Github Copilot Edit（以下 Github Copilot）を主に使用して開発を行ってきたため、両者の違いを中心に解説しています。Github Copilotの説明はしません。

なお、この記事の情報は 2025 年 3 月 10 日時点のものです。

Cline とは

Cline は、コードを書いてくれるだけでなく、コマンドの実行、エラー修正、ファイル保存なども自動で行ってくれる AI エージェントです。

これまで活用していた Github Copilot Edit と比較すると、コード生成だけでなく、その周辺作業も自動実行してくれる点が大きな特徴です。
ただし、Cline は従量課金制となっており、基本的には使用量に応じて料金が発生します。

Cline と Github Copilot の比較

機能・特徴	Cline	Github Copilot
料金体系	従量課金制 ※	定額制
コード生成	✅	✅
ファイル新規作成	✅	✅
複数ファイル指定	✅	✅
関連ファイルの自動検出	✅	？
コマンド実行の自動化	✅	❌
ファイル保存の自動化	✅	❌
Git 操作（コミット・プッシュ）	✅	❌
エラー修正の自動化	✅	❌
画像認識によるコード生成	✅	❌
文章校正機能	✅	❌
長大なファイル処理	制限あり	制限あり
人間の監視・介入の必要性	コストを気にする場合高い	ー

※今回は課金されるモデルを使用していますが、DeepSeek-R1など無料枠があるモデルもあるため必ずしも課金されるわけではありません。

実行環境

• PC：Windows & Mac
• IDE：VSCode
• 拡張機能：Roo Code
• API：AWS Bedrock
• モデル：claude-3-7-sonnet-20250219-v1:0

使い方

1. インストールと設定

VSCode の拡張機能マーケットプレイスで Cline を検索し、お好みの拡張機能をインストールします。今回は「Roo Code」を使用しました。

API やモデルの設定を行います。今回は AWS Bedock を API プロバイダーとして選択し、モデルは claude-3-7-sonnet-20250219-v1:0 を使用しました。（AWS Bedockの使い方などの詳細は割愛します。）

アクセスキーなどの必要情報を Roo Code の設定画面に入力し、「Use cross-region inference」にチェックを入れます。

2. 使用方法

実行したいタスクを自然言語で入力するだけです。テキストだけでなく、画像も添付できるため、視覚的な情報も伝えることができます。

既存プロジェクトの改変や、新規プロジェクトの作成など、様々なタスクに対応可能です。

3. 権限と実行

デフォルト設定では、ファイルの読み取りやコマンド実行などの操作ごとに許可を求められます。

「Auto-approve」設定から、自動実行を許可する操作の範囲を設定できます。

タスク完了時には、緑色のテキストで実行内容の要約が表示されます。

使ってみた場面

ここでは、実際に Cline を使って開発した様々なプロジェクトの事例を紹介します。

1. React で 3D 操作

3D ゲーム風インタラクティブ空間の作成

最初に挑戦したのは、React-Three-Fiber を使った当たり判定付きの 3D 空間の作成です。以下のような段階的なプロンプトで指示しました：

1. 最初のプロンプト：

   react-three-fiberとdreiを使って、Cubeを表示するページを作って
   

2. 続いて機能追加のプロンプト：

   ゲームみたいな感じで、Cubeとかで空間を作って、またカプセルで人に見立てたものをWASDなどで移動させるようにして。また空間のオブジェクトと人には当たり判定をつけて、カプセルの人が空間のオブジェクトにぶつからないようにして
   

完成したものが以下の画像です

想定通りの機能を実装してくれただけでなく、指示していなかったジャンプ機能まで追加されており、期待以上の結果となりました。
追加で「人間のような見た目にして」と言ったら可愛いキャラを作ってくれました。

特に印象的だったのは、「当たり判定を入れたい」という簡単な指示に対して、Cline が自主的に判断して「react-three-rapier」というライブラリを追加して実装した点です。これは私自身が選択したであろうライブラリでもあり、AI の判断力の高さに驚かされました。

この一連の作業にかかった費用は 2.48 ドルでした。

なお、新規ファイル作成自体は Github Copilot でも可能です。

2. React で画像を与えてUI再現

画像認識機能を活用した UI 再現

Cline の特徴的な機能の一つとして、Github Copilot にはない「画像を参考にしたコード生成」があります。この機能を活用して、とあるアプリの操作盤の画像から HTML での UI 再現を試みました。

実験内容

とあるアプリの操作盤の画像を与え、HTML で再現するよう指示しました。

指示画面：

再現結果：

完璧とは言えませんが、主要な要素は網羅されており、十分な再現度が得られました。

3. VisionOS 向け Swift アプリ（やや失敗）

最新技術への対応限界

AppleVisionPro デバイス向けに、TabletopKit というフレームワークを使った VisionOS アプリの開発を試みましたが、こちらは部分的な成功にとどまりました。

試行錯誤の過程

最初のアプローチ： 一からのプロジェクト作成

まず、以下のプロンプトで試しました。

AppleVisionProのtabletopkitを使ったアプリを作りたい。まずは何もない状態でいいのでtabletopkitを使ったXcodeのプロジェクトを作って

この方法では、Swift ファイル自体は作成されたものの、ビルドに必要なプロジェクト構成ファイルが正しく生成されませんでした。

次のアプローチ： 既存プロジェクトの拡張
手動で空の Xcode プロジェクトを作成し、TabletopKit フレームワークのドキュメントページを参照情報として提供しました。

tabletopkitは以下のフレームワークです。
https://developer.apple.com/documentation/tabletopkit
tabletopkitを使ったAppleVisionProアプリを作りたいです。「TabletopkitwithCline」という空のプロジェクトを作ったので、まずはtabletopkitを組み込んだ超シンプルなものを作ってください。テーブルの上にキューブがあるだけでいいです。

しかし、この方法でも多くのエラーが発生し、最終的に TabletopKit の実装は断念せざるを得ませんでした。おそらく、このフレームワークが比較的新しいため、学習データに十分な情報がなかったのではないかと推測されます。私自身も Swift 開発の知識が不足していたため、エラーの修正が困難でした。

部分的な成功

TabletopKit は使用できませんでしたが、基本的な VisionOS アプリとして、シンプルな Cube を表示するアプリの作成には成功しました。

学んだこと

VSCode 上の Cline から Xcode プロジェクトのコードを操作できることが確認できた点は大きな収穫でした。ただし、ビルド時のエラーなどは Cline が直接読み取れないため、スクリーンショットを撮って画像として共有する必要がありました。

4. Unity 開発の検証

ゲームエンジン対応の限界

参考動画を基に、Unity プロジェクトでの Cline 活用も試みました。

Roo-Code(Cline Fork)で遊んでるんだけど、Unityもプロジェクトをゼロから作成できるんだw
Quest 用のアプリでCubeをつかめるところまで、プロジェクト、シーン、コード全部作成する。

Unityでプロジェクトを自動生成(2秒)
シーンを自動生成(15秒)
コードを自動生成(30秒) pic.twitter.com/nTwKWUgYRE

— 中村 薫 (@kaorun55) January 25, 2025

プロジェクト作成、起動、コード記述などの基本操作は問題なく実行できましたが、シーンファイルの作成などの特殊な操作には対応できませんでした。

コード以外の部分での制約

コード作成・編集に関しては Github Copilot と同等の能力を発揮しましたが、Unity 特有の課題も見られました。例えば、VR 開発特有の予期せぬ挙動についてスクリーンショット付きで相談した際、Cline はプロジェクト内のファイル参照やドキュメント確認など多角的なサポートを提供しましたが、Unity Editor のインスペクタなどの画面を直接確認できないため、完全な解決には至りませんでした。

人間への指示

Xcode でも同様でしたが、UnityEditor など Cline が操作できない部分で必要な対処については、こうしてくださいと言う指示がテキストで表示されました。

5. 既存アプリの修正機能追加

複数ファイルにまたがる機能拡張

既存アプリケーションの修正や機能追加についても検証しました。

ファイル指定の柔軟性

Cline では「@」マークを使ってファイルを複数指定できるため、特定のファイルに対する機能追加などを効率的に指示できます。

この機能自体は Github Copilot でも提供されています。

ただし、Cline の場合は関連ファイルを自動的に検出する能力が高く、すべての対象ファイルを明示的に指定しなくても適切に処理してくれる点が優れていました。
Github Copilotでもworkspace全体を読み込むことができるようですが、あまり試したことがないため比較は割愛します。

使い勝手の違い

ファイル保存の自動化に関して、Cline はコード変更後に自動的にファイルを保存してくれますが、Github Copilot では変更後に手動でファイルを保存する必要があります。これは小さな違いですが、複数ファイルを扱う場合には作業効率に影響します。

一方で、自動保存機能は Git でコミットしていない変更が上書きされるリスクもあるため、理想的には Git コミットも同時に行ってもらうと安心です。
後述しますが、もちろん Git コミットも Cline は可能です。

6. Github へのプッシュ、コミット

バージョン管理の自動化

指示をしたら Github へのプッシュやコミットも実行してくれます。

私はついコミットメッセージをちゃんと書くことをサボりがちなので、このように AI が書いてくれるのはありがたいですね。

ただプロジェクトの生命線とも言えるバージョン管理を自動化ツールに委ねることには若干の不安も感じました。

7. ビルドエラーの解決

自動トラブルシューティング

Next.js プロジェクトでよく遭遇する「開発環境では動くのに本番ビルドでエラーが出る」という問題に対して、Cline は非常に効果的でした。

従来のワークフローでは、エラーメッセージをコピーして Github Copilot に投げて解決策を得る必要がありましたが、Cline は自らnpm run buildコマンドを実行し、エラーを検出して修正するという一連の作業を自動化してくれます。

この機能は非常に便利で時間節約になりましたが、エラー修正と実行を繰り返すプロセスは従量課金制の Cline ではコストが急増する要因となりました。複雑なビルドエラーの解決には、効率とコストのバランスを考慮する必要があります。

8. 文章校正

AI による文章校正機能

ここまで読んだ方はお気づきかと思いますが、この記事は AI により校正されています。
文章の校正の AI への依頼は今までも行っていたため、今回も適当な AI にお願いしようとは考えていました。
試しに以下のシンプルなプロンプトで Cline に依頼したところ、構造化も含め記事全体をいい感じに校正してくれました。

 Clineを使ってみたと言う記事の修正もやってくれる？日本語をいい感じにしてほしい

とはいえ、主張を勝手に足したり、間違った解釈をして修正している部分もあったので注意は必要です。

ちなみに GithubCopilot では文章の校正はしてくれませんでした。普段からも GithubCopilot はコーディングに少しでも関係のないことはやってくれないので、むしろ Cline がやってくれたことに驚きです。

かなり文章は変わってしまうので、個性が必要な個人ブログならあまり使いたくはないですが、会社アカウントでの技術記事であれば使っても良いかなと思いました。
とはいえ AI の書いた文章だと気づくと途中で読みたくなくなることも個人的には多いので、バランスが必要そうです。
ちなみにこの「文章校正」の章は筆者が書いたそのままの文章です。

わかったこと

ここでは、Cline を実際に使用して得られた知見や注意点をまとめます。

1. 人間の介入と監視の必要性

視覚的な結果の評価

3D 系の開発では、Cline が生成したコードが想定通りに動作しているかを人間が確認する必要があります。現在の Cline は視覚的な結果を自ら評価できないため、適宜人間が動作確認を行い、問題があれば修正指示を出すというプロセスが重要です。

継続的な監視の重要性

Cline は多くの作業を自動化してくれますが、完全に放置できるわけではありません。特に問題解決のプロセスでドツボにはまると、エラーが解消されるまで同じ試行を繰り返し、課金額が急増することがあります。このため、Github Copilot よりも人間の監視が必要で、作業中は注意を払い続ける必要があります。

外部ツールとの連携

Xcode や Unity Editor など、Cline が直接操作できない部分については、人間が介入して操作する必要があります。Cline はテキストで指示を出してくれますが、実際の操作は人間が行う必要があります。

2. 効率的な利用方法

ファイルとタスクの適切な分割

Github Copilot と同様に、Cline も長大なファイルの処理には苦戦します。

実装中に「ファイルのコードが長くなりすぎて、line が指定できない」という理由で作業が中断し、同じ失敗を何度か繰り返す場面がありました。Github Copilot のような明確な停止ボタンがないため戸惑いましたが、Cancel ボタンで停止し、「ちょっとずつ実装して保存して」などの指示を与えることで対応できます。

Cline が新規に生成するコードは分割せずに 1300 行にも及ぶ単一ファイルになることがあるため、「コンポーネントごとにファイルを分割する」などの明示的な指示が必要です。

コスト管理のポイント

小規模な修正や新規作成では 1 ドル前後で済むことが多いですが、長いファイルの修正でエラーが連続すると、10〜30 ドルと急激にコストが増加することがあります。タスクをこまめに Delete して新しいものに切り替えることでコスト増加を抑制できます。

Github Copilot と Cline の使い分け

コスト効率を考慮すると、以下のような使い分けが効果的です：

• Github Copilot で解決できない問題が発生した場合は Cline に切り替える
• 複雑な機能追加の概要設計は Cline で行う
• 細かい修正や調整は Github Copilot で行う

最後に

Github Copilot Edit でのコード自動生成に慣れていた私でも、Cline にはいい意味でも悪い意味でも衝撃を受けました。従量課金制という料金体系は、自分の給料とのコスパの比較により心理的プレッシャーになることもありました。

しかし、特に Web 分野でのエラー解決の自動化や複雑なタスクの一貫した処理など、明らかな価値も感じられました。コマンド実行やファイル保存の自動化、画像認識によるコード生成など、Github Copilot にはない機能が業務効率化に大きく貢献する場面も多くありました。

適切な使い分けとコスト管理を行いながら、AI ツールを活用していくことが今後の開発スタイルになっていくでしょう。Cline の今後の進化が楽しみです！