株式会社TIMEWELLの濱本です
株式会社TIMEWELLの濱本です。
AIとノーコードツールが民主化した現代において、導入の
AIとノーコードツールが民主化した現代において、導入の技術的な壁は急速に低くなっています。しかし開発や起業への道のりで本当に重要なのは、技術習得よりもむしろ顧客の声を聞き、実際のニーズを捉えることではないだろうか。
今回の記事では、株式会社TIMEWELLの安藤義記さんのWARPプログラムエンジニア講座の内容をお伝えします。プログラムの参加者たちがV0やCursorといった最新ツールを使い、わずか数週間でアプリケーションを構築していく過程や、現代の起業家が技術とビジネス開発を両立させながら、持続可能な事業を築くための実践的なアプローチを詳しく紹介します。
所属：株式会社TIMEWELL テクノロジー部 GM・プリンシパルエンジニア
プロフィール：東京都出身。ロボティクスとAIの研究に情熱を傾け、大学時代には家庭用ロボットのコンテストで世界2位の成績を収めた。
大手電機メーカーにてIoT開発に従事し、10年間で幅広いシステム開発の経験を積む。1000戸を超える住宅区画向けホームマネジメントシステムの仕様設計を主導し、プロジェクトを成功に導く。
ハッカソン、ものづくりイベントへの
ハッカソン、ものづくりイベントへの挑戦を続け、ONE JAPAN Hackathon x Tokaiで大賞を受賞。クラウド技術を独学で習得し、ソーシャルゲームプレイヤー向けサイトを自ら立ち上げ、運営。
趣味はゲームやVTuberなどのオタク文化。ゲームからUIデザインを学び、日々の仕事に活かす。
講師紹介 これまでの振り返りと基本的な開発手法 V0とCursorの効果的な使い分け 開発効率を上げるCursorの活用テクニック 外部サービス連携の基本戦略 データベース設計の実践的アプローチ Neonを使ったデータベース接続の実装 Clerkによる認証機能の実装 開発中のトラブルシューティング 開発効率を上げる便利ツールの活用 実装の最適化とデータ管理 実践で学んだ重要なポイント AI時代の開発手法がもたらす可能性 まとめ これまでの振り返りと基本的な開発手法
本日は特にデータの永続化とユーザー認証機能について、皆さまと一緒に学んでいきたいと思います。
これまでの振り返りからお話しすると、わたしたちはまず要求仕様書を明確にすることから始めました。AIとの認識のずれが起きないよう、普段使っている日本語で作りたいものを明確にしていただきました。この部分は非常に重要で、人間の言葉をそのままコードにしてしまうと、専門の方しか理解できなくなってしまいます。
その後、V0というサービスを使ってプロトタイプを作成していただきました
その後、V0というサービスを使ってプロトタイプを作成していただきました。この段階では見た目重視で、大枠を作ることに集中しました。そして、できあがったものをCursorにダウンロードして、実際に動く機能を実装していくという流れで進めてきました。
V0で一度作ったものをCursorに持ってきた後、再びV0で作業をするということはお勧めしません。二回目以降は非常に難しくなってしまうためです。基本的にはV0で大枠を作って、その後はCursorで一本化して進めていくのが効率的です。
Cursorの設定についても重要なポイントがあります。ユーザールールズとカーソルルールズという二つの設定がありますが、まだ設定されていない方は必ず行ってください。これらの設定により、AIの性能が向上します。
また、Claude 4 Sonnet 4もぜひ活用してください。AI の性能が大幅に変わります。課金が必要ですが、作業時間の大幅な短縮につながりますので、賢いAIを使った方が結果的に効率的です。
開発効率を上げるCursorの活用テクニック
Cursorでは@マークを
Cursorでは@マークを使うことで、参照したいファイルや内容を指定できます。エラーが発生した場合は、エラーメッセージをそのままコピーしてAIに送るだけで解決してくれることが多いです。
アプリケーションの実行についてですが、最初にnode_modulesをインストールする必要があります。これは最初の一回だけで構いません。二回目以降はnpm run devコマンドでアプリケーションを起動できます。
さて、本日のメインテーマに入ります。世の中のアプリケーションを全て自分で作るのは非常に大変で無駄が多いため、借りられるものは借りるという精神で進めていきます。今回は、ユーザーのログイン機能についてはClerkというサービスを、データの保存についてはNeonというサービスを使用します。
外部サービスとの連携には鍵が必要です。これは非常に長いパスワードのようなもので、サービス提供会社と利用者だけが知る秘密の情報です。この鍵は.envファイルに保存します。このファイルには機密情報が含まれているため、AIからアクセスできないよう制限されています。
データベースの設計について詳しく説明します。まず、prisma/schema.prismaというファイルでデータの設計を行います。これは専門用語ですが、データの設計ファイルと考えてください。AIがこのファイル名を認識することで、ミスなく設定を行ってくれます。
基本的な流れとしては、プロンプトを
基本的な流れとしては、プロンプトを使ってAIに設計させ、必要なものをインストールし、鍵を設定してから実際にデータベースに反映するという手順になります。
.envファイルの作成時に注意していただきたいのは、このファイルがAIからアクセスできないよう制限されているため、AIが「アクセスできません」と困ることがあります。その場合は「問題ないです」とコメントしてあげれば、安心して実装を進めてくれます。
schema.prismaファイルには、皆さまの実装仕様書をベースに必要なデータ構造が設計されます。私の例では300行程度の設計図が生成されました。AIが提案するコマンドは基本的に実行していただいて問題ありません。
データベース接続のためのURLは、Neonサービスから取得します。Neonのサイトでアカウントを作成し、プロジェクトを作成していただきます。その際、コピーボタンから接続情報を取得し、.envファイルに貼り付けます。
重要な注意点として、このデータベースURLは極めて機密性の高い情報です。これが漏洩すると、誰でもデータベースにアクセスできてしまいます。GitHubにもアップロードしないよう、十分注意してください。
データベースの反映作業では
データベースの反映作業では、AIに「データベースに反映してください」と指示すれば、必要なコマンドを実行してくれます。この過程で、変更内容の名前を求められることがありますが、そのままEnterを押しても問題ありません。
認証機能の実装についても説明します。基本的な枠組みは先週お伝えしたプロンプトと同様です。まずドキュメントを作成し、その後実装を進めるという流れです。
認証機能では、Clerkというサービスを使用します。Clerkの設定も比較的簡単で、アカウントを作成してアプリケーションを登録するだけです。グーグル認証やメール認証など、使用したい認証方法を選択できます。
実装過程では、AIが必要なパッケージを自動的にインストールしてくれます。.envファイルが読めないことについてエラーが出ることがありますが、これは制約によるものですので問題ありません。
開発中にネットワークエラーが発生することがあります。これはCursorのサーバー側の問題で、時間を置いてから再試行していただく必要があります。エラーが発生した場合は、「続けて」と入力すれば処理を継続してくれます。
最終的に、ClerkのホームページからNext.js用の
最終的に、ClerkのホームページからNext.js用の設定情報を取得し、.envファイルに追加することで認証機能が完成します。
開発を進める上で役立つツールも紹介しましょう。ブラウザの開発者ツールは非常に有用です。右クリックして「検証」を選択すると、コンソールでエラーログを確認できます。エラーが発生した際は、これらのログをコピーしてAIに送ることで、効率的に問題を解決できます。
スマートフォン向けアプリケーションを開発される方には、ブラウザの開発者ツールでモバイル表示をシミュレートする機能もお勧めします。様々なデバイスの解像度で表示を確認できるため、実機での確認前にブラウザで検証することをお勧めします。
データベースの内容確認には、npx prisma studioコマンドが便利です。このコマンドを実行すると、データベースの内容を視覚的に確認できるツールが起動します。
開発過程でモックデータから本格実装への移行が必要になることがあります。この際は「モックデータを本実装してください」と指示することで、AIが効率的に実装を進めてくれます。
参加者の皆さまからも多くの質問をいただきました
参加者の皆さまからも多くの質問をいただきました。インストール処理に時間がかかる場合は、PCの性能やインターネット回線の影響があります。プリズマエンジンのダウンロードに失敗する場合は、ネットワーク環境の改善後に再実行していただく必要があります。
.envファイルの配置場所は、プロジェクトの最上位フォルダに置いてください。カーソルルールズファイルと同じ階層です。
ターミナルでユーザー入力を求められる場面では、指示に従って適切に入力してください。スペースキーでの選択やEnterキーでの確定が必要な場合があります。
次回は最終回となり、デプロイ機能と成果発表を予定しています。発表資料はPDF形式で3枚から5枚程度にまとめていただき、顧客インタビューの内容とデモアプリケーションの内容を含めてください。
今回の講義を通じて、AIを活用した開発手法の理解を深めていただけたかと思います。データベースや認証機能といった本格的な機能実装も、適切なツールとAIの支援により、比較的短期間で実現できることをご理解いただけたでしょう。
最後に、開発は継続的な学習プロセスです
最後に、開発は継続的な学習プロセスです。エラーが発生しても恐れず、AIに質問しながら着実に進めていってください。わたしたちも引き続きサポートいたしますので、不明な点があれば遠慮なくお声がけください。
AIとノーコードツールの急速な発展により、技術的な参入障壁は確実に低くなっています。わたしたちが今回の講義で実践したように、V0やCursor、そしてClaude 4といった最新ツールを組み合わせることで、従来であれば数か月かかっていたアプリケーション開発を数週間で実現できるようになりました。
しかし、技術的な実装が容易になったからこそ、事業開発において本当に重要なポイントが浮き彫りになります。それは顧客の声を聞き、実際のニーズを正確に捉えることです。どれほど優れた技術スタックを使っても、市場が求めていないものを作ってしまえば成功はありません。
今回の講義で最も強調したかったのは、「借りられるものは借りる」という精神です。認証機能にClerk、データベースにNeonを使用したように、既存のサービスを活用することで、本来注力すべき事業の核心部分により多くの時間とエネルギーを投入できます。
起業を考えている皆さまには、このAI時代の開発手法を単なる技術習得の機会として捉えるのではなく、事業仮説の検証を加速させるツールとして活用していただきたいと思います。短期間でプロトタイプを作成し、実際のユーザーからフィードバックを得て、素早く改善サイクルを回していく。これこそが現代の起業家に求められる姿勢です。
技術の民主化が進む今だからこそ、技術よりもビジネス思考が差別化要因となります。わたしたちが提供した開発手法を基盤として、皆さまが顧客に真に価値を提供できる事業を築いていかれることを心から期待しています。
