爆速API+フロントエンド開発！LaravelとReactのブログPFをCursorに作らせてみた
「AIにどこまで任せたら、ちゃんと動くWebアプリを短期間で作れるんだろう？」
ふと、そんな疑問が湧きました。そこで、AIコーディングツールCursorの実力を試すべく、バックエンドにLaravel、フロントエンドにReactを採用したブログプラットフォーム「inkly」の開発に挑戦。本記事では、その開発プロセスと驚きの結果を共有します。
はじめに
この記事は、AIを活用した開発に興味があるエンジニアの皆さんに向けて、Cursorを相棒にどこまで開発を効率化できるかを実験した記録です。
結果的にですが、こちらのサイトを12時間ほどで作成することができました🍖
https://inkly.jp/
今回、私が担当したのは以下の通り。
技術選定とコンテナのベース作成: プロジェクトの土台作り
サイトの概要設計: どんなものを作るかの方向づけ
動作確認と簡単なコードレビュー: 最終的なチェック
そして、Cursorには以下を全面的に任せてみました。
Laravel: APIに必要なモデル、マイグレーション、コントローラーの作成
React: APIを叩くためのコンポーネント、ページ、ルーティングの作成
いわば、私は「アーキテクト」で、Cursorが「バックエンド兼フロントエンド開発者」という役割分担です。
なぜブログプラットフォーム？
何かを作る、となったときにブログプラットフォームを選んだのは、ユーザー認証、記事のCRUD（作成、読み取り、更新、削除）、API通信など、モダンなWebアプリケーションの基本的な要素が詰まっているからです。Cursorの実力を測るには、ちょうど良い題材だと考えました。
プロジェクト名は「inkly」。インクで文字を綴るような、創作の場をイメージして名付けました。
開発プロセス：私とCursorの共同作業
- プロジェクトの骨格作り（私）
まず、開発の土台を整えました。
技術スタック:
バックエンド: Laravel (APIモード)
フロントエンド: React (Vite), TypeScript, Tailwind CSS
データベース: MySQL
インフラ:
Docker: 開発環境のコンテナ化
docker-compose.yml を作成し、Nginx、Laravel(PHP-FPM)、React、MySQLのコンテナが立ち上がる状態を準備しました。この段階では、まだ中身は空っぽです。
- Cursorへの指示出し（AI）
ここからが本番です。Cursorのチャット機能に、作りたいものの要件を伝えていきます。
私:
「Laravelでブログ用のAPIを作りたい。まずはUserとPostモデル、そして関連するマイグレーションファイルを作成して。」
Cursor:
（php artisan make:model コマンドの実行を提案し、モデルファイルとマイグレーションファイルを瞬時に生成）
私:
「次に、ブログ記事のCRUD操作を行うためのAPIコントローラーとルートを定義して。JSONを返すようにね。」
Cursor:
（PostController.php と routes/api.php に、index, store, show, update, destroy の各メソッドと対応するルートを生成）
バックエンドの準備が整ったところで、フロントエンドに着手します。
私:
「今作ったAPIを叩くReactアプリを作りたい。ViteとTypeScriptで。まずは記事一覧を取得して表示するコンポーネント PostList.tsx を作って。」
Cursor:
（axios を使ってLaravel APIのエンドポイントにリクエストを送り、取得したデータを表示するReactコンポーネントを生成）
この調子で、必要な機能を次々と指示していきました。
ユーザー認証(Laravel Sanctum)と連携するログインフォーム
記事投稿・編集フォームの作成
React Routerを使ったページ遷移
驚いたのは、バックエンド（Laravel）とフロントエンド（React）の役割分担を理解し、それぞれに最適なコードを的確に生成してくれた点です。
結果：ほとんどAI任せで動くものができた！
一連の指示を終え、簡単な動作確認と手直しを行った結果、わずか数時間でブログプラットフォームのプロトタイプが完成しました。
API: Laravelで構築したAPIが正常にレスポンスを返すことを確認
フロントエンド: ReactアプリがAPIと通信し、記事の投稿や表示ができることを確認
ユーザー認証: SPAの認証（Laravel Sanctum）も問題なく機能
もちろん、細かなUIの調整やバリデーション、エラーハンドリングなど、プロダクトとしてリリースするには追加の実装が必要です。しかし、「とりあえず動く」レベルのものを、ここまで少ない労力で作れたことには正直驚きました。
ちらっとコードレビュー（私）
生成されたコードを確認したところ、LaravelのコントローラーはRESTfulな設計原則に沿っており、Reactのコンポーネントも適切に分割されていました。人間が書いてもこうなるだろうな、という自然なコードで、メンテナンス性も悪くなさそうです。
まとめ：AIは優秀な相棒になり得る
今回の実験で、「何をしたいか」という明確な指示さえあれば、AIは強力なプログラマーとして機能することが分かりました。特に、APIの定型的な実装や、それを呼び出すフロントエンドの作成といった作業は、人間がやるよりも圧倒的に高速です。
開発者は、面倒な実装作業から解放され、よりアーキテクチャの設計やユーザー体験の向上といった、本質的な部分に集中できるようになります。
CursorのようなAIツールは、私たちの開発スタイルを大きく変える可能性を秘めています。まだ試したことがない方は、ぜひ使用してみて下さい！