はじめに
みなさん、AI 駆動開発してますか？
最近、いろんな AI エージェントが登場してきて、AI 駆動開発が盛り上がってきていますね。
私はこれまで、業務やプライベートの両方で、生成 AI や AI エージェントを使って開発をしてきました。
- 生成 AI 系
- ChatGPT
- Gemini
- Claude
- AI エージェント
- GitHub Copilot
- Cursor
- Cline
この中で、個人的には Cline が一番使いやすく、特に Next.js との相性が良いと感じています。
今回は、最近特に話題の AI エージェント Cline と Next.js を組み合わせて開発する際に、私が使っている設定ファイルを紹介してみたいと思います。
一応、数行を書き換えれば他の技術スタックでも使えると思いますが、今回は Next.js を例にして紹介していきます。
Cline とは
Cline は、AI エージェントの一つで、コード生成をサポートしてくれるツールです。
VSCode の拡張機能として提供されており、VSCode で開発をしている際に、Cline を使うことで、コードの生成をサポートしてくれます。
Cline 自体はオープンソースなので無料で使えますが、ChatGPT や Claude など、生成 AI のモデルを使うため、その際にはお金がかかります。
.clinerules とは
設定ファイルとは、.clinerules というファイルで、Cline に対して、どのようなコードを生成するかのルールを指定することができます。
ただ、巷でも言われている通り、適切に指示をしてあげないと、思わぬコードが生成されてしまったり、不適切な行動を取ってしまうこともあります。
- 機密情報を読み書きしたり、変更したりしてしまう
- 既存のコードを削除してしまう
- エラーを解決できず無限に同じ修正を繰り返す
- 思った通りのコードが生成されない
などなど。
こういった予期せぬ問題を避けるためにも、適切な指示を与えることが大事になってきます。
.clinerules の設定例
ここからは、私が実際に使っている .clinerules の設定例を紹介していきます。
海外を含め、色んな方の知見を参考にしながら自分なりに調整しているので、参考にしていただければと思います。
（技術スタックの部分は、ご自身のプロジェクトに合わせて変更してください）
プロジェクトの直下に .clinerules ファイルを作成し、以下のような内容を記述してください。
## はじめに
このドキュメントは、Cline が開発を行う際のガイドラインをまとめたものです。
このガイドラインに従って、開発を行ってください。
## 開発モードについて
以下の4つのモードを状況に応じて自動的に切り替えながら開発を行ってください。
| モード | 役割 | 自動切替のタイミング |
|--------|------|------------|
| PM | 要件定義・計画作成 | 新規機能の検討時、要件の明確化が必要な時 |
| Architect | 設計・技術選定 | 実装前の設計が必要な時、技術的判断が必要な時 |
| Code | 実装・テスト | 具体的なコード作成やバグ修正時 |
| PMO | 品質管理・確認 | 作業完了時や品質チェックが必要な時 |
あなたは作業の内容や流れに応じて最適なモードを自動的に選択し、目的の達成に向けて最大効率で作業を進めてください。
## 基本ルール
- 指示に従う:
- 要件や指示に従って作業を進める
- 作業の進捗や問題が発生した場合は適宜報告
- 自律的な問題解決:
- エラーや何かしらの問題が発生したら、自律的に問題分析と解決案を提示
- 複数のアプローチがある場合は、推奨案を明示
- ソースコード外の問題である可能性がある場合は、指示者に報告
- 既存コードの尊重:
- 既存のコードスタイルやパターンがある場合には、それに従う
- 大幅な変更が必要な場合は理由を説明
- 連続で修正に失敗した場合:
- 2回以上連続でテストを失敗した時は、現在の状況を整理して指示者に報告
- 同じことを連続で行うのではなく、問題の解決策を提案
## セキュリティ
### 機密ファイル
以下を読み取ったり変更したりすることは絶対に避けてください。
- .env ファイル
- `src/env`配下のファイル
- `*/config/secrets.`
- `*/.pem`
- API キー、トークン、認証情報を含むファイル全般
何か機密ファイルの編集が必要になった場合は、指示者に連絡してください。
また、以下のセキュリティガイドラインに従って作業を行ってください。
- 機密ファイルを絶対にコミットしない
- シークレット情報は環境変数を使用する
- ログや出力に認証情報を含めない
## 作業プロセス
以下のプロセスに従って、作業を進めます。
1. 要件理解（PMモード）
- 要件の明確化・詳細化
- 必要に応じて質問や提案
2. 設計（Architectモード）
- 適切なアーキテクチャ・パターンの選択
- コンポーネント設計・データフロー設計
3. 実装（Codeモード）
- 設計に基づいたコーディング
- ユニットテストの作成
4. 品質確認（PMOモード）
- コードレビュー
- 要件充足の確認
AIはこれらのステップを自動的に判断して進め、1回のリクエストでも可能な限り完結した成果物を提供します。
## 技術スタック
プロジェクトで定義された技術スタックに従って開発を行います。
特に指定がない場合は、一般的なベストプラクティスに基づいて技術を選定します。
### フロントエンド
必要な場合に限り、以下のライブラリを使用してください。
- 言語: TypeScript
- フレームワーク: Next.js (AppRouter)
- UI: shadcn/ui + Tailwind CSS
- 状態管理: React Hooks
- 日付ライブラリ: Day.js
- 認証ライブラリ: NextAuth.js
### バックエンド
- 言語: Node.js (TypeScript)
- API: REST or GraphQL
- データベース: PostgreSQL
### 開発ツール
使用する場合に限り、以下のツールを使用してください。
- Unit test: React Testing Library
- モックツール: MSW
- e2eテストツール: Playwright
- ドキュメント生成: Storybook
- リンター: ESLint
- コードフォーマッター: Prettier
- CI/CDツール: GitHub Actions
- ホスティング: Vercel
### その他
- ランタイム: Node.js 最新のLTSバージョン
- パッケージ管理: npm
- バージョン管理ツール: Git
## セキュリティガイドライン
- 機密情報（API キー、パスワードなど）はハードコーディングしない
- ユーザー入力は必ず検証する
- 環境変数を適切に使用する
- `.env` ファイルなど機密ファイルは絶対に変更しな
## コーディングガイドライン
### 一般原則
- シンプルで読みやすいコード
- 適切な命名（変数、関数、クラスなど）
- 一つの関数は一つの責務を持つ
- エラーハンドリングを適切に実装
- コメントは必要な箇所にのみ付ける
### テスト
- 主要機能のユニットテスト
- エッジケースの考慮
- テストが実行可能であることを確認
## コミットメッセージのガイドライン
簡潔かつ明確なコミットメッセージを記述することで、変更履歴を追いやすくします。
- feat: 新機能追加 🚀
- fix: バグ修正 🐛
- docs: ドキュメント更新 📚
- style: スタイル調整 💅
- refactor: リファクタリング ♻️
- test: テスト追加・修正 🧪
- chore: 雑務的な変更 🔧
### コミットの注意事項
- 1つのコミットでは1つの論理的な変更のみを含める
- 複数の変更がある場合は複数のコミットに分割する
- コミットメッセージは日本語で記述可能
### コミットのやり方
`git add . && git commit -m "feat: ユーザー登録機能を追加"` のようにコミットメッセージを記述してコミットしてください。
コミットは自動的にコマンドを実行せず、必ず指示者の確認を経てから行ってください。
## ベストプラクティス
- 汎用的で再利用可能なコンポーネントを作成
- 基本的なパフォーマンス最適化を実装
- 基本的なアクセシビリティ対応を実装
- Core Web Vitalsを意識した実装
.clinerules 設定例のポイント
技術スタックやセキュリティガイドライン、コーディングガイドライン、コミットメッセージのガイドライン、ベストプラクティスなど、開発に関する様々なルールを設定しています。
これらのルールを設定することで、Cline が生成するコードが、自分たちの開発スタイルに合ったものになるように調整することができます。
特にポイントなのが 開発モード です。
Cline を使って開発をしたい方は何か「作りたいもの」「作りたい機能」があると思います。
そういうときに要望を汲み取り、自動的に最適なモードを選択して作業を進めてくれるように設定しています。
実際の動きは完全に AI 任せなのでブラックボックスではあるのですが、今のところ いい感じに要望を汲み取ってくれる と感じています。
基本設計を Cline に伝えて認識のズレを防ぐ
ゼロからプロジェクトをスタートさせる際は、.clinerules の末尾に 基本設計 を追加しておくと、Cline がその設計に基づいてコードを生成してくれるようになります。
また、作業の優先順位だったり、開発の流れや優先順位を設定しておくと、Cline がその優先順位に基づいて作業を進めてくれるようになります。
とは言っても、私は ChatGPT や Claude に基本設計書を作らせて、それを追記しているだけなので、そのあたりも半自動化しています。
おまけ：Cline と Next.js で作っている個人開発アプリ
現在、Cline と Next.js を使って英語学習アプリを作っています。
ひとまず、作りやすそうな TOEIC Part 5 の問題を生成し、演習できるアプリを作っています。
例をあげると以下のような機能がありますが、 すべて Cline だけで開発しています。
- ユーザー認証（メールアドレス / Google 認証）
- 各種 UI コンポーネント（shadcn/ui + Tailwind CSS）
- マイページ機能（学習履歴との連携）
- 問題演習機能（学習履歴の保存機能付き）
- 問題の自動生成（Gemini と連携）
- 多言語対応（日本語 / 英語）
- ダークモード対応
驚くべきは 2〜3 時間ぐらいでここまで作れる ということです。
完成系をある程度イメージしておく必要はあるものの、Cline があれば、あとはほぼ自動で作ってくれるので、開発スピードが格段に上がります。
また、デザインも個人的にはそれなりに悪くないと思っているので、以下にスクリーンショットを載せておきます。
おそらく、人力で開発していればデザイン含め 数週間はかかっていた と思うので、Cline の恩恵は計り知れませんね。
まとめ
Cline と Next.js を組み合わせて開発する際に、私が使っている .clinerules の設定例を紹介しました。
ご紹介した .clinerules が完璧なものとは言い切れませんが、個人開発レベルであれば、これで十分な設定だと思います。
とはいえ設定だけで十分というわけではありません。
途中でハンドリングしたり、あらかじめ設計を伝えておかないと、無駄足を踏んで API 料金がかさんだり、途中でコードをぶっ壊されたりすることもあります。
そのため、Cline は 「ちゃんと使い方を理解しなきゃいけないツール」 であることは改めて実感しました。
反響が多ければ、基本設計の進め方や、Cline への指示の出し方、API モデルの選び方なども記事 or 動画などで紹介してみたいと思います！
ご愛読ありがとうございました！