はじめに✏️
こんにちは、機械学習エンジニアをしているRyuです。
先日Clineを使ったAI駆動開発をして、以下の個人サイトをなんと1時間程度で開発しました。
（OGP画像がないので設定せねば…）
以前は0からNext.js、Tailwindを学んで個人サイトの開発を行いましたが、AIを使って0から作り直してみたので、その流れと感じたことを書いていこうと思います！✏️
どうやってAI駆動開発をやるか🤔
AIを使って開発ができるツールやエディタは多々ありますが、今回はClineというVScodeの拡張機能を利用しました。
Cline以外にもAIが使えるツールはいくつもありますが、以下の3点を条件として探しました。
- VScodeの拡張機能として使える
- 日頃からVScodeをカスタマイズしており、AIが出してきたコードをいつもと同じ環境で修正したい
- 外部のAPIキーが使える
- AI駆動開発にはClaudeが優秀という声を同僚に聞いて試してみたかった
- コードを改修する際に本のコードとAIが作ったものを比較できる
- Reactの勉強中であるため、AIの出すコードを見て学びたい
AI駆動開発に必要な準備🕵️♂️
APIの取得🔑
APIキーがなくともClineを利用することはできますが、今回はClaudeを使いたいため、APIキーを取得します。
以下のURLからAPIのコンソールにアクセスします。
そうすると以下のようにメニューが表示されるため、「Get API keys」をクリック。後はクレジットカードの登録など、手順に従ってAPIキーを入手します。
Clineのインストール
まずはClineをVScodeのマーケットプレイスからインストールします。
VScodeで「Cline」と検索するか、以下のURLからインストールしてください。
Clineの初期設定👨💻
最後に、Clineの初期設定を行います。VSCode左のロボットアイコンをクリックするとClineの説明とともに、無料版を使うか、自前のAPIキーを使うかが問われます。
緑の無料版ボタンを押すと、Claude（Sonnet3.7）が$0.5分まで使えます（2025/3/17現在）。とりあえずどんなものか試してみたいという方は無料版で試してみると良いでしょう。
今回は自前のAPIキーを使うので「User your own API key」をクリックします。
そうするとAPI Providerという項目とAPIを入力する欄が表示されるので、API ProviderはAnthropicを選択肢、自前のAPIキーを入力します。
最後にLet's go!をクリックすると初期設定は完了です。
Clineの許可設定👌
本項目は絶対に必要というものではありませんが、設定しておくと便利なので簡単に紹介します。
チャット入力欄上のAuto-approveというボタンを押すと以下のようなメニューが出現します。
Clineはコードの生成やコマンドの実行、ブラウザへのアクセスなど幅広いアクセス能力を持っています。
そのため、デフォルト状態だとコマンドの実行やブラウザへのアクセス時にClineが許可を求めてきて、それを許可するとClineが実行するという流れになっています。
あらかじめAuto-approveを設定しておくことで、これらの面倒な許可を求められることがなく開発に専念させられるというオプションです。
ただし、Clineが悪意のあるコマンドをじっこうするなｄセキュリティリスクも0ではないため、注意して設定してください。
AI駆動開発してみる🚀
技術スタック
このあたりは自身の過去の経験から適当に選定しており、特に意図はありません。
- React.js
- Tailwind CSS
- Vite
- Netlify
最初のプロンプトを作る
Claudeは賢いのでしっかりプロンプトを練らずともそれなりに良いものをアウトプットしてくれます。
ただ、微修正のたびにお金が飛んでいくので、なるべく良いプロンプトを作るのが望ましいでしょう。
特に最初に入力するプロンプトが全体の方向性を左右するため、サイトの構成や盛り込みたい要素を記載すると容易と思います。
今回は以下のようなプロンプトを作ってみました。
# タスク
私は機械学習エンジニアの〇〇です。経歴や執筆した論文、発表スライド、ブログ記事を掲載するための個人サイトを開発してください。
その際、以下の「サイトの構成」に従ってください。
# サイトの構成
## Home
* プロフィール
* 名前：〇〇
* 職種：Machine Learning Engineer
* 経歴
* 〇〇社で〇〇に従事
* 学歴
* 〇〇大学 卒業
## Pubications
* 執筆した論文
* 受賞歴
## Slides
リストに格納されたスライドのデータをタイル形式で表示してください
## Blog
ブログ記事をMarkdownファイルで管理できるようにしてください。また、URLはMarkdownファイルのファイル名にしてください。例えばファイル名が`sample-blog.md`であれば、`http://localhost/sample-blog`となるようにしてください。
プロンプトエンジニアリングについて熱心に学んでいるわけではないので、最適なプロンプトではないかもしれませんが、このプロンプトで大枠のサイトを作ることができました。
サイトを微調整する
開発言語の知識がある程度あり、修正がかなり軽微の場合は自分で調整するのが良いと思います。
一方で、微調整するための知識がなかったり、修正範囲が広く大変な場合はClineに修正させるのが楽です。
例えば、スマホで開いた際に以下のようにヘッターが画面外に飛び出てしまう問題が発生しました。
こういったときはClineにチャットで修正内容を伝えるとすぐに修正してくれます。
1回目にチャットを送った際は上手く修正されなかったのですが、画像を添付してチャットを送ったところすぐに修正してくれました。
バグや修正箇所が明確な場合は画像を添付すると良さそうだなと思いました。
スマホで表示するとヘッター部分が見切れてしまっているので、スマホで開いた際にも画面内に収まるように修正してください。
また、変更が気に食わない場合はチャット履歴を遡り「Restore」というボタンを押すことでその時点での変更まで戻る事ができます。
この繰り返しを行うことで、簡単に個人サイトを開発することができました！
AI駆動開発をしてみて感じたこと🗒️
やはりある程度の開発知識は必要
LLMが作成したコードをそのままデプロイする場合は問題ありませんが、デザインや機能性など一部微調整した部分がある場合はやはりある程度の知識が必要だなと思いました。
例えば、ブログページについて以下のような指示をしましたが、これは僕が「react-markdownでMarkdownファイルをHTMLに変換できる」、「ファイル名で動的にルーティングできる」ということを知っていたからできた指示です。
ブログ記事をMarkdownファイルで管理できるようにしてください。
また、URLはMarkdownファイルのファイル名にしてください。
例えばファイル名がsample-blog.mdであれば、http://localhost/sample-blogとなるようにしてください。
実際に試してみましたが、上記の指示がないとReactにベタ書きで記事を書く前提の実装がされていました（実行タイミングによる）。
このように、ブログを書くときはMarkdownで管理できると楽という知識や、適切なURLの設定によるSEO向上という知識があるからこそ排除できた課題や実現できたことが多々ありました。
そのため、現段階においてはAI駆動開発をする際もある程度の開発知識や言語への理解が必要だと思っています。
もちろん要求が複雑でない場合には知識がなくとも実現できたり、各タスクに対するLLMのパフォーマンスにもかなり差があるため、まずは自分の実現したいことをLLMに投げてみると良いと思います。
デザイン力がないエンジニアでも良さそうなサイトが作れる
デザインに関する知識や経験がほとんどないため、前回個人サイトを作った際も、知り合いの個人サイトを参考に悪戦苦闘しながら開発しました。
フロントエンドの経験が少ないエンジニアの方は僕のようにデザインに対して苦手意識がある方も多いのではないでしょうか？
そんな方にAI駆動開発でサイトを作る経験はかなり向いているのかなと思いました。
参考になるサイトを見て微調整すると「思ってたのと違う」となってしまうことが多かったのですが、微調整した点をClineに送ると「いい感じ」に調整してくれるので、実現したい状態に対するある種の正解を提示してくれます。
もちろん長期的にはデザインを体系的に学ぶことで、より幅広いアクションがとれるとは思っていますが、デザインへの苦手意識をなくす一歩として非常に良い体験でした。
おわりに
初めてのAI駆動開発とても楽しかったです！今回は最初から有料のAPIキーを利用して開発を行いましたが、Clineインストール時にもらえる最初の無料クレジットを使ってもそれなりに開発ができるので、ぜひ試してみてはいかがでしょうか！
ここまで閲覧いただきありがとうございました！
モチベーションにつながるので、いいねやストックしていただけると嬉しいです！！