Clineでアプリを作ろう！AIと協業する開発フローを体験

はじめに

Clineで作る花粉症対策アプリ：AIエージェントと共に効率的な開発を実現

こんにちは、エンジニアの@makishy(きしだしょーきち（仮）)です。
花粉の季節が近づいてきましたね。くしゃみや鼻水と格闘している方も多いのではないでしょうか？

今回は、そんな「花粉症対策」を題材に、VSCodeの拡張機能「Cline」を使ってAIと協業する開発プロセスを体験してみたいと思います。
Clineは自律型AIエージェントとして動作し、私たちの開発作業を大幅に効率化してくれる強力なツールです。

「AIと一緒にアプリ開発？どうやるの？」

そう思った方、この記事ではそのプロセスを一緒に体験していきましょう！人間の創造性とAIの処理能力を最適に組み合わせるコツをご紹介します。プロダクトコンセプトの設計から始まり、要件定義、そしてドキュメント駆動で開発を進めていく過程を、実際の例と共に解説していきます。

この記事は気軽に斜め読みできる内容にまとめましたので、コーヒーでも飲みながらリラックスしてお付き合いください。読み終わる頃には、あなたも明日からClineを使った効率的な開発にチャレンジしたくなるはずです！

それでは、花粉症に悩むユーザー（自分含む）のための便利なアプリを、AIの力を借りながら一緒に作っていきましょう！

Clineとは

Clineは、VSCodeで利用できる自律型AIエージェントの拡張機能です。元々「Claude-dev」として知られていたこのツールは、コーディングをサポートするだけでなく、開発プロセス全体を効率化します。

Clineは、VSCodeの拡張機能として提供されており、慣れ親しんだVSCode上で開発することができます。

主な特徴

• 自律的なコード生成: ファイルの作成・編集をAIが直接行い、変更をdiffで確認可能
• ターミナル統合: コマンド実行や出力の監視を自動化
• プロジェクト理解: ファイル間の依存関係を把握し、全体を考慮したサポートを提供
• 複数AIモデル対応: Anthropic、OpenAI、Google Geminiなど様々なAPIに対応

Clineの最大の強みは、単なる提案だけでなく実際にファイルを編集したりコマンドを実行したりできる点です。これにより開発者はアイデアの構想や設計に集中でき、実装の多くをAIに任せることができます。

AIを活用した開発フロー

今回の開発では、コンセプト設計からClineを使った開発まで一連の流れをAIと協業しながら実現してみたいと思います。

以下が基本的なステップです。

1. コンセプト設計: 人間がアプリのビジョンとターゲットユーザーを定義
2. 要件整理: 機能要件を定義し、Clineと対話しながら精緻化
3. ドキュメント作成: Readme.mdに仕様を記述し、開発の指針として活用
4. 技術選定: 適切な技術スタックを選び、clinerulesとして規約、制約を定義
5. 自律開発: Clineにタスクを依頼し、AIが自律的にコードを生成
6. レビューと調整: 生成されたコードを確認し、必要に応じて修正指示

このフローの特徴は、人間が創造的な部分や方向性の決定に集中し、実装の詳細をAIに任せられる点です。また、仕様の変更があれば、ドキュメントを更新するだけでAIが理解し、コードに反映してくれます。

今回の花粉症対策アプリ開発では、このフローに沿って進めながら、AIとの効果的な協業方法を探っていきます。

プロダクトコンセプト設計

花粉症対策アプリの開発を始めるにあたり、まずはプロダクトのコンセプトを明確にしましょう。AIと協業する場合でも、方向性を定めるのは人間の役割です。

ターゲットユーザーと課題分析

花粉症に悩む人々の主な課題を簡潔にリストアップしました。

• 外出前に花粉飛散状況を確認したい
• 症状の記録と傾向分析をしたい
• 個人に合った対策情報が欲しい
• 薬の服用タイミングを忘れがち

これらの課題から、30〜40代の都市部に住む忙しいビジネスパーソンをメインターゲットに設定しました。スマホを頻繁に使用し、効率的に情報を得たい層です。

エレベーターピッチの作成

コンセプトを簡潔に伝えるため、Clineに以下のように指示しました

