Zenn
🙆

【Cline 】ファイル作成・編集・Web開発自動化を試してみた

に公開
Cline
tech

1. はじめに

最近、エージェント型AIが次々と登場してきました。
その中でも、VSCode上でローカルプロジェクトに直接アクセスし、ファイル作成・編集・コマンド実行まで自動化してくれる拡張機能「Cline」に注目が集まっています。

また、Clineは公式でClaude 3.7 Sonnetを推奨していますが、今回はgpt-3.5-turboでもどこまで使えるのか、自身で検証してみることにしました。

本記事では、

  • 実際にClineとモデル(gpt-3.5-turbo,Claude 3.7 Sonnet)を組み合わせて「簡単なWeb開発補助」がどこまでできたのか
  • うまくいったポイント、つまずいたポイント
  • そこから得られた知見

を整理して、技術記事としてまとめます。

ターゲット読者は、

  • ClineやAgent技術に興味があり
  • Reactを多少触ったことがあるエンジニア層

を想定しています。

2. Clineとは？

Clineは、
「自然言語だけでローカルプロジェクトを自動操作できる」
VSCode向けのエージェント型拡張機能です。

特徴を整理すると、次の通りです。

項目 内容
提供元 OpenAI公式ではなく、独立開発チーム
主な機能 ファイルの作成・編集、ディレクトリ探索、ターミナルコマンド実行
操作方法 VSCode拡張としてインストールし、プロンプト経由で指示する
サポートモデル Claude 3.7 Sonnet（公式推奨）、GPT-3.5-Turbo、GPT-4なども選択可能
利用形態 無料（APIキー課金のみ）、オープンソースプロジェクト

Clineは、単なるコード生成ツールとは異なり、
「プロジェクト全体のコンテキストを把握したうえで、作業を進める」
という設計思想を持っています。

これにより、

  • ファイルをまたいだ編集
  • コマンド実行による開発サポート
  • プロジェクト全体を理解した上での提案

が可能になり、これまでのチャット型AIでは難しかった、より実践的な開発支援ができるようになっています。

🛠️ 今回試した環境構成

項目 内容
マシン M1 MacBook Pro（Apple Silicon）
OS macOS Sonoma
Node.js v18系
パッケージマネージャ npm v9系
プロジェクト Gatsby.jsベースの静的Webサイト（my-gatsby-site）
使用AIモデル OpenAI gpt-3.5-turbo（API経由）
OpenAIアカウント状況 Free Tier（支払い登録済だが昇格待ち、今回はFree Tier状態で作業）

3. なぜ「my-gatsby-site」を選んだのか？

実はこのプロジェクトは、
1年以上前にGitLabでCI/CD（パイプライン設定やデプロイ検証）を学ぶために構築したものでした。

しかし、かなり時間が経過していたため、
今回このプロジェクトを久々に見たときには、**「これ何のプロジェクトだったっけ？」**と完全に記憶が薄れている状態でした。

逆にこの状況は、
「ある程度出来上がったプロジェクトを、Clineが解析して適切に開発作業を進められるか？」
という観点でテストするには絶好のシチュエーションだったため、
この my-gatsby-site をClineのターゲットに選びました。

4. 実施したこと一覧

4-1. プロジェクト解析と起動

  • 既存のGatsby.jsプロジェクト（my-gatsby-site）を対象に、Clineに「このプロジェクトをローカルサーバーで起動して」と指示。
  • package.jsonを読み込む.jpg

  • my-gatsby-siteから読み込む.jpg

  • 必要なコマンド（npm run develop）を提案・実行。

  • localhost:8080で正常起動を確認。

4-2. ファイルの作成・編集タスク

  • src/pages/about.js を新規作成し、「This is the about page」と表示させるページ作成を依頼。
  • 📸 aboutページ成功表示.png

  • 📸 contactページ作成成功

  • 📸 Headerコンポーネント作成.jpg
    (ここらへんになって、VSCodeのテーマがダークモードだと一部の赤文字が表示できないことに気づいてテーマ変更)

4-3. 共通レイアウトへの組み込み（Layout.js）

  • Layoutコンポーネントを作成して、Headerコンポーネントを組み込み。
  • aboutページとcontactページに共通レイアウト適用を依頼。

5. 実際に触って感じたこと・所感

ここでは、今回「Cline × gpt-3.5-turbo」「Claude 3.7 Sonnet」両方を実際に試してみて感じたリアルな所感をまとめます。

5-1. できたこと・期待通りだったこと

  • ファイル作成・編集（新規作成＋内容上書き）ができた
  • Gatsby.jsプロジェクトの解析（package.json読み取り）ができた
  • プロジェクト全体を捜査して（npm run develop）もきちんと実行できた
  • 複数回タスク指示（Start New Task）をしても、前回状態を保持して動いてくれた
  • gpt-3.5-turboでも基本的な補助開発作業は問題なくできた
  • Claude 3.7 Sonnetではさらに提案力・修正力が高く、細かい配慮ややり直しもスムーズだった

5-2. 想定と違った・注意が必要と感じた点

  • Auto-approveを無闇にオンにすると危険（という噂を聞いたので今回は利用してない）
  • 曖昧な指示だと意図と違う方向に進みやすい
  • セッションが肥大化するとCline側がハングするリスクあり
    • 📸 ここにスクショ（This_model_maximum_context_length.jpg）
  • 一度タスクを区切り、「Start New Task」でリフレッシュ運用すると安定する
  • 特に大規模リファクタリングや複雑なファイル間依存が絡むと、gpt-3.5では苦しく、Claude 3.7が有利だった

5-3. モデル比較簡易まとめ（gpt-3.5-turbo vs Claude 3.7 Sonnet）

項目 gpt-3.5-turbo Claude 3.7 Sonnet
動作速度 速い（軽快） 若干遅め
タスク遂行精度 普通（意図ズレも） 高い（指示の意図を汲む）
エラー復旧力 自力リカバリ苦手 自己レビューしながら修正できる
トークン処理上限 少なめ（肥大でエラー） かなり大きい（長時間安定）
料金 安い 高い（gpt-4並み）

📢 結論
gpt-3.5-turboは「軽めの個人開発補助」なら十分だが、
本格的なエージェント型開発を目指すならClaude 3.7 Sonnetが推奨される理由がよくわかりました。

5-4. 最後にMRまで作成した

今回の作業結果は、最終的にGitLabリポジトリにMR（Merge Request）としてまとめました！

📸 ここにスクショ（attempt_compirationまですすめる.jpg）

このように、Clineを活用するだけで「プロジェクト理解・タスク実行・コード修正・MR提出」まで一気通貫できたのは、非常に大きな収穫でした！

6. まとめ（エージェント開発補助の可能性）

✅ 今回、Cline × gpt-3.5-turboを中心に検証し、
✅ 途中でClaude 3.7 Sonnetにも切り替えて比較検証できた結果、

結論として、
「どっちのモデルでも個人レベルの補助開発用途」には十分に実用可能！
と言える結果となりました。

また、タスクの粒度を小さく、指示を具体的にすれば、
gpt-3.5でもしっかり意図通りに作業を進められることも体感できました。
(ただし次から開発するときはClaude 3.7 Sonnetのほうを選択します)

🔥 まとめ

  • 複雑なリファクタリングや、プロジェクトまたぎの修正タスクはClaude向き
  • gpt-3.5でも「小さな改善」「単機能追加」レベルなら十分戦える
  • 「エージェント型AI」を使いこなすには、人間側の指示スキルも問われる
  • ちゃんとしたエージェントAIは初めてなので、まあまあ紆余曲折はあったものの、その部分は慣れるはず

7. 参考リンクまとめ

Discussion