QAエンジニアがCursorでポートフォリオサイトを作ってみた
はじめに
ここ数ヶ月、AI駆動開発が盛り上がっていますね。Cline、Cursor、Windsurf、Devinなど、新しいツールも様々登場し、そのそれぞれが日夜アップデートされているようです。
自分はまだ業務でこのあたりの先端ツールに触れられておらず、いい加減キャッチアップせねば浦島太郎ということで、自分でCursorを契約して使ってみることにしました。
実装する題材としてはまずは簡単なものにしたく、以前作りかけて挫折したブログ＋ポートフォリオサイトとしました。その挫折の原因となったレスポンシブ対応も、AIの力を借りれば何とかなるんじゃないかという淡い期待もありました。
技術スタック・開発プロセス
作り方はAI駆動開発に慣れるという目的のもと、自分でコードを書かない縛り、いわゆるvibe codingをしました。
純粋にあまり開発に詳しくないのでAIに任せたほうがマシという判断もありますが、物は言いようです。「AIとの共創」とでも言っておきましょう。
作りはじめた際に、フロントエンドにはAstroを使うこと、ブログのバックエンドCMSにはMicroCMSを、ホスティングサービスにはCloudflare Pagesを使うことを指定しました。
Next.jsを使うアイデアもあったのですが、流石に今回のサイトには過剰な機能だと思ったため、静的サイトに強いAstroにしています。
最終的には以下の技術スタックになっています。カッコ内のコメントはClaude君が自分の気持ちを察して付与してくれました。
- フロントエンド
- フレームワーク: Astro（高速でSEOに強いらしい）
- スタイリング: Tailwind CSS（クラス名考えなくていいのが楽）
- バックエンド
- CMS: MicroCMS（APIベースで使いやすい日本製サービス）
- 開発環境
- IDE: Cursor（AIと会話しながらコードが書ける魔法のエディタ）
- AI支援: Claude 3.7 Sonnet / Claude 3.5 Sonnet（相談相手）
- プログラミング言語: TypeScript（型があると安心らしい）
- 実行環境: Node.js
- デプロイ
- ホスティング: Cloudflare Pages（無料枠が太っ腹）
はじめにAIに「Astro + MicroCMS + Tailwind CSSでブログ兼ポートフォリオサイトを作りたい」と伝え、大まかな設計と必要なファイル構成を提案してもらいました。
そこからは「ブログ一覧ページを作って」「記事詳細ページにタグ機能を追加して」といった具合で、機能単位でAIに指示を出しながら開発を進めました。
わからないことがあれば「どういう意味？」と聞き、エラーが出ればエラー文とともに「このエラーを直して」と頼むだけで、何度かのトライを経てほとんどの問題は解決しました。
成果物
このWebサイトです。コンテンツは順次公開する予定ですが、手始めにホームページとブログページを作成・公開しました。
デザインはまずホームページをざっくりClaudeに作ってもらったあと、v0に壁打ちしてブラッシュアップしてもらい、それをサイト全体に拡張して適用しています。
ブログは記事一覧・記事本体・タグ一覧から構成されています。また、便利な機能としてタグ検索とサイド目次（PCでのみ動作）を実装しました。これらも「こんな機能あるといいよね」とAIに言うだけで実装できてしまいました。
デザインやコンテンツがメインのポートフォリオサイトになるので参考程度ですが、作成時間はだいたい10数時間くらいです。機能面だけに絞れば数時間程度になると思います。自分で1から調べて書くより100光年くらい早かったと思います。
作ってみての感想
まず非開発エンジニアでもWebサイトを割と簡単に作れてしまうことに感動しました。
特にauto-runモードにするとこちらの許可を得ずに必要なファイルを生成、CLIを叩きながらビルド・デプロイまでやってくるのは驚きしかありません。AI驚き屋になっちゃう。
途中で「rm -rf」とか打ち出して冷や汗をダラダラかくことがありましたが、こちらの承認が開発を遅延させるのでauto-runを切る気にはなりませんでした。
また実装においても非開発エンジニアでは到底実現できないようなことがAIの助けによって実現できました。特に以前自力でサイトを作った際に挫折した最大の原因であるレスポンシブ対応は、AIの助力なしでは実現不可能だったと思います。「スマホ表示を最適化して」の一言で、複雑なtailwind CSSを生成してくれるのは本当に助かります。
このように一応動かせる状態に持っていくことなら誰でもできるように感じた一方で、その詳細を詰めたり、その実装の妥当性をレビューするにはまだ専門家の知識が要るように思います。
例えばこのポートフォリオサイトに使われているフロントエンド技術だけでもUI/UX、アクセシビリティなどの実装の妥当性は非専門家である自分にはさっぱり見当がつきません。AIの言いなりです。「この実装で大丈夫？」と聞いたら「はい、問題ありません」と言われれば「そうなんだ～」で終わりです。
その点考慮すると、仮にコーディングの主体をAIに渡したとしても、なおエンジニアはAIが書いたコードの責任を取るという役割でまだしばらくその座を保ち続けるのかなとも思います。少なくとも今のAIは「これで本当に大丈夫なの？」と突っ込まれると「うーん、やっぱりこうした方がいいかも」と主張が変わることも多く、信用なりません。
最終的にはAGIのような責任すら自分で取れますというAIが爆誕するのかもしれませんが、そうなったら多分自分はリストラされると思うのでAI驚き屋に転職しようと思います。「すげ～！」と言うだけで飯が食える時代が来るといいな。
まとめ
開発経験が乏しくても「こんなの作りたい」という気持ちがあればそれなりのものが作れてしまう時代になったというのは嬉しくもあり怖くもありますが、モノづくりはなんだかんだ楽しいですね。
実務でもユニットテスト書くとか小さいバグのPR出すくらいは職責として求められるようになってくるんだと思います。
そうなる前にAIエディタで遊んで感覚掴んどきましょ。というわけで、今日はここまで。