🤖

AI に旅行アプリを作ってもらった

に公開
AI
Next.js
Cursor
Claude Code
tech

🧠 背景

近年、AI 技術の進化は著しく、特に AI を活用した開発支援ツールが急速に普及しています。
その波に乗るべく、今回は AI コードエディタ「Cursor」を使い、アーキテクチャ設計~実装まで、すべて AI に任せてアプリを構築してみるという実験に挑戦しました。

🏝 完成したアプリ

👉 My旅行記

構築したのは、日本全国の旅行履歴とおすすめスポットを管理する Web アプリ「My旅行記」です。主な機能は以下の通り。

  • 日本地図から「行ったことがある都道府県」を選んで登録
  • 都道府県ごとにおすすめスポットを登録できる（名称・住所・おすすめポイント）
  • スポットは編集・削除もOK
  • 地図上でどこに行ったかが一目でわかる！

✏️ 使用した AI エディタ「Cursor」

概要

https://cursor.com/ja

Cursor は、Visual Studio Codeをベースに開発されたAI 統合型のコードエディタです。ChatGPT や Claude と連携し、以下のようなことが可能です：

  • コードの自動生成・補完
  • ドキュメント・ファイル構造をもとに提案
  • CLI コマンドのサジェスト
  • 自然言語によるアプリ設計や修正指示の受付

また、料金プランとしては以下の通りで今回は Pro プランを利用しています。

https://cursor.com/ja/pricing

🧾 最初に渡した仕様

以下の仕様を自然言語で与えるだけで、Cursor がプロジェクトのセットアップから実装、デプロイまで進めてくれました。

- タイトル：My旅行記
- 使用技術
  - Next(AppRouter）
  - TypeScript
  - AWS
  - MUI
  - 無料の日本地図、地理API
- 仕様
  - ユーザーは行ったことがある都道府県を登録できる
  - ユーザーは都道府県ごとにおすすめの場所を以下の情報で登録できる
    - 名称
    - 住所
    - おすすめポイント
  - ユーザーは自分で登録したおすすめの場所を一覧で閲覧できる
  - その場所を編集、削除できる
- ページ構成
  - ランディングページ：アプリの説明やサインアップ、サインインの導線がある
  - 地図ページ：日本地図のページ
  - 都道府県詳細ページ：都道府県ごとのページで自分のおすすめの場所を登録できる
- 要件
  - ランディングページ
    - タイトルとアプリの説明を画像付きで行う
    - AWS の技術を使ってサインアップ/ログイン/ログアウトができること
  - 地図ページ
    - 日本地図が一面に表示される（無料の API を用いる）
    - 都道府県をクリックでき、クリックしたら後段の都道府県詳細ページに遷移する
    - 左上に行ったことがある県の数が表示される（⚪︎/47）
  - 都道府県詳細ページ
    - 行ったことがあるかを登録できる
      - データ的にはユーザーごとに47都道府県の項目で、値は bool
    - おすすめの場所を登録できる
      - 登録するボタンを押すと、ダイアログが立ち上がり以下の項目が入力できる
        - 名称
        - 住所（市町村から）
        - おすすめポイント
      - 登録されていたら一覧画面として閲覧できる
      - 一覧上で編集/削除ボタンがある
        - 編集を押したら登録と同じダイアログが出て編集/保存できる
        - 削除を押したら確認ダイアログが出て削除できる
      - データベースなどは AWS 技術を用いる（もちろん、ユーザー情報と紐づける）

🤖 実際のやりとり例

Cursor では、チャット形式で AI に指示を出すことができます。

やりとり例1
やりとり例2

このように、自然言語で以下のような指示を出すと、コードの生成だけでなく、CLI コマンドの提案まで行ってくれます。

  • 「地図画像の余白が大きいので調整して」
  • 「ランディングページを仕様から読み取って 'いい感じに' 作って」
  • 「エディタ上でエラーが出てるから見て」

初期はAWS（Cognito、Aurora Serverless等）を使っていましたが、運用コストが1ドル/日かかるため、途中から LocalStorage に切り替える場面もありました。その運用を変えようとした際のやりとりの一部になります。

🗂 リポジトリ公開してます

https://gitlab.com/yossyxp/my-travel-diary

完全に AI のみで書かれたコードです（手は一切加えてません）。
実際に Cursor がどのようなコードを書くのか気になる方は、ぜひチェックしてみてください。

🙌 よかったこと

1. 開発スピードの劇的向上

自然言語で指示を出すだけで、設計〜実装〜UI構築まで一気通貫で進行できました。
従来の「調査・試行錯誤・実装」の工程が大幅に圧縮され、開発速度は圧倒的でした。

2. エラー対応が便利

バグが出た際も、エラーメッセージを貼り付けるだけで適切な修正案を提示してくれます。特に、CLIエラーや環境構築系のトラブルは、非常にスムーズに解消できました。

3. ゆるい指示でも通じる

「仕様をいい感じに解釈してUIを作って」といった曖昧な指示でも、想像以上に意図を汲み取って実装してくれます。
指示の粒度が多少粗くても、一定のクオリティが担保される点に驚きました。

😥 苦労した点

1. commitの粒度が荒くなる

AI が指示に対して一括で変更を加えるため、Git の履歴が大雑把になりがちです。
差分確認・レビューを見越して、細かくタスクを分割し、都度手動で commit を整理する必要があると思いました。

2. エラー修正に複数ターン必要

上述したように AI は自力でエラー対応をしてくれますが、一発で直ることは稀でした。
エラー内容の共有 → 修正 → 再確認の繰り返しが必要になってきます。

3. コーディングルールの統一が難しい

当たり前ですが、指示を明確に書かないと、AI の実装方針（CSSの書き方、ファイル構成など）で進んでしまいます。
自分好みの設計にしたい場合は、最初にコーディングルールを明確に伝えおく必要があります。

🔚 まとめ

今回の実験で、「AI だけで Web アプリを構築する」というのはすでに現実的であると実感しました。
特に、Cursor のようなツールを使えば、非エンジニアでもある程度の実装が可能になる未来が近づいていると感じます。

とはいえ、AI は万能ではありません。
生成されたコードの正当性やセキュリティ、安全な設計は、依然として人間による確認が必要だと思います。

AI × 人間の判断が、今後の開発スタイルの主流になってくるのではないかと強く感じました。

Discussion