非エンジニアのためのAI活用アプリ開発術 ～V0からCursorまで完全実践ガイド～
非エンジニアのためのAI活用アプリ開発術 ～V0からCursorまで完全実践ガイド～
AIとノーコードツールの組み合わせが事業開発の常識を覆し、技術的な壁を感じていた起業家でも短期間でプロトタイプを作成できる時代が到来しました。しかし、多くの起業家が「技術がわからないから事業化は難しい」と諦めているのではないだろうか。
WARPプログラムのエンジニア講義で紹介したV0とCursorを活用した開発手法は、要件定義から実装まで一貫したプロセスで、非エンジニアでも本格的なアプリケーション開発を可能にする革新的なアプローチです。
本記事は、V0からCursorを利用して動作するアプリケーションを段階的に構築していく段階を紹介したエンジニア講義の第3回内容をご紹介します。
講師紹介
名前：安藤 義記
所属：株式会社TIMEWELL テクノロジー部 GM・プリンシパルエンジニア
講師紹介 なぜV0からCursorに移行するのか V0からCursorへの移行手順 ローカル環境での実行環境構築 GitHubとの連携設定 Cursorの性能向上設定 実際の開発プロセス エラー対応とデバッグ バージョン管理のベストプラクティス まとめ なぜV0からCursorに移行するのか
まず、なぜV0だけでなくCursorを使う必要があるのかについて説明いたします。確かにV0は非常に優秀なツールで、簡単なアプリケーションであれば十分に作成可能です。実際、認証機能やデータ保存機能なども日々アップデートされており、以前はできなかったことが次々とできるようになっています。
しかし、今回のワークショップでは安全性を重視し、Supabaseなどの外部連携は使用しない方針としました。設定が複雑で、初心者の方が個人情報流出やセキュリティ攻撃のリスクにさらされる可能性があるためです。
また、V0には複雑なアプリ開発時の制約があります。AIとの長時間のやり取りが続くと、人間と同様にAIも過去の内容を忘れてしまう傾向があります。バージョンが上がるほど以前の機能を意図せず破壊してしまうリスクも高まります。そのため、本格的なアプリ開発にはCursorとGitHubを組み合わせたバックアップ体制が重要となります。
V0からCursorへの移行手順
実際の移行作業について詳しく説明いたします。まず、V0で作成したアプリケーションの右上にあるダウンロードボタンから「ダウンロードZIP」を選択し、ローカルPCにファイルを保存します。
次に、Cursorを開いて重要な注意点があります。ダウンロードしたZIPファイルを解凍した後、その中身を全て選択してDocsフォルダの外側、つまり一番外の階層にコピーしてください。この際、必ず「フォルダのコピー」を選択することが重要です。青い選択肢ではなく、必ずこの選択肢を選んでください。
ローカル環境での実行環境構築
ローカルでアプリケーションを動作させるためにはNode.jsのインストールが必要です。事前にインストールしていただいているかと思いますが、まだの方は公式サイトから左側のボタンでインストーラーをダウンロードし、基本的に「次へ」をクリックしていけばインストールできます。
インストール後は一度Cursorを閉じて開き直してください。その後、ターミナルを開きます。Macの方は上部メニューから「ターミナル」→「新しいターミナル」、Windowsの方は点々のメニューから「ターミナル」を選択するか、下部のターミナルボタンを押してください。
ターミナルで npx pnpm install というコマンドを実行します。これはアプリケーション実行に必要なパッケージをインストールする作業で、基本的に最初の一回だけ実行すれば十分です。途中で「Need to install...」のような確認が出た場合は、半角英数字で「Y」と入力してEnterを押してください。
エラーが発生した場合は、AIの時代らしく、エラー内容をそのままコピーしてCursorのチャットに貼り付け、「エラーを解決してください」と依頼すれば、AIが解決策を提示してくれます。
インストールが完了したら pnpm run dev コマンドでアプリケーションを起動します。成功すると「localhost:3000」のようなローカルアドレスが表示され、そこにアクセスすることでV0と同じアプリケーションがローカル環境で動作します。
GitHubとの連携設定
次に、GitHubでのバージョン管理について説明します。まず .gitignore ファイルを作成する必要があります。これは、GitHubにアップロードする必要のないファイルを指定するためのファイルです。
新しいチャットを開いて「プロジェクトに適した.gitignoreを作成してください」と依頼すると、AIが自動的に適切な内容で作成してくれます。これにより node_modules フォルダなど、容量が大きく再生成可能なファイルがGitHubにアップロードされることを防げます。
GitHubへのコミット作業では、まず虫眼鏡の右にあるGitマークを押して変更を確認します。変更ファイルの右側にある「+」ボタンを押してステージングに追加し、キラキラマークを使ってAIにコミットメッセージを生成してもらいます。その後、「コミット」ボタンを押してローカルに保存し、最後に同期ボタンでGitHubにアップロードします。
Cursorの性能向上設定
Cursorをより効果的に使用するための設定について説明いたします。大きく二つの設定があります。
一つ目は「ユーザールール」です。右上の設定から「Rules and Memories」→「Add Rules」を選択し、用意したルールを貼り付けます。これはユーザー全体に適用される設定で、日本語での回答指示やDocsフォルダの参照指示などが含まれています。
二つ目は「.cursorrules」ファイルです。プロジェクトのルートディレクトリに新しいファイルとして作成し、プロジェクト固有の開発ルールを記述します。このファイルはGitHubにも保存されるため、チーム開発時に共有できる利点があります。
これらの設定により、AIがプロジェクトの文脈を理解し、より適切なコードやアドバイスを提供してくれるようになります。
実際の開発プロセス
開発時の基本的な流れについて説明いたします。まず、ドキュメントベースでの設計が重要です。コードを書く前に、必ず自然言語でAIと仕様について意識合わせを行います。
新機能を実装する際は、まず詳細な仕様書を作成してもらいます。用意したプロンプトを使用し、作りたい機能について説明すると、AIが疑問点を質問してきます。この段階で曖昧な部分を明確にし、実装前に仕様を固めることが重要です。
仕様が確定したら、新しいチャットで実装に移ります。@features で新しく作成した仕様書を参照させ、「この仕様に基づいて実装してください」と依頼します。最近のAIは非常に優秀で、一回の指示で最後まで実装してくれることが多くなっています。
エラー対応とデバッグ
開発中にエラーが発生した場合の対処法についても説明いたします。最近のAIは非常に賢くなっているため、エラーメッセージをそのまま貼り付けるだけで適切な解決策を提示してくれます。対象ファイルが分からなくても、エラー内容だけで十分対応可能です。
また、実装完了後は必ずローカル環境で動作確認を行ってください。編集内容はリアルタイムで反映されるため、実際にアプリケーションを操作して問題がないか確認し、不具合があればその旨をAIに伝えて修正してもらいます。
バージョン管理のベストプラクティス
GitHubでのバージョン管理について、推奨するタイミングを説明いたします。機能が一つ完成した時、一日の作業が終了した時、そして何より重要なのは「正常に動作している状態」でのコミットです。エラーが発生している状態でコミットすると、後で問題の原因となる可能性があります。
GitHubの便利な機能として、変更の可視化があります。編集したファイルには色が付き、削除したファイルも確認できます。間違って変更や削除をした場合は、「変更を破棄」ボタンで簡単に元に戻すことができます。この機能により、AIが意図しない変更を加えた場合でも安心して復旧できます。
まとめ
本日の講義を通じて、事業開発における技術的な壁を乗り越える具体的な手法をお伝えいたしました。V0からCursorへの移行は単なるツールの変更ではなく、プロトタイプから本格的なアプリケーション開発への重要なステップアップです。
特に重要なポイントは、ドキュメントベースでの設計思考です。コードを書く前に自然言語でAIと仕様について意識合わせを行うことで、開発の精度と効率が飛躍的に向上します。また、GitHubでのバージョン管理により、AIが意図しない変更を加えた場合でも安心して復旧できる環境を構築できます。
今回お伝えした手法は、技術的な知識がない方でも、適切な手順とツールの組み合わせにより、本格的なアプリケーション開発が可能になります。
是非皆さんもWARPに参加して、AIを用いてのアプリケーション開発手法を学んでみてください。
講演・ご相談はこちら
「5分でアプリが作れるAI開発術」―プログラミング不要のV0実践ガイド
プログラミング経験ゼロでも、たった5回のやり取りで本格的なゲームアプリが作れる時が到来しました。「V0」というAIサービスは、「インベーダーゲームを作って」という一言の指示だけで、実際に動くゲームを生成してくれます。起業を考えているが技術的な壁に悩む人にとって、もはやコーディングスキルは必須ではないのです。AIと自然言語で対話しながら、アイデアを形にする「バイブコーディング(vibe coding) 」という新しい開発手法が、ビジネスの可能性を無限に広げていくでしょう。
今回の記事では、エンジニア講座第2回として、プログラミング経験がなくても本格的なアプリケーションを作る方法として、V0（ヴイゼロ）というサービスとGitHubの使い方をお伝えしていきます。前回はCursorの使い方を説明しましたが、今回の前半はAIを楽しく触ってみて、後半は少し触りにくいGitHubの設定を進めていきます。
講師紹介
名前：安藤 義記
所属：株式会社TIMEWELL テクノロジー部 GM・プリンシパルエンジニア
名前：内藤 一樹
所属：株式会社TIMEWELL 共同創業者 兼 取締役CTO
プロフィール：東京都出身。新卒でNTTアドバンステクノロジに入社。NTTアドバンステクノロジではクラウドサービスを主軸としたSI事業に従事。その後事業会社の新規サービス創出・開発部門のテクニカルリード兼スクラムマスターとしてPOSサービス、デジタルサイネージなどのサービスを開発。個人での活動としてはOSSのコントリビュートやピーク50万PV/月、平均30万PV/月ほどの特定業種向けの転職サイトを開発し運用を行ってきた。現在は、チャレンジャーアシスタントサービス「TIMEWELL」の設計・開発・運用に加え、新たなサービス開発に専念。テクノロジーに対してワクワクしながらも不安を抱える人々や団体、企業を支援。意味的報酬を重視し、As a serviceの活用を駆使し、スピーディに業務を効率化するためのアプリケーションを実装する事が得意。
講師紹介 バイブコーディングという新しい開発手法 V0でプロトタイプを作る楽しさ 実際の作成プロセス 要件定義書をV0で活用する方法 GitHubという世界標準のコード管理サービス 実際の設定と操作 今後の学習について まとめ：AIがプログラミングの民主化を実現する時代へ バイブコーディングという新しい開発手法
ます初めにお伝えしたいのは、私たちがこれから学んでいく開発手法が「バイブコーディング(vibe coding) 」と呼ばれる最新のアプローチだということです。これは、コーディングの中身が分かっていなくても問題ない、とりあえずAIに触らせてみてコーディングしようという考え方です。自然言語、つまり皆さんが普段喋っている言葉を使ってコーディングをしていく開発手法です。
まずは触り、中が分からなくても できる時代になってきています。今回のWARPでは、自然言語を使ってなんとなくコーディングできるようになることを目指していきます。
V0でプロトタイプを作る楽しさ
V0は、私たちのWARPの講座でも使うウェブアプリケーションを簡単に作れるサービスです。ReactやNext.jsという今時の技術を使いながら、いい感じにコーディングしてくれます。無料プランでもある程度使えますが、使いすぎると「お金を払え」と言われてしまう時があるので、その場合は時間を置くか、プロプラン（月20ドル）を契約していただければと思います。
実際にどういうことができるかというと、ChatGPTと同じ感じで、普通に私たちが使っている言葉で話しかけるだけで、簡単にウェブサイトやアプリケーション、ゲームも作れます。
私が最近作った例として、インベーダーゲーム、ブロック崩し、五目並べなどがあります。インベーダーゲームは方向キーを使って敵が撃ってくるところに対してスペースボタンを押しながら撃ったりできる、ちゃんと動くゲームが比較的簡単に作れるのです。
実際の作成プロセス
作り方は結構シンプルです。ChatGPTと似た感じで、やりたいことを指示し、変えてほしいところを言葉で伝えていくだけです。例えば、最初に「インベーダーゲームを作って」と指示しただけで、基本的な形ができあがりました。その後、「敵がかっこ悪いので、もっとインベーダーっぽい感じのデザインにして」とか「プレイボタンが2個あるから変えてほしい」とか「ゲームが終わったらもう一回動いてしまう」といった問題を素直にAIに説明して修正してもらい、このインベーダーゲームは、約5回のやり取りで完成しています。
V0の画面には、ChatGPTのようなコメント入力欄があり、そこに指示を入力するのですが、「Enhance」というボタンを押すと、適当な指示をもう少し詳しくしてくれます。そして送信すると、コーディングが勝手に始まります。
要件定義書をV0で活用する方法
前回作成していただいた要件定義書をV0でどう使うかについても説明しました。V0のトップページには添付ファイル機能があるので、前回の宿題で作成した要件定義書の詳細版をアップロードします。そして、「添付したドキュメントが要件定義書になっているので、初期的なUIをまず作ってください」というプロンプトを追加します。
参考になるUIデザインがあれば、画像として添付することで、より思い通りのものが出てきます。AIもだいぶ頭が良くなってきたので、エラーはほぼ起きませんが、もしエラーが出た場合は、そのエラーメッセージをそのまま次の指示として貼り付ければ修正できます。
また、一度にあまり多くの指示をしすぎず、徐々に更新していくことを心がけてください。無料プランでは1日の利用制限があるので、もし無料で使い続けたい方は、日にちを分けながらやっていくといいでしょう。
GitHubという世界標準のコード管理サービス
後半はGitHubについてです。GitHubはプログラマーやエンジニアがソースコードファイルをオンライン上で保管して管理するためのサービスです。今はMicrosoftが運営している世界最大のコード共有プラットフォームとして、ソフトウェアエンジニアといえばこれを使っているというくらい、世の中のデファクトスタンダードになっています。
コードの履歴をしっかり管理できる機能があり、複数の人で一緒にソースコードを作っていくときにとても使いやすい機能がついています。実際に作ったものを共有でき、「私こんなのを作ったよ」というのを簡単に共有できるため、ポートフォリオ的な扱い方もできます。また、使っているパソコンが壊れてもクラウドにバックアップがあるので安心です。
GitHubを使うと、どこを編集したかが全部記録されます。例えば、「outline」という書き方を「secondary」に変えましたよ、というような変更履歴が全部残ります。誰がいつどこを書き換えたかがすべて記録され、最新に戻す、前に戻す、といった作業も簡単にできるのです。
実際の設定と操作
GitHubを使うためには、まずアカウントを作成し、その後Gitというツールをインストールする必要があります。Windowsの方は専用のインストーラーを使い、Macの方はターミナルで「git --version」と打ち込んで確認します。基本的にCursorをインストールしていれば自動的に入っているはずです。
その後、CursorでGitHubのユーザー名とメールアドレスを設定します。これもAIに「Gitのユーザー名とメールアドレスを設定したいです」とプロンプトを投げれば、必要なコマンドを教えてくれて設定できます。
今後の学習について
V0は本当に楽しいサービスです。プログラミング経験がなくても、AIとの対話だけで実際に動くアプリケーションが作れる時代になりました。ぜひ次回までにV0を使いこなして、皆さんのアイデアを形にしてきてください。GitHubは最初は難しく感じるかもしれませんが、徐々に慣れていけば大丈夫です。エンジニアでも最初は「GitHubって意味分からない、死にやがれ」という感じでしたから。
今日の講座で、AIの力、特にV0のすごさを感じていただけたと思います。これからも楽しみながら、一緒にアプリケーション開発を学んでいきましょう。
まとめ：AIがプログラミングの民主化を実現する時代へ
今回の講座を通じて、プログラミングの専門知識がなくても、誰もが本格的なアプリケーションを作れる時代が到来したことを実感していただけたと思います。V0という革新的なサービスを使えば、「インベーダーゲームを作って」という一言の指示から、わずか5回のやり取りで実際に動くゲームが完成します。これは単なる技術の進歩ではなく、ものづくりの根本的な変革を意味しています。
バイブコーディング(vibe coding)という新しい開発手法は、自然言語を使ってAIと対話しながらアプリケーションを作り上げていく方法です。コードの中身を理解していなくても、作りたいものをAIに伝え、修正したい部分を素直に説明するだけで、思い通りのアプリケーションが形になっていきます。シンプルなものから始めて、徐々に複雑なアプリケーションへと発展させることができるのです。
そして、要件定義書とV0を組み合わせることで、ビジネスアイデアから実際に動くプロトタイプまでの道のりが劇的に短縮されます。前回作成した要件定義書を添付し、適切なプロンプトを加えるだけで、AIが仕様に沿ったアプリケーションを生成してくれます。エラーが出ても、そのメッセージをそのまま次の指示として使えば解決できるという手軽さも魅力です。
GitHubについては、確かに最初は難しく感じるかもしれません。しかし、これは世界中のエンジニアが使っているデファクトスタンダードであり、コードの履歴管理やバックアップ、ポートフォリオとしての活用など、多くのメリットがあります。第5回までの講座を通じて、徐々に慣れていけば必ず使いこなせるようになります。
重要なのは、これらのツールが起業を考えている方々にとって、技術的な壁を取り除く強力な武器になるということです。もはやプログラミングスキルの有無は、アイデアを形にする上での決定的な障壁ではありません。V0のようなAIツールを活用すれば、ビジネスアイデアを素早くプロトタイプ化し、顧客からのフィードバックを得て、改善を重ねていくことができるのです。
AIとの対話によるアプリケーション開発は、もはや未来の話ではなく、今まさに皆さんの手の中にある現実です。この新しい開発手法を習得することで、皆さんのビジネスアイデアが次々と形になっていく。その第一歩を、今日踏み出していただけたことを心から嬉しく思います。
講演・ご相談はこちら
TIMEWELLのAI導入支援
TIMEWELLは、AIエージェント時代のビジネス変革を支援するプロフェッショナルチームです。
提供サービス
- ZEROCK: 国内サーバーで動く高セキュリティAIエージェント
- TIMEWELL Base: AIネイティブのイベント管理プラットフォーム
- WARP: AI活用人材育成プログラム
2026年、AIは「使うもの」から「共に働くもの」へ。御社のAI活用戦略、一緒に考えませんか？