はじめに
Cline+OpenAIのAPIを使って、ポートフォリオを作成してみました。
ポートフォリオのリンクは以下になります。
https://shibainuu.netlify.app/
きっかけ
2025年に入りAIエージェントのさらなる盛り上がりを感じていました。そこで、現時点でAIエージェントを使うことでどこまでエンジニアの開発業務を効率化できるのかということを調査するため、「Cline + OpenAI API」でポートフォリオの作成を行うことにしました。
プロンプトをClineに投げてみる
ということで、以下のプロンプトをClineに投げてみました。
今回は、gpt-4o, gpt-4o-mini, gpt-4.5-previewという3つのモデルを実験的に使用しました。
React で以下の要件を満たす個人サイトを作成してください。
①ナビゲーションメニューを作成してください。
仕様
- 画面上部に「HOME, ABOUT, RESUME, WORKS, OTHERS」というメニューを配置
- 各メニューをクリックすると、対応するセクションにスムーズにスクロールする
各セクションの内容
- HOME: 以下のHomeの内容が表示してください。
- ABOUT:以下のAboutの内容が表示してください。
- RESUME:以下のExperienceとTech stackの内容を表示してください。
- OHTERS:以下のCertificationとlanguagesの内容を表示してください。
②内容
Home
- I am Shibainuu🐕
About
- 26卒エンジニアの shibainuu です。現在、スタートアップで Web エンジニアの長期インターンをしています。
Experience
- 株式会社??
- 2023年12月〜現在
- 主要機能の開発、パフォーマンス改善業務、新規ライブラリの導入に従事
Tech Stack
以下の技術とその習熟度（％）をドーナツグラフで視覚化してください。各技術のについてドーナツグラフを作成してください。各ドーナツグラフの中央には対応する技術名を表示してください。
- Java：80%
- Spring Boot：80%
- JavaScript：70%
- React：70%
- jQuery：70%
- Python：80%
- Git：80%
- HTML/CSS：70%
Certifications
- IELTS 7.5
Languages
- 日本語
- 英語（ビジネスレベル）
②デザイン
モダンなデザイン
レスポンシブデザイン
③技術スタック
TypeScript
Clineによるコード生成の開始
まず、Clineがターミナルでのコマンド操作を行います。
具体的には、Clineが自動で1つ目のコマンドを生成してくれるので、コマンドの実行許可を出すだけでプロジェクトのセットアップを勝手に行ってくれます。そして、プロジェクトに必要なライブラリを推測し2つ目のコマンドを生成してくれるので、実行許可を出すだけで必要なライブラリのインストールも行ってくれます。
以上でプロジェクトの設定が完了すると、srcディレクトリ下に新しいファイルを作成し、ナビゲーションメニューやHome, Aboutなど各コンポーネントの内容を自動でプログラミングしてくれます。
そして、最後に以下のコマンドを実行してもらうことで、ローカルでReactのアプリケーションが立ち上がります。
成果物
1回目の生成で、グラフを使った複雑なデザイン部分はアニメーションや配置がおかしい箇所がありましたが、それ以外については高い精度で実装してくれました。今一番性能の良いClaude-3.7-sonnetを使うと、この辺も完璧にやってくれるのか？という疑問はまたの機会に。
そして、「グラフの配置を〜のように修正して」、「この画像のデザインに近づけて」のような指示を出して、諸々修正を加えて（一部手動で修正を行った）完成したものが以下になります。
https://shibainuu.netlify.app/
※レスポンシブデザインには対応しきれておらず、スマホでは一部うまく表示されません。
すごいと感じた部分
- コマンドを自動で生成し、実行してくれる
- 自動でプロジェクトのセットアップを行ってくれる
- 簡単なサイトなら文章を記述してポチポチするだけで、勝手にプログラミングして作ってくれる
ただ、性能の良いモデルを使うとすぐに10ドル、20ドルぐらいは超えてしまいそうです。
現時点での感想
ChatGPTでは、文章による指示とともに、コピペしたコード断片やファイルを与えることが多いと思います。そのため、ChatGPTに与えることのできるコンテキストは限定的になります。そこで、これまではGitHub to Plain Text Converterなどを使って、プロジェクト全体を一つのファイルにまとめてからChatGPTに与えることで、より多くのコンテキストを与え、精度の高い回答を得るような工夫をしてきました。
一方で、ClineはVSCode上で動作しプロジェクト全体を把握します。
『Clineに全部賭ける前に 〜Clineの動作原理を深掘り〜』という記事で、
Clineはユーザーの代わりにコンテキスト情報の追加やツールの使用を行ったり、適切な指示をAIアシスタントから引き出せるようにプロンプトを追加したりなどの処理を行っています。
プロジェクト全体の理解：ファイル構造からコードの意図まで、プロジェクト全体を文脈として捉えられる設計
とあるように、エンジニアがAIからより良い性能を引き出すために行ってきた工夫の一部をClineが行ってくれるという点で、エンジニアの開発効率の向上に繋がると感じました。今後もいろいろ試していきたいと思います。
toDo
- Clineの内部構造の理解（システムプロンプト）
- ClineのforkのRooCodeを試す
- Clineを使ってフルスタックな開発を行う
- Clineを使ってAIから良い性能を引き出すために色々試す