こんにちは！この記事では、「Cursor Webアプリハッカソン by Sunrise AI」に参加して学んだことを共有します。

このハッカソンは、AIツールを活用してウェブアプリを作りながらスキルを伸ばすというもので、初心者から中級者まで楽しめる内容でした。

私は「AI恋愛コーチ」というアプリを開発しました。その過程ではたくさんのつまづきや学びがありましたが、この記事を読んで「自分にもできそう！」と少しでも感じていただけたら嬉しいです。

はじめに

Cursor Webアプリハッカソンは、AIを使った開発を実際に体験し、スキルアップを目指すイベントです。私が開発した「AI恋愛コーチ」アプリは、ユーザーの恋愛相談に乗り、AIによるパーソナライズされたアドバイスを提供するものです。恋愛というのはなかなか人に相談しづらいものですし、個別の事情が複雑なことも多いです。このハッカソンでは、どのようにAIを使ってパーソナライズされた形でユーザーに寄り添うアプリを作れるかに挑戦しました。

使用した技術スタックは以下の通りです。

フレームワーク：Next.js
デプロイ：Vercel
ソース管理：GitHub
エディタ：Cursor（AIエディタ）
その他：bolt.new、Dify、supabase

それでは、実際どのように開発を進めたのか、順を追って紹介していきます。

アイデア出しからプロトタイプ作成まで

開発の最初のステップは「アイデア出し」です。私はperplexity.aiという対話型AI検索エンジンを使ってアイデアを出し、さらに検索機能を使いながら要件定義の深堀りも行いました。perplexity.aiを使うと、短時間で多くのアイデアを出せるだけでなく、要件を具体化する上で非常に役立ちました。

次に、bolt.newを使ってアプリのプロトタイプを作成しました。bolt.newはフルスタックWeb開発の手助けをしてくれるAIツールで、特に初期の段階で大枠のアプリをサクッと作るのに向いています。ただし、カスタマイズしたい部分が多くなってくると、会話の制限や手作業での修正が必要になることがありました。とはいえ、初期段階でアプリの基盤を作れるのは非常に便利でした。

Cursorを使ったローカル開発

プロトタイプを作成した後は、ローカル開発環境で実際にコードを書き始めました。このとき使用したエディタが「Cursor」というAIエディタです。Cursorはコード補完やエラー修正などをサポートしてくれるので、開発スピードが格段に上がりました。

しかし、AIエディタにも難しい部分があります。Cursor(実際は、Claude 3.5 Sonnet)はたまに古いライブラリやモジュールを提案してくることがありました。例えば、私はSupabaseの認証を設定していたときに、Cursorが古いモジュール@supabase/auth-helpers-nextjsを提案してきたのですが、実際には新しい@supabase/ssrの方が推奨されていました。このような場面では、自分で最新のドキュメントを確認するか、CursorのDocs機能で調べてもらうことが必要で、AIツールを補完する形での作業が求められました。

認証設定でのつまづきポイント

このハッカソンで特に難しかったのが「認証」部分の実装です。Supabaseを使ってサインアップとログインを実装しようとしたところ、いくつか問題が発生しました。

まず、Supabaseのデフォルトのメール送信機能で、サインアップ後の確認メールがユーザーに届かないというトラブルがありました。これに関しては、SMTPの設定をResendというサービスを使って行うことで解決しました。この手順は少し手間がかかりますが、メール送信の安定性を確保するためには非常に重要です。Supabase側のSMTP設定でSender email、ResendのAPIキーなどを正確に設定する必要があるため、特に注意深く確認しましょう。

また、Supabase CLIを使って起動したローカル環境と、ブラウザでアクセスするホスティング環境の違いにも混乱しました。これらの環境を正確に分けて設定しないと、APIキーのエラーが頻発することになります。最終的には、環境変数を分けて管理することで、エラーを解消することができました。

開発環境とディレクトリ構造についての考察

開発を進める中で、プロジェクトのディレクトリ構造についても考えさせられる部分がありました。今回のプロジェクトでは、srcディレクトリを使わずにappディレクトリをプロジェクトのルートに配置していました。Next.js 13以降では新しいルーティングシステムであるApp Routerが導入されており、srcディレクトリを使うことでプロジェクトを整理しやすくなっています。将来的にはコードを整理するために、より標準的なディレクトリ構造に移行するのが良いかもしれません。

デプロイ時の注意点

最後にデプロイについてです。デプロイ時には、開発中に使うnpm run devと、本番環境用のnpm run buildの違いに注意する必要があります。npm run devは開発中のリアルタイムな更新には便利ですが、コードは最適化されていないため本番には向きません。本番用には必ずnpm run buildを使ってコードを最適化し、Vercelでのデプロイを行うようにしましょう。

実際、私もこの部分でつまづき、エラーが頻発しましたが、最適化を行うことで無事にデプロイが完了しました。このような細かな違いが、初心者にとってはつまづきポイントになりやすいので、ぜひ覚えておいてください。

まとめと振り返り

今回のハッカソンでは、AIツールを活用することで開発のスピードを上げつつも、手動で最新情報を補完することの重要性を学びました。Cursorやbolt.newなどのAIツールはとても便利ですが、万能ではありません。AIの助けを借りながら、自分自身でもドキュメントをしっかり読み解くことが大切です。

初心者でもAIツールを使うことで、簡単なウェブアプリを作ることができるという自信を持てるようになりました。ぜひ、この記事を参考に、皆さんもAIエディタを使って開発を始めてみてください。失敗も含めて学びのチャンスです。

みなさんの開発がうまくいくことを願っています。

参考記事