株式会社TIMEWELLの濱本です
株式会社TIMEWELLの濱本です。
AIとノーコードツールの組み合わせが事業開発の
AIとノーコードツールの組み合わせが事業開発の常識を覆し、技術的な壁を感じていた起業家でも短期間でプロトタイプを作成できる時代が到来しました。しかし、多くの起業家が「技術がわからないから事業化は難しい」と諦めているのではないだろうか。
WARPプログラムのエンジニア講義で紹介したV0とCursorを活用した開発手法は、要件定義から実装まで一貫したプロセスで、非エンジニアでも本格的なアプリケーション開発を可能にする革新的なアプローチです。
本記事は、V0からCursorを利用して動作するアプリケーションを段階的に構築していく段階を紹介したエンジニア講義の第3回内容をご紹介します。
所属：株式会社TIMEWELL テクノロジー部 GM・プリンシパルエンジニア
プロフィール：東京都出身。ロボティクスとAIの研究に情熱を傾け、大学時代には家庭用ロボットのコンテストで世界2位の成績を収めた。
大手電機メーカーにてIoT開発に従事し、10年間で幅広いシステム開発の経験を積む。1000戸を超える住宅区画向けホームマネジメントシステムの仕様設計を主導し、プロジェクトを成功に導く。
ハッカソン、ものづくりイベントへの挑戦を続け、ONE JAPAN Hackathon x Tokaiで大賞を受賞。クラウド技術を独学で習得し、ソーシャルゲームプレイヤー向けサイトを自ら立ち上げ、運営。
趣味はゲームやVTuberなどのオタク文化。ゲームからUIデザインを学び、日々の仕事に活かす。
ポイント2
講師紹介 なぜV0からCursorに移行するのか V0からCursorへの移行手順 ローカル環境での実行環境構築 GitHubとの連携設定 Cursorの性能向上設定 実際の開発プロセス エラー対応とデバッグ バージョン管理のベストプラクティス まとめ なぜV0からCursorに移行するのか
まず、なぜV0だけでなくCursorを使う必要があるのかについて説明いたします。確かにV0は非常に優秀なツールで、簡単なアプリケーションであれば十分に作成可能です。実際、認証機能やデータ保存機能なども日々アップデートされており、以前はできなかったことが次々とできるようになっています。
しかし、今回のワークショップでは安全性を重視し、Supabaseなどの外部連携は使用しない方針としました。設定が複雑で、初心者の方が個人情報流出やセキュリティ攻撃のリスクにさらされる可能性があるためです。
また、V0には複雑なアプリ開発時の制約があります。AIとの長時間のやり取りが続くと、人間と同様にAIも過去の内容を忘れてしまう傾向があります。バージョンが上がるほど以前の機能を意図せず破壊してしまうリスクも高まります。そのため、本格的なアプリ開発にはCursorとGitHubを組み合わせたバックアップ体制が重要となります。
実際の移行作業について詳しく説明いたします
実際の移行作業について詳しく説明いたします。まず、V0で作成したアプリケーションの右上にあるダウンロードボタンから「ダウンロードZIP」を選択し、ローカルPCにファイルを保存します。
次に、Cursorを開いて重要な注意点があります。ダウンロードしたZIPファイルを解凍した後、その中身を全て選択してDocsフォルダの外側、つまり一番外の階層にコピーしてください。この際、必ず「フォルダのコピー」を選択することが重要です。青い選択肢ではなく、必ずこの選択肢を選んでください。
ローカルでアプリケーションを動作させるためにはNode.jsのインストールが必要です。事前にインストールしていただいているかと思いますが、まだの方は公式サイトから左側のボタンでインストーラーをダウンロードし、基本的に「次へ」をクリックしていけばインストールできます。
インストール後は一度Cursorを閉じて開き直してください。その後、ターミナルを開きます。Macの方は上部メニューから「ターミナル」→「新しいターミナル」、Windowsの方は点々のメニューから「ターミナル」を選択するか、下部のターミナルボタンを押してください。
ターミナルで npx pnpm install と
ターミナルで npx pnpm install というコマンドを実行します。これはアプリケーション実行に必要なパッケージをインストールする作業で、基本的に最初の一回だけ実行すれば十分です。途中で「Need to install...」のような確認が出た場合は、半角英数字で「Y」と入力してEnterを押してください。
エラーが発生した場合は、AIの時代らしく、エラー内容をそのままコピーしてCursorのチャットに貼り付け、「エラーを解決してください」と依頼すれば、AIが解決策を提示してくれます。
インストールが完了したら pnpm run dev コマンドでアプリケーションを起動します。成功すると「localhost:3000」のようなローカルアドレスが表示され、そこにアクセスすることでV0と同じアプリケーションがローカル環境で動作します。
次に、GitHubでのバージョン管理について説明します。まず .gitignore ファイルを作成する必要があります。これは、GitHubにアップロードする必要のないファイルを指定するためのファイルです。
新しいチャットを開いて「プロジェクトに
新しいチャットを開いて「プロジェクトに適した.gitignoreを作成してください」と依頼すると、AIが自動的に適切な内容で作成してくれます。これにより node_modules フォルダなど、容量が大きく再生成可能なファイルがGitHubにアップロードされることを防げます。
GitHubへのコミット作業では、まず虫眼鏡の右にあるGitマークを押して変更を確認します。変更ファイルの右側にある「+」ボタンを押してステージングに追加し、キラキラマークを使ってAIにコミットメッセージを生成してもらいます。その後、「コミット」ボタンを押してローカルに保存し、最後に同期ボタンでGitHubにアップロードします。
Cursorをより効果的に使用するための設定について説明いたします。大きく二つの設定があります。
一つ目は「ユーザールール」です。右上の設定から「Rules and Memories」→「Add Rules」を選択し、用意したルールを貼り付けます。これはユーザー全体に適用される設定で、日本語での回答指示やDocsフォルダの参照指示などが含まれています。
二つ目は「.cursorrules」ファイルです
二つ目は「.cursorrules」ファイルです。プロジェクトのルートディレクトリに新しいファイルとして作成し、プロジェクト固有の開発ルールを記述します。このファイルはGitHubにも保存されるため、チーム開発時に共有できる利点があります。
これらの設定により、AIがプロジェクトの文脈を理解し、より適切なコードやアドバイスを提供してくれるようになります。
開発時の基本的な流れについて説明いたします。まず、ドキュメントベースでの設計が重要です。コードを書く前に、必ず自然言語でAIと仕様について意識合わせを行います。
新機能を実装する際は、まず詳細な仕様書を作成してもらいます。用意したプロンプトを使用し、作りたい機能について説明すると、AIが疑問点を質問してきます。この段階で曖昧な部分を明確にし、実装前に仕様を固めることが重要です。
仕様が確定したら、新しいチャットで実装に移ります
仕様が確定したら、新しいチャットで実装に移ります。@features で新しく作成した仕様書を参照させ、「この仕様に基づいて実装してください」と依頼します。最近のAIは非常に優秀で、一回の指示で最後まで実装してくれることが多くなっています。
開発中にエラーが発生した場合の対処法についても説明いたします。最近のAIは非常に賢くなっているため、エラーメッセージをそのまま貼り付けるだけで適切な解決策を提示してくれます。対象ファイルが分からなくても、エラー内容だけで十分対応可能です。
また、実装完了後は必ずローカル環境で動作確認を行ってください。編集内容はリアルタイムで反映されるため、実際にアプリケーションを操作して問題がないか確認し、不具合があればその旨をAIに伝えて修正してもらいます。
GitHubでのバージョン管理について、推奨するタイミングを説明いたします。機能が一つ完成した時、一日の作業が終了した時、そして何より重要なのは「正常に動作している状態」でのコミットです。エラーが発生している状態でコミットすると、後で問題の原因となる可能性があります。
GitHubの便利な機能として、変更の可視化があります
GitHubの便利な機能として、変更の可視化があります。編集したファイルには色が付き、削除したファイルも確認できます。間違って変更や削除をした場合は、「変更を破棄」ボタンで簡単に元に戻すことができます。この機能により、AIが意図しない変更を加えた場合でも安心して復旧できます。
本日の講義を通じて、事業開発における技術的な壁を乗り越える具体的な手法をお伝えいたしました。V0からCursorへの移行は単なるツールの変更ではなく、プロトタイプから本格的なアプリケーション開発への重要なステップアップです。
特に重要なポイントは、ドキュメントベースでの設計思考です。コードを書く前に自然言語でAIと仕様について意識合わせを行うことで、開発の精度と効率が飛躍的に向上します。また、GitHubでのバージョン管理により、AIが意図しない変更を加えた場合でも安心して復旧できる環境を構築できます。
今回お伝えした手法は、技術的な知識がない方でも、適切な手順とツールの組み合わせにより、本格的なアプリケーション開発が可能になります。
是非皆さんもWARPに参加して、AIを用いてのアプリケーション開発手法を学んでみてください。