花粉症対策アプリのエレベーターピッチを作成してください。
ターゲットは30-40代の忙しいビジネスパーソンで、主な機能は花粉飛散予報、症状記録、薬の服用管理です。

作成したエレベータピッチはプロジェクトの直下にREADME.mdを作成した上で、アプリのコンセプトとして内容を記載をしてください。

Planを実行すると以下のような結果が得られます。

Actを実行すると次のようにプロジェクトのルートにREADME.mdが作成されます。

# ポレンガード - 忙しいビジネスパーソンのための花粉症対策アプリ

## エレベーターピッチ

``
「ポレンガード」は、
忙しいビジネスパーソンのための
花粉症管理アプリです。

従来の単なる花粉飛散情報アプリとは異なり、
個人の症状記録と薬の服用管理を一元化し、
あなたの生活リズムに合わせたアラートで
最適なタイミングでの対策を可能にします。

毎日の短時間の記録で、
あなたの花粉症パターンを学習し、
予防から対処までをシームレスにサポート。
忙しい日々でも花粉症に振り回されない生活を実現します。
``

## アプリコンセプト

### 概要
ポレンガードは、30-40代の忙しいビジネスパーソンをターゲットにした花粉症対策アプリです。日々の業務に追われる中でも、効率的に花粉症対策を行えるよう設計されています。最小限の操作で最大限の効果を得られるシンプルなインターフェースと、個人の生活パターンに合わせたカスタマイズ機能が特徴です。

### 主要機能

#### 1. 花粉飛散予報
- リアルタイムの花粉飛散情報を提供
- 位置情報に基づいた地域別の花粉飛散レベル表示
- 週間予報で事前対策をサポート
- 外出予定に合わせたアラート設定

#### 2. 症状記録
- シンプルな操作で日々の症状を記録
- 視覚的なグラフで症状の推移を確認
- 花粉飛散量と症状の相関関係を分析
- AIによる個人の花粉症パターン学習と予測

#### 3. 薬の服用管理
- 服用中の薬の登録と管理
- 最適な服用タイミングのリマインダー
- 薬の効果記録と分析
- 服用履歴の医師との共有機能

### ターゲットユーザー
- 30-40代の忙しいビジネスパーソン
- スケジュール管理を重視する方
- 効率的な健康管理を求める方
- データ分析による自己管理を好む方

### 差別化ポイント
- ユーザーの生活リズムに合わせたパーソナライズされた対策提案
- 最小限の操作で効率的に情報を記録・取得できるUI/UX
- 花粉症対策に関する総合的なソリューションの提供
- ビジネスシーンでの花粉症対策に特化したアドバイス

### 技術スタック（予定）
- フロントエンド: React, TypeScript
- バックエンド: Node.js, Express
- データベース: MongoDB
- API: 気象データAPI, 位置情報API
- デプロイ: AWS/Vercel

どうやら、アプリ名は「ポレンガード」。Webアプリを想定しているので、React, Typescriptといった構成となるようです。

タイミングでアプリ名や必要な機能、技術選定について人間によるレビューや修正が行われることになるでしょう。

README.mdから詳細な要件定義へ

Clineを使ってREADME.mdを作成したことで、アプリの主要機能が明確になりました。ここからは、それらの機能をより具体的な要件に落とし込んでいきます。以下が、その手順です。

1. README.mdの確認

   • Clineが生成したREADME.mdを読み、記載されている主要機能をリストアップします。

2. 機能ごとの詳細化

   • 各機能に対して、Clineに詳細な要件を尋ねます。
     例えば

     花粉飛散予報機能について、以下の詳細を教えてください：
     - 必要なデータソース
     - 更新頻度
     - 表示形式（地図、数値、グラフなど）
     - ユーザーの位置情報の扱い方
     

3. 技術的な実現可能性の確認

   • 提案された要件に対して、技術的な実現可能性をClineに確認します。

4. 優先順位付け

   • 各要件の重要度と実装の難易度を考慮し、優先順位を決めます。このアプリのコアとなる機能を見定めて、MVP（Minimum Viable Product）を決めます。
   • Clineに優先順位の提案を求め、人間が最終判断します。

5. 要件定義書の作成

   • 詳細化された要件をまとめた要件定義書の作成をClineに依頼します。
   • 生成された定義書を確認し、必要に応じて修正を指示します。

6. README.mdの更新

   • 詳細化された要件に基づいて、README.mdの更新をClineに依頼します。
   • これにより、プロジェクトの全体像と詳細な仕様が一箇所にまとまります。

この手順を踏むことで、AIの支援を受けながら効率的に詳細な要件定義を行うことができます。人間は大局的な判断や創造的な提案に集中し、細かい記述や整理はAIに任せるという役割分担が可能になります。

ドキュメント駆動開発の実践

Clineを活用した開発で特に効果的なのが「ドキュメント駆動開発」のアプローチです。README.mdを中心に据えることで、AIとの協業がスムーズになります。

ドキュメントを開発の中心に

開発の各段階でREADME.mdを更新していくことで、以下のメリットが生まれます：

• 共通理解の形成: 人間とAIが同じドキュメントを参照することで認識のズレを防ぐ
• 開発の指針: 実装すべき機能や制約が明確になり、AIの自律開発をサポート
• 進捗の可視化: ドキュメントの更新状況が開発の進捗を反映

実践手順

1. 初期ドキュメント作成

   • プロダクトコンセプトと主要機能をREADME.mdに記述
   • Clineに「このコンセプトに基づいたREADME.mdを作成して」と依頼（上の手順でClineに指示をしたのがこれにあたります）

2. 反復的な更新

   • 機能実装前に詳細仕様をドキュメントに追加
   • 実装後に実際の動作と差異があれば修正
   • 例：「花粉飛散予報機能の詳細仕様をREADME.mdに追加してください」

3. コードとドキュメントの連動

   • 新機能の実装時：「README.mdの○○機能に基づいて実装してください」
   • バグ修正時：「README.mdの仕様に合わせてコードを修正してください」

花粉症アプリでの具体例

花粉症アプリ開発では、以下のようにドキュメントを活用できます。

# ポレンガード：花粉症対策アプリ

## 機能一覧
1. リアルタイム花粉飛散予報
2. 症状記録と分析
3. 薬の服用管理

## 詳細仕様
### 1. リアルタイム花粉飛散予報
- 気象庁APIから花粉情報を取得（1時間ごと更新）
- ユーザー位置情報に基づく地域別表示
- 5段階の花粉量レベル表示と対策アドバイス
...

このドキュメントをClineと共有することで、「花粉飛散予報機能を実装して」と指示するだけで、AIが仕様を理解して適切なコードを生成できるようになります。

ドキュメント駆動開発は、AIとの協業において「何を作るか」を明確にし、「どう作るか」をAIに任せるという理想的な役割分担を実現する鍵となります。

Clinerulesの作成と技術選定

.clinerules は、Clineに対して「働くためのルールや規約」を指示するための設定ファイルです。ファイルをプロジェクト直下に配置することで、そのルールに従い作業をすすめてくれます。

以下のような指示をするとCline自身が.clinerulesファイルを作成してくれます。

README.md内容をもとに、プロジェクト直下に「.clinerules」ファイルを作成してください

Planを実行すると以下のような結果となります。

Actを実行すると、プロジェクトルートに以下の.clinerulesファイルが生成されます。

.clinerules

# ポレンガード - 花粉症対策アプリ用 Cline ルール

# プロジェクト概要
project:
  name: "ポレンガード"
  description: "忙しいビジネスパーソンのための花粉症対策アプリ"
  target_audience: "30-40代の忙しいビジネスパーソン"

# 主要機能
features:
  - name: "花粉飛散予報"
    description: "リアルタイムの花粉飛散情報と予測を提供"
    components:
      - "リアルタイム花粉飛散情報"
      - "地域別花粉飛散レベル表示"
      - "週間予報"
      - "外出予定に合わせたアラート"
  
  - name: "症状記録"
    description: "ユーザーの花粉症状を記録・分析"
    components:
      - "シンプルな症状記録インターフェース"
      - "症状推移グラフ"
      - "花粉飛散量と症状の相関分析"
      - "AIによる花粉症パターン学習"
  
  - name: "薬の服用管理"
    description: "花粉症薬の服用スケジュール管理"
    components:
      - "薬の登録・管理システム"
      - "服用リマインダー"
      - "薬の効果記録"
      - "服用履歴の医師共有機能"

# 技術スタック
tech_stack:
  frontend: "React, TypeScript"
  backend: "Node.js, Express"
  database: "MongoDB"
  apis: "気象データAPI, 位置情報API"
  deployment: "AWS/Vercel"

# 開発ガイドライン
development_guidelines:
  ui_design:
    - "シンプルで効率的な操作を重視"
    - "最小限の操作で最大限の効果を得られるインターフェース"
    - "ビジネスパーソンの生活リズムに合わせたUX"
    - "視覚的に明確な情報表示"
  
  coding_standards:
    - "TypeScriptの型安全性を最大限活用"
    - "コンポーネントベースの設計"
    - "レスポンシブデザイン対応"
    - "アクセシビリティ対応"
  
  performance:
    - "高速な読み込みと応答性を確保"
    - "オフライン対応機能"
    - "バッテリー消費の最適化"

# プロジェクト固有のルール
project_specific_rules:
  terminology:
    - "花粉症関連の専門用語は一貫性を持って使用"
    - "ユーザーにわかりやすい言葉で説明"
  
  data_privacy:
    - "ユーザーの健康データは適切に保護"
    - "位置情報の利用は必要最小限に"
    - "データ共有はユーザーの明示的な許可を得る"
  
  accessibility:
    - "色覚多様性に配慮したデザイン"
    - "スクリーンリーダー対応"
    - "様々な操作方法（タッチ、キーボード等）のサポート"

# AIアシスタント向け指示
ai_assistant_instructions:
  - "このプロジェクトでは、忙しいビジネスパーソンの効率的な花粉症対策をサポートすることを最優先する"
  - "UIコンポーネントは操作の簡便さを重視"
  - "データ分析と予測機能の実装を重視"
  - "ユーザーのプライバシーとデータセキュリティに関する考慮を常に行う"
  - "モバイルファーストの設計アプローチを採用"

技術選定詳細化

今回開発するWebアプリでは以下の技術を利用しようと思います。データベースを扱うと少々複雑になるため簡単のためにLocalStorageを使うことにします。README.mdの技術スタックの説明を以下のように修正します。

### 技術スタック
- フロントエンド；React, Typescript
- バックエンド；Nodejs, Express
- UIライブラリ：shadcn/ui React Router(v7)
- データベース：LocalStorage

shadcn/uiを利用し、以下のURLの記事を参考に実装すること
https://ui.shadcn.com/

React Router(v7)は、以下のURLの最近版をもとに実装すること
https://reactrouter.com/home

UIライブラリを使用する際は、使用するバージョンを指定し、そのバージョンに対応したドキュメントや実装例を参照するよう、Clineに指示することが重要です。これにより、一貫性のある効率的な開発が可能になり、予期せぬ問題や追加コストを回避できます。

この内容でREADME.mdを更新し、Clineに.clinerulesの修正を依頼します。

プロンプト

README.mdの技術スタックを更新しました。この内容をもとに.clinerulesを修正してください

プロンプトを実行すると.clinerulesに以下のような記述が追加・更新されます。

# 技術スタック
tech_stack:
  frontend: "React, TypeScript"
  backend: "Node.js, Express"
  ui_libraries: "shadcn/ui, React Router(v7)"
  database: "LocalStorage"

# 参照リソース
reference_resources:
  ui_libraries:
    - name: "shadcn/ui"
      url: "https://ui.shadcn.com/"
      notes: "コンポーネントライブラリとして利用"
    - name: "React Router(v7)"
      url: "https://reactrouter.com/home"
      notes: "最新版をもとに実装"

Clineによる自律開発の実践

それでは、準備が整ったので実際にClineに開発をしてもらいましょう！

Clineを活用した自律開発では、AIが主体となってコードを生成し、開発者はレビューと方向性の指示に集中できます。ここでは、選定した技術スタック（React, TypeScript, Node.js, Express, Shadcn/ui, React Router v7, LocalStorage）を使った花粉症対策アプリの開発プロセスを紹介します。

開発環境のセットアップ

まず、Clineに開発環境のセットアップを依頼します。

プロジェクトの初期セットアップをお願いします。

（前提となる情報はすでにREADME.mdと.clinerulesに記載済みなのでシンプルな指示で十分です。）

Plan実行

Planを実行すると以下のような結果となります。

プロジェクトの概要からプロジェクト構造まで細かく計画を立ててくれます。

さらに驚いたことに実装の順序までグラフィカルに表示し、非常にわかりやすい！

Act実行

以下のようにコマンド実行するか否か確認されるので、Run Commandを実行します。

Auto-approveを有効にすることで、コマンド実行なども自動化することが可能ですが、実装指示が曖昧な場合や利用ライブラリに関するインターネット上の情報が古い場合などに予期せぬ問題や想定以上のコストが発生する可能性があります。（私は気づかずにあっという間に数十ドル行きました。。。）

はじめのうちは全自動とはせず、確認しながら進めるのが良さそうです。

あとは、Clineからの質問にポチポチ答えていくとプロジェクトの生成がされます。

生成されたプロダクト

生成されたプロダクトは以下のような感じになりました。

もうしっかりとしたプロダクトの形になっていますね！
必要としていた主要機能も実装されているようです。
指示はしていないですが、地味にダークモード対応しているところもすごいです。。。

今回は、プロジェクトを生成してといった粒度の大きな指示を出したためREADME.mdに記載した主要な機能が一通り盛り込まれたプロジェクトができあがりました。

実は、途中何度もエラーを繰り返してなんとかUIが表示できるところまでこぎつけました。。

shadcn/uiを利用しているところで依存するtailwindのバージョンv4がインストールされてしまい永遠と以下のようなエラーが出るループにハマってしまいました。

[vite] Internal server error: [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

うまくプロジェクトを作成するコツとしては、機能を一度に作り込み過ぎず、優先順位付けをした上で優先順位の高い機能から順に構築していくのが良いでしょう。

開発効率化の考察

Clineを活用した花粉症対策アプリ開発を通じて見えた、AI協業開発の可能性と課題を考察します。

Clineとドキュメント駆動の相乗効果

README.mdを開発の中心に据えたことで、以下のメリットが生まれました。

• 仕様の可視化：ドキュメントが「設計図」となり、Clineが正確なコードを生成
• 変更管理の効率化：機能追加時はまずドキュメントを更新→Clineが自動追従
• 知識共有の簡素化：新規参画者がドキュメントを読むだけで開発全体を把握可能

README.mdや.clinerulesを常に更新し、このドキュメントを中心として開発をすることで、Clineが一貫性のあるコンポーネントを生成できるとともに、人にもAIにも優しい開発ができるようになります。

AIと人間の最適な役割分担

今回の開発で見えてきた理想的な分担：

人間が主導すべき領域

• アプリのコンセプト設計
• ユーザー体験の設計
• 技術スタックの選定
• 生成コードの「意図の確認」

Clineに任せられる領域

• 定型的なコンポーネント実装
• API連携のボイラープレート作成
• ドキュメントのフォーマット整備
• コーディング規約に沿ったリファクタリング

人間は「ユーザーが直感的に操作できるか」という観点でのみレビューに集中できた点が大きな進化だと感じました。一方で、AIによる実装では比較的簡単な実装でも回りくどく冗長なコードが生成されるケースもあるため、.clinerulesでのより詳細な指示や人間によるレビューなどもまだ必要な状況かと思いました。

まとめ

Clineを活用した花粉症対策アプリの開発を通じて、AIと人間の協業による開発プロセスを体験しました。README.mdや.clinerulesといったドキュメント中心アプローチにより人にもAIにも優しい開発が可能となります。
AIによるコーディングプロセスの支援を通じて、開発者はコンセプト設計やUX改善に注力可能となり、より創造的作業への集中できるようになります。

AIとの協業開発に興味を持たれた方、ぜひClineを使って小さなプロジェクトから始めてみてください！