Cursorの新機能Composerを使ってチャットアプリを4時間で作ってみた

こんにちは、AIコーディングアシスタントIDEの「Cursor」がより便利になっているのを知っていたのですが、やっと触ってみる機会ができたので記事にしました。

Cursorとは

Cursorは、AIを使ったコーディングアシスタントツールです。コードの自動生成や補完、リファクタリングなどをサポートします。最近追加された「Composer」機能により、複数ファイルの同時編集が可能になりました。

作ったアプリ

Cursorを試すため、Zoomでの人狼ゲームで使える、人狼同士のチャットツールを開発することにしました。規模も適度で、Cursorの機能を試すのにちょうどよいと考えました。

使用技術

このアプリケーションの開発には、以下の技術スタックを使用しました：

• フロントエンド:  React, TypeScript, Tailwind CSS, Zustand（状態管理）
• バックエンド:   Firebase (Firestore, Authentication)
• ホスティング:  Firebase Hosting

開発プロセス

開発は以下の流れで進めました。

1. Cursorの設定：最新版をインストールし、Composer機能を有効化。
2. アイデアのブレインストーミング：memo.mdファイルにアイデアを記録。
3. 要件定義書の作成：Cursorに自動生成を依頼。
4. 画面仕様書の作成：Cursorが画面遷移書ファイルを自動生成。編集とレビューを実施。
5. 開発環境の構築：ターミナルで手動実行。
6. コーディング：Cursorの指示に従いながら実装。
7. デザインの改善：Claude AIを使用してデザイン案を取得。
8. 最終調整：デザインの反映とコード修正。

完成したアプリ

チャット画面

ログイン画面

Cursorの機能と利点

Cursorには、開発効率を大きく向上させる機能がいくつか備わっています。

1. 複数ファイルの同時編集

Cursorの「Composer」機能により、プロジェクト全体を俯瞰しながら開発することが可能になりました。これは特に、複数のファイルに跨る変更を行う際に威力を発揮します。例えば、新しい機能を追加する際に、モデル、ビュー、コントローラーを同時に編集できるので、一貫性のある実装がしやすくなります。

2. ファイルの自動作成

プロジェクトの構造を考える際、いちいちファイルを作成し、適切な名前を付けるのは意外と手間がかかるものです。Cursorはこの作業を自動化してくれます。プロジェクトの要件に基づいて、必要なファイルを自動的に作成し、適切な名前を付けてくれるので、開発の初期段階でのセットアップが格段に速くなります。

3. コードの自動生成

要件に基づいたコードの自動生成は、Cursorの中核的な機能の一つです。基本的な機能やボイラープレートコードだけでなく、より複雑なロジックも提案してくれます。完璧ではありませんが、開発の出発点として非常に有用で、エンジニアはそこから微調整や拡張を行うことができます。

使用時の注意点

Cursorは強力なツールですが、使用する際はいくつか注意すべき点があります。

1. バージョン管理の重要性

Cursorの「Composer」機能は、時として大規模で破壊的な変更を行うことがあります。Ctrl + Z で戻れなくなることもありました。そのため、こまめなバージョン管理が非常に重要です。Git等のバージョン管理システムを使用し、定期的にコミットすることで、万が一の際にも安全に前の状態に戻すことができます。

2. コード理解の必要性

Cursorが生成したコードが挙動がおかしくても、原因がわからないまま指示すると余計にコードが壊れます。そのためコードの内容を理解することは不可欠です。自動生成されたコードをそのまま使用するのではなく、必ず内容を確認し、必要に応じて修正や最適化を行いましょう。

3. AIの提案の確認

AIの提案は非常に有用ですが、時として意図しない結果を生むこともあります。そのため、Cursorの提案を鵜呑みにせず、常に批判的に評価する姿勢が大切です。特に、セキュリティに関わる部分や、ビジネスロジックの核心部分については、慎重に確認する必要があります。

現実的な評価

Cursorの機能は確かに impressive でした。特に開発の初期段階や基本的な機能の実装では、驚くほど効率的でした。しかし、アプリの仕様やデザインが複雑になるにつれて、Cursorだけでは十分に対応できない場面も出てきました。
すべてをCursorに任せるには、まだ課題がありそうです。特に大規模なチーム開発や複雑なシステムの構築においては、人間のエンジニアの介入が必要不可欠です。
とはいえ、要所要所でCursorを活用すれば、開発効率は大きく向上しそうです。

まとめ

Cursorは確かに進化しており、開発プロセスに新しい可能性をもたらしています。4時間でアプリがこのクオリティで作れたことは、数年前には考えられませんでした。
ただし、これはあくまでツールであり、エンジニアの知識や経験の重要性は変わりません。むしろ、これらのツールを効果的に使いこなすためにも、より深い技術理解が求められるでしょう。
皆さんも、ぜひCursorの最新版を試してみてください。新しい発見があるはずです。私たちの会社でも、常に最新の技術トレンドをキャッチアップし、効率的で創造的な開発に挑戦しています。興味のある方は、ぜひ会社情報をチェックしてみてください。