Cursorを使ったWEBアプリ開発(前編)

こんにちは、システム2部のRyanです。

先日、LinuC Open Community様主催の生成AI感動体験ワークショップにオンライン参加してきました。
そこでは、主にCursorを使った「AI駆動開発」にフォーカスし、「To-Doリスト」の作成を行いました。

「AI駆動開発(AI-Driven Development)」とは開発プロセスの各フェーズにおいて、生成AIを導入し、コンピュータが持つ処理能力と人間が持つ独創性の両者をかけ合わせて、効率性と創造性を相互に補完しながら推し進める開発アプローチを指します。

今回のワークショップで体験したことを活かし、今回は自動で割り勘を実行してくれるWEBアプリを作成してみました。
数名の友人と出かけた際、色々な人が代表になって支払った時、その計算は面倒ですよね。

そんな時に「誰が」、「どこで」、「何に」、「いくら」支払ったかを入力すれば、誰が誰に対していくら支払えば精算できるのかを割り出せるツールがあったら便利だなという思いから、開発対象として選択しました。

では、さっそく始めましょう。

まずはCursorのセットアップです。

下記の公開サイトからダウンロードし、インストールとアカウントでのログインを済ませておきます。
※メールアドレスでのログイン以外にも、GitHub, Google, Appleの各アカウントでのログインも可能
※具体的なセットアップ手順については今回割愛

セットアップ完了後、アプリを起動すると下記の画面が表示されるます。

任意の場所にプロジェクトフォルダを新規作成後、”Open project”でそのフォルダを指定します。

プロジェクト起動後の画面は下記のようになっています。

左側には今回のプロジェクトのファイル構造が確認できる一覧メニュー、中央にはコーディング画面、右側にはAIとの対話が行えるチャット画面が用意されています。（表示はカスタマイズ可能）

人間が書いたコードに対してAIによるブラッシュアップや機能追加を行うこともできますが、今回は最初からAIに指示を出して、アプリの作成を進めていきます。

AIチャット画面から下記のようなプロンプトを与えてみます。

割り勘の金額を自動計算してくれるアプリを作ります。
最大10人までで、参加者のうちの誰か1人が各店舗で代表で支払った場合でも、最終的に誰が誰に対していくら支払うべきかを自動計算できることを想定しています。
使い方は下記の通りです。

1.日付、プロジェクト名（イベント名・会の名前など）を入力
2.割り勘への参加者の氏名（もしくはハンドルネーム）を入力し、参加者リストを作成
3.「誰が」、「どこで（店名）」、「何に（アイテム名）」、「いくら（金額）」をすべて入力
なお、「誰が」の項目については、先に作成した参加者リストに紐づきます。
4. 最後に計算開始ボタンを入力すれば、結果が出力されます。

それに対して返ってきたレスポンスは下記のとおりです。

素晴らしいアイデアですね！  
要件を整理すると、以下のような割り勘アプリを作成したいということですね。

---

### 要件まとめ

1. **プロジェクト作成**
   - 日付
   - プロジェクト名（イベント名・会の名前）

2. **参加者リスト作成**
   - 氏名またはハンドルネーム（最大10人）

3. **支払い記録の入力**
   - 誰が（参加者リストから選択）
   - どこで（店名）
   - 何に（アイテム名）
   - いくら（金額）

4. **自動計算**
   - 「計算開始」ボタンで、誰が誰にいくら支払うべきかを自動計算して表示

---

要件については現状認識に齟齬がない為、このままいきます。

### 実装イメージ

- Webアプリ（React + TypeScript + Node.js/Express など）  
  もしくは  
- デスクトップアプリ（Python + Tkinter など）

どちらの形式をご希望ですか？  
（例：WebアプリならスマホやPCのブラウザで使える、デスクトップアプリならインストールして使う）

また、データの保存方法（ファイル保存、DB、セッションのみなど）にご希望はありますか？

ご希望を教えていただければ、設計・実装を進めていきます！

実装イメージは「Webアプリ」、データ保存方法は「セッションのみ」としました。

### 次のステップ

1. プロジェクトの初期セットアップ（React + TypeScript）
2. 必要な画面・コンポーネントの設計
3. 実装

まずはReactプロジェクトのセットアップを行います。  
セットアップ後、画面設計・実装に進みます。

セットアップを開始してよろしいですか？

上記を承認することでチャット内でターミナルエミュレータが起動し、ReactやTypeScriptといった実装に必要なコンポーネントも自動でセットアップしてくれます。

次のステップでは画面設計を行っていきます。
まずは装飾などは行わず、必要最低限のパーツだけを組み立てることで、画面のドラフトを作成します。

---

### 次のステップ

1. **画面設計・コンポーネント設計**
2. 必要なコンポーネントの作成・実装

---

#### 画面構成（予定）

1. **プロジェクト情報入力フォーム**
2. **参加者リスト作成フォーム**
3. **支払い記録入力フォーム**
4. **計算結果表示エリア**
5. **「計算開始」ボタン**

---

まずは、`App.tsx` を編集し、上記の流れに沿った画面の土台を作成します。  
その後、各フォームやロジックを順次実装していきます。

これから `App.tsx` の初期レイアウトを作成します。

ほんの数分でドラフトの作成が完了し、自動的にnpmコマンドが実行されてサーバが起動します。

ブラウザが起動し、作成が完了したドラフトページが表示されます。

一旦、今回はここまでとします。

次回はこの出来上がったページをブラッシュアップしていきたいと思います。