AIエディター(Cursor)を使用し1日でアプリを作ってみる
はじめに
初めまして、ちびたかと申します！
最近流行りのAIエディターについて、ようやく使ってみようと思いました。
今回はCursorを使用して、1日でwebアプリケーションを作成してみました。
読者想定
- AIエディタに興味がある人
- Cursorを使ってみたいと思っている人
Cursorとは
CursorとはAI機能を搭載したコードエディタです。github copilotのようなものですね。
CursorはVSCodeのオープンソースをforkして作られたエディタのため、見た目は非常にVSCodeに近いです。
実際にどのようなものなのかをキャッチアップするのに上記のyoutubeを参考にしました。
わかりやすかったので共有しておきます。
プランについて
プランについて、2025年3月6日現在は以下のようです。（ビジネスプランについては割愛しています。）
実際に使う場合は自分でも調べてみてください。
| Hobby | Pro | |
|---|---|---|
| 料金 | 無料 | $20/月 |
| AI強化型エディタ | あり | あり |
| プレミアムモデル(低速) | 50回 | 無制限 |
| プレミアムモデル(高速) | 使用不可 | 500回/月 |
| 補完機能 | 2,000回 | 無制限 |
| プライバシー制御 | あり（30日間のデータ保管あり） | ○ あり（30日間のデータ保管あり） |
無料版は2週間Pro版をトライアルできるようです。
使ってみる
上記URLからエディターをインストールして実際に使ってみました。
今回はNext.jsとSpring bootを使用して、顔合わせ対策ができるアプリケーションを作ってみました。
プロジェクトの作成
やり方はいくつもあると思いますが、まずは自分でNext.jsとspring bootのプロジェクトを作っていきます。
プロジェクトの作成からCursorにやってもらうことも可能かと思います。
とりあえず私は、backend(spring boot)とfrontend(Next.js)のプロジェクトを作成しました。
要件を伝える
Chat機能を使って、開発を進めていきます。
ChatについてはCommand（WindowsはCtrl） + Shift + iで表示されると思います。
まずは要件から整理をしていきました。
すると以下のような回答が出てきます。（回答が長かったため途中でカットてます。）
実装してもらう
続いて実装をしてもらいます。
すると自動でプログラム上に実装を行なってくれます。
実際に書かれたソースコードを確認しAcceptすればOKです。
実装チェック
実際に画面を見てみると以下のようなものが作成されていました。
これらを繰り返し、変な箇所は修正を入れて進めていきます。
1日で作ったアプリ
実際に作成したサービスをサーバに上げてみました。
AWS無料枠で行なっているため停止するかもしれませんが、暇なときにぜひ使ってみてください。
現状はテストでデータを挿入しているので、問題や正確性の判断の精度については考慮していません。（これ使いたいみたいな声があったら頑張ります笑）
サービスとしては改善の余地が大いにありますが1日で作ったものとしては上出来なのかと思います。
感想
今回ほとんどソースコードを書かずにアプリを作りました。技術のキャッチアップというよりは話題のなサービスを使ってみたいという興味からの使用になります。
正直1日でここまでのアプリが作れるのかと感動と驚きでいっぱいです。
試作でプロダクトをスピーディーに作るという観点ではすごくいいと感じました。
一方で細かい設計や最後の詰めの部分はまだ自分でやる必要があると感じています。
また学習としては、AIエディタには依存しない方がいいと考えています。
生成AIの活用については議論がありますが、試行錯誤しながらAIとの共存について自分なりに考えていきたいと思います。
最後まで見ていただきありがとうございます。
Discussion