はずでした…
　　　
こんにちはYOUTRUSTのアプリエンジニアの優依那(YOUTRUST / X)です。

最近話題のAI搭載エディタ、Cursor。ちょうどTech Blog月間だし2時間で実装すると先にテーマを宣言してやってみましたが、慣れないエディタやAIを使ってたった2時間で実装するのは、とてもじゃないけど無理でした。

ですが、断言します。

使ってみる価値は大いにありです。(今のところ説得力はなし)

この記事で伝えたいこと

⭐️CursorのComposer がやばい
⭐️Cursorを使用する際のメリットデメリット
⭐️CursorとCopilotの違い

はじめに

▼わたしの技術レベル

エンジニアになって6ヶ月
スマホアプリの開発経験あり⚪︎
Webフロントの開発経験なし×
Webアプリがどう動くかざっくりは理解してるつもり△

▼やりたいこと

わたしが開発したネイティブアプリを元にWebアプリを実装していきます！
お気に入りのコスメを記録するアプリです。

では実際にCursorを使っていきたいと思います！

ここからは

〜自分でコードを一行も書かずどこまで行けるのか〜

というコンセプトのもと実装を進めていきます。

ディレクトリは以下のようにして、bescos-log-nativeを元にbescos-log-webに実装していきます。

bescos-log
- bescos-log-native
- bescos-log-web

環境構築

ここで１つ目の衝撃。
Cursorが必要なファイルやパッケージを選び、ターミナルでコマンドを入力してどんどん進めてくれます。コマンドの出力に表示されたエラーも検知して修正を提案、そして実行。今まで散々頭を悩ませていた、エラーで詰まって環境構築すらままならないということがない…だと?…

まあ一旦落ちつこう。本題はここからです。

ロゴのpngデータを表示させる

プロンプトはこちら。

bescos-log-nativeを元にWebアプリを実装してください。
まずlogo.pngを表示させてください

この時まだbescos-log-webのファイル内は空っぽです。エディタの動きや実装スピードをご覧ください。

ボタンをぽちぽち押してるだけで出来上がってしまいました(°_°)…エ?

商品データを表示する

次に、これだけでは味気ないのでデータベースに登録しているわたしの商品データを表示してみたいと思います。

バックエンドはFirebaseです。
ユーザーIDが下記のユーザーが登録した商品を表示させたいです。
×××××-×××××-××××××
Firebaseの情報はbescos-log-nativeのディレクトリから探してください

そしてまたボタンをぽちぽちしていきます。

衝撃です。

味を占めたわたしはまるで天才エンジニアにでもなったかのような気分で下のプロンプトを打っていました。

アイテムをタップした時にその商品の詳細画面を表示してください

驚愕です。
わたしが努力して作ったネイティブの商品詳細ページより100倍洗練された作品をこいつはものの30秒弱でつくりやがった… しかもご丁寧に戻るボタンまで用意してくれている泣。アイテムをタップした時、わたしの心は踊った。と同時に、泣いていました。

Cursorをつかってみて

Composer がやばい

ChatモードとComposerモードがあり、特にComposerモードは指示を出すと動画のようにAIがコードを生成し、ファイル作成もやってくれます。手を動かすのはAIで、開発者はコードの確認のみに注力できるので指示・確認だけでどんどん実装が進んできます。Copilotではサジェストやチャット機能でコードを提示してくれますが、Cursorの魅力はプロジェクトの背景を理解してコードを提示してくれるところです。特にわたしは詰まりがちなエラーの対応時にとても助かっています。

設定をこのようにしておくとターミナルでの結果をAIが検知し、自動で修正案を提示してくれるので爆速で実装できます。

Cursorを使用する際のメリットデメリット

⭐️メリット

VSCodeをもとに作られているため、多くのエンジニアの方が取り入れやすい
プロジェクトの背景を理解してコードを提示してくれる
開発者が指示・調整・コードの確認のみに注力できるので爆速で実装できる

※今回はComposerを活用して自分ではコードを書きませんでしたが、コーディングもカーソル予測や複数行補完の機能があり、便利で伝えられないくらい魅力がたくさんあります！

🤖デメリット

指示が曖昧だとAIが意図を誤解して不要なファイルを作成してしまったり、期待する動作にならないコードを出力する場合があります。指示の明確化と結果の慎重な確認が重要です。
なかなかのお値段
月々の利用料金は以下の通りで、さらに高速リクエストと低速リクエストがありPro・Businessプランのみ使用可能ですが、どちらも500回を超えると課金が必要になります。

プラン	金額
Hobby	無料
Pro	＄20
Business	＄40

詳しくはこちら

今回の実装でかかった時間とリクエスト数

⏰実装時間　6時間くらい…
⚡️リクエスト数　100件前後

無駄を削りまくって書いていますが実際はめちゃくちゃ大変でした… わたしは普段Android Studioを使用しているのでVSCodeを使ったことがなく、操作に慣れるのにも時間がかかりました。
また、指定のファイルがうまくインストールできなかったり、
不要なファイルを生成しまくってディレクトリがめちゃくちゃになったり、しまいには大事なファイルを誤って消してしまい、ふつうに泣きました。完全に自分の力不足です。でもある程度VSCodeを触ったことがある方やWebの知識がある方なら2時間でも実装可能かなと思います。

気づき

わたしのような経験の浅いエンジニアはAIをあまり頻繁に使わないほうがいいと思っていました。
しかし、コードの意図や設計の背景など、プロジェクト全体を理解する手助けになっており効率的に学習を進められる強力なサポートツールになっています。一方で複雑な要求をしようと思うとうまく伝えるのが難しかったり、自分でコードを書いた方が早いと思うことが多々ありました。
今回は実装の速さを分かりやすく解説するために設けたテーマですが、あくまでコードや設計が適切かを判断し責任を持つのは開発者側です。今後はCursorをうまく活用しながら勉強に取り組んでいけたらと思います。