見出し画像
Photo by harukara1968

DevinとGitHubで始めるAI駆動Webアプリ開発 – 最新技術スタック活用ハンズオンガイド (2025年2月版)

とりてん@有益情報は発信しません

【AI駆動開発を体感してみたい自分のために！】
2025年、AI駆動開発は現実的な手法となり、完全自律型AIエンジニア「Devin」が登場しました。Devinは、開発プロセス全体を自律的に進め、GitHub Copilotのようにコード補完だけでなく、計画立案からテストまで包括的に対応します。本記事では、ビジネスサイドの方がDevinとGitHubを活用し、Next.jsやSupabaseといった最新技術を用いてWebアプリ開発を行う具体的な手順を説明します。


AIエージェントを活用したAI駆動開発が、2025年現在いよいよ現実的な手法になりつつあります (Webアプリ開発の変遷：2000年～2023年までの手動開発、2024年以降のAI駆動開発の普及（2025年2月） #ポエム - Qiita)。2024年3月にはCognition社が世界初の完全自律型AIエンジニア「Devin」を発表し、与えられた情報を基に開発プロセス全体を自律的に進められるAIエージェントとして注目を集めました (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)。GitHub Copilotのようにコード補完するだけでなく、計画立案からコーディング、テストまで包括的に対応できる点が大きな特徴です。その結果、「ソフトウェア開発の民主化」が現実のものとなり、エンジニアが身近にいなくても誰でもアイデアを形にできる時代が来ています (ソフトウェアの民主化。誰でもアプリ開発が可能となる。Devinを見逃すな！！｜ちょむのすけ)。

本記事では、ビジネスサイドの方（プログラミング基礎習得済み・生成AIによる開発経験あり）が、このDevinとGitHubを活用して最新モダン技術スタックによるWebアプリ開発を行う具体的な手順を提案します。AIエージェントを“開発パートナー”として迎え、Next.jsやSupabaseといった2025年現在定番の技術を組み合わせ、Vercel等のモダンなデプロイ環境に展開するまでの流れを、ハンズオン形式で解説します。アプリ自体にはAI機能を組み込まずとも、開発プロセス自体はAIにドライブしてもらうことで、ビジネスアイデアの実現スピードを飛躍的に高めることができます。

各ステップでは具体的な手順を示します。本記事だけを読み進めれば、実際に手を動かしてプロダクト開発を開始できることを目指しています。それでは順を追って見ていきましょう。

1. 開発環境のセットアップ – Devin導入とGitHubリポジトリ準備

まずは**AIエージェント「Devin」**を開発フローに組み込むための準備を行います。DevinはSlackやGitHubと連携して動作するため、これらの環境を整備しましょう (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)。

以上で、Devinを開発メンバーに迎える準備が整いました。まるでリモートのエンジニアをオンボーディングしたような形ですが、違いは彼（Devin）は24時間高速に働き続けてくれるAIだということです。指示内容が曖昧な場合はDevin側から次に取るべきアクションの候補を質問してきたりと、適切に報告・連絡・相談を行ってくれるのも特徴です (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)。それでは、具体的な開発作業に入っていきましょう。

2. 技術スタックの選定 – Next.js・Supabase・Edge Functions・デプロイ環境

次に、Devinに構築してもらうWebアプリの技術スタックを決定します。今回はフロントエンド～バックエンドまでフルスタックなWebアプリを、できるだけシンプルかつモダンな構成で実現する方針です。2025年現在のトレンドや相性を考慮し、以下の技術を採用します。

  • フロントエンドフレームワーク: Next.js (Reactベース)
    Reactコンポーネントを用いた開発が主流の中、Next.jsはSSR（サーバサイドレンダリング）やルーティング、ビルド済みの最適化を備えたデファクトスタンダードです (Webアプリ開発の変遷：2000年～2023年までの手動開発、2024年以降のAI駆動開発の普及（2025年2月） #ポエム - Qiita)。TypeScriptとの相性も良く、ページ単位のファイル構成と豊富な公式プラグインによって、初心者にも扱いやすいフレームワークです。Next.js 13以降ではApp Routerと呼ばれる新しいディレクトリ構造が導入され、より柔軟で高速な開発が可能になっています（React Server Componentsによるパフォーマンス向上など）。ビジネスサイドの方でも、UI/UX部分を中心に要件を伝えればDevinが適切なページとコンポーネントを生成してくれるでしょう。

  • バックエンド/BaaS: Supabase (PostgreSQL + サーバーレス機能)
    データベースにはスケーラビリティと開発効率からSupabaseを採用します。SupabaseはオープンソースのFirebase代替とも称され、フルマネージドのPostgreSQLデータベースに、認証・ストレージ・リアルタイム通知・エッジ関数などの拡張機能を統合提供するプラットフォームです (Supabase + Vercel Partnership)。特に認証(Auth)やファイルストレージ、データ変更時のリアルタイム通知など、多くのWebサービスで必要となる機能が組み込み済みで、バックエンドの実装負担を大きく減らせます (Supabase + Vercel Partnership)。また、SupabaseはEdge Functionsと呼ばれるサーバレス関数のデプロイ機能も提供しており、Postgresに近い場所（Supabaseのクラウド上、Denoランタイム）でカスタムロジックを実行可能です。これにより、必要に応じてデータ処理やサードパーティAPI連携のコードをサーバレスで走らせることができます。

  • デプロイ環境: Vercel (サーバレスプラットフォーム)
    開発したアプリをユーザに提供するためのホスティングには、Vercelを利用します。VercelはNext.js開発元が提供するクラウドプラットフォームで、Git連携による自動デプロイやグローバルCDN、サーバレス関数のホスティングに優れています (Railway vs Vercel)。GitHubリポジトリと紐付けておけば、コードをプッシュするたびにビルドとデプロイが走り、数十秒で世界中に変更が反映されたURLが公開されます (Railway vs Vercel)。Next.jsとの親和性は言うまでもなく高く、ビルド設定も自動で最適化されるため追加設定なしでSSRやAPI Routesが動作します。2024年にはVercelとSupabaseの公式パートナー連携も発表されており、Vercel上からSupabaseのデータベースをワンクリックで作成・連携できる統合も始まっています (Supabase + Vercel Partnership) (Supabase + Vercel Partnership)。このようにVercel＋Supabaseはスタートアップからエンタープライズまで非常に人気の組み合わせとなっています (Supabase + Vercel Partnership)。

  • そのほかの技術:
    上記以外にも、フロントエンド開発を快適にするツールとしてTailwind CSS（ユーティリティファーストなCSSフレームワーク）や、コード品質を維持するためのESLint・Prettier（静的解析と自動整形）などを導入すると良いでしょう。これらはNext.jsのプロジェクト作成時にオプション選択できたり、後から追加も容易です。また言語はTypeScriptを使います。型定義によるバグ検出と開発支援効果が高く、2025年時点でフロントエンド/バックエンド問わず主流となっています (Webアプリ開発の変遷：2000年～2023年までの手動開発、2024年以降のAI駆動開発の普及（2025年2月） #ポエム - Qiita)。Devinに依頼すれば、TypeScriptでの実装も問題なく行ってくれます。

以上が本プロジェクトの技術スタックです。この構成は2025年現在広く採用されている安定した技術群であり (Webアプリ開発の変遷：2000年～2023年までの手動開発、2024年以降のAI駆動開発の普及（2025年2月） #ポエム - Qiita)、AIエージェントによる自動コーディングとの相性も良好です。フロントエンド～インフラまでのセットアップに悩む必要が少なく、Devinのパワーをプロダクトロジックに集中させやすい点がメリットと言えます。では、選定した技術に基づき、Devinを使ってプロジェクトの初期化を進めましょう。

3. プロジェクトの初期化 – Devinによる雛形作成

技術スタックが決まったら、いよいよプロジェクトの骨組みを作ります。通常であれば開発者が自分でフレームワークの初期化コマンドを実行したり、設定ファイルを書いたりするフェーズですが、ここでもDevinに活躍してもらいます。Devinに**「Next.js＋Supabaseでプロジェクトを初期化して」**と指示することで、自動的に雛形コードを生成しGitHubにプッシュしてもらいましょう。

具体的な手順は以下のとおりです。

以上で、プロジェクトの初期セットアップが完了しました。通常であれば数十分かかる環境構築作業が、わずかな指示と自動化によって数分で片付いたことになります。Devinは計画立案からコード記述、動作確認（必要に応じてローカルサーバー起動やテスト実行）、結果報告まで一気通貫で実施し (Devin AI review: is it better than Cursor?)7】。まさに有能な新人エンジニアがテキパキと準備を進めてくれたイメージです。次のステップでは、この基盤上に実際のアプリケーション機能を実装していきましょう。

4. AI駆動によるコード生成とGitHub運用 – 開発の進め方

プロジェクトの土台が整ったら、いよいよ具体的な機能実装に取りかかります。ここからは反復的に、ビジネスサイドのあなた（企画者）のアイデアや要件をDevinに伝え、コードに落とし込んでもらうフェーズとなります。従来であればエンジニアに要件を伝え、仕様検討・実装してもらうやり取りが必要でしたが、Devin相手でも基本的な流れは似ています。自然言語で要件を伝え、上がってきた成果物をレビューしてフィードバックを返すというコミュニケーションを繰り返しまし (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)6】。

開発フローのイメージ:

  1. 機能の要件を定義（ユーザストーリー）: まず実装したい機能を決め、簡潔に要件をテキスト化します。例として、「ユーザーが商品を登録し一覧表示できるCRUD機能」や「問い合わせフォームから投稿された内容を管理者が閲覧できる画面」など、具体的なユースケースを一つ挙げます。

  2. Devinにタスクを依頼: Slackで`@Devin`にメンションし、上記要件を伝えます。ポイントはできるだけ具体的に期待する動作や画面、データ項目を伝えることです。たとえば「`@Devin ユーザーがTodoを追加・表示・削除できるページを作ってください。Supabaseに'todos'テーブル（columns: id, title, completed）があります。フロントエンドでフォームを作り、タイトルを入力して追加、下に一覧表示。各Todoは削除ボタンで消せます。`」のように依頼します。`todos`テーブルなどデータベース側の準備も事前に行っておきます（SupabaseのWeb UIやSQLエディタでテーブル作成）。テーブルスキーマ情報も伝えてあげると、Devinが正しくCRUD処理を実装できます。

  3. Devinの開発・コミット: Devinは要件を理解すると、再び具体的な作業計画を立てて実行に移ります。計画には「Supabaseに接続して`todos`テーブル操作するAPIルートをNext.jsに作成」「フロントにフォームと一覧コンポーネントを作成」「フォーム送信でAPI経由でDBにINSERT」「ページロード時にDBからSELECTして一覧表示」などが含まれるでしょう。順次コードを書き、ローカルでテストし、問題なければGitHubにコミット（またはプルリク）します。例えば`pages/api/todos.ts`（あるいはApp Routerの場合`app/api/todos/route.ts`）にサーバレス関数を実装し、SupabaseクライアントでINSERT/SELECTを行うコードを書くかもしれません。また`pages/index.tsx`にはフォームと一覧表示のUIを追加するでしょう。Devinはバグが発生した場合、自らデバッグして修正を試み (Devin AI review: is it better than Cursor?)8】。例えば型エラーや実行時エラーが出ればコンソールログを解析し、コードを修正して再実行する、といったサイクルも自動で行い (Devin AI review: is it better than Cursor?)8】。こうして実装＋テストを繰り返し、完了すると「機能実装が完了しました」とSlackに報告が来ます。

  4. コードレビューとフィードバック: GitHub上でプルリクエストが作成されていれば、変更差分をレビューします。期待通りの動作になっているか、コードスタイルや設計上気になる点がないかチェックしましょう。例えば「UIの文言を変更したい」や「この部分のエラーハンドリングを追加してほしい」など改善点があれば、遠慮なくDevinに伝えます。方法は前述のとおり、Slackで指摘しても良いですし、プルリク上でコメントしても構いま (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita) (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)6】。Devinは指摘を受けると再度コードを修正し、コミットを追加してくれ (Devin AI review: is it better than Cursor?)7】。例えばプルリクのコメントに「console.logが残っているので削除してください」と書けば、すぐにそのログ行を削除するコミットを行うでし (Devin AI review: is it better than Cursor?)9】。修正が完了すると「ご指摘の点を修正しました」と返信が付きます。

  5. マージとデプロイ: レビューの結果問題がなければ、プルリクエストをマージします。Devinは自動でマージまでは行わない（最終判断は人間に委ねる）設定になっている場合が多い (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)6】。人間が内容を確認してOKであればMergeボタンをクリックしましょう。これでコードがメインブランチに反映され、次のデプロイステップで本番環境に適用されます。

このような流れで、新機能の追加や改良をタスク単位で繰り返していきます。まさに開発者とペアプロしているような感覚ですが、煩雑なコーディング作業はAIに任せ、人間は要件定義と最終チェックに注力できます。ポイントは一度に欲張りすぎないことです。人間のエンジニアと同様、あまりに大量の変更を一度に依頼するとミスの原因になります。機能は小さく区切り、動くものを早く作ってもらい、こまめに確認・修正を積み重ねるのがコツです。

また、Devinは作業中に迷ったことがあれば「○○についてはどのように実現すべきか？」とこちらに選択肢を提示して尋ねてくることがあり (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)6】。例えばUIデザインの詳細や、既存データがない場合の初期表示などです。そうした場合はSlack上で適宜回答し、一緒に方針を決めていきます（Devinが自律的に相談してくれるのは非常に心強い点 (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)6】）。

Devinとの開発サイクルに慣れてきたら、次のようなことも可能です:

  • ドキュメント生成: 「この機能の簡単なマニュアルを書いて」と依頼すれば、READMEや別ドキュメントにユーザー向け説明を書いてくれるかもしれません。

  • テストコード作成: 「主要な機能に対するユニットテスト/統合テストを書いて」と依頼すれば、Jestなどを用いたテストコードを追加させることもできます。AIはテスト生成も比較的得意なので、安心材料として活用しましょう。

  • リファクタリング: 「コードの重複をリファクタして」「パフォーマンス改善して」等の依頼にも対応できます。ただし大規模なリファクタリングは一度に変更範囲が広くなるため、部分的に依頼して段階的に行うのがおすすめです。

以上、AI駆動での実装フローを見てきました。プログラミングの生産作業をAIが担い、人間はディレクター兼プロダクトマネージャーのような立ち位置になります。これにより、今までエンジニア不足で着手できなかった多くの開発タスクが大幅に加速できる可能性が見えてき (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)2】。必要なのは明確なビジョンと適切な指示を出すコミュニケーションスキルであり、コードそのものはDevinが高い生産性で生み出してくれるのです。

では、出来上がったアプリケーションをユーザーに届けるため、最新のデプロイ方法を設定しましょう。

5. モダンなデプロイ環境 – Vercel等を用いた自動デプロイ

開発したWebアプリを社内やユーザに公開するには、デプロイ（ホスティング）環境が必要です。ここでは先述のとおりVercelを使ったデプロイ手順を解説します。他にもRailwayやRenderといった選択肢がありますが、それらとの比較も交えつつ、2025年現在最も開発フローに適した方法を提案します。

  • RailwayやRenderとの比較:
    他のモダンホスティングとしてRailwayやRenderも人気があります。RailwayはDockerコンテナを用いたバックエンドサービスのデプロイを簡易化しており、データベースやRedisなどもワンクリックでセットアップできるプラットフォーム (Railway vs Vercel)6】。一方、RenderはキャッシュやDB、CronジョブやバックグラウンドWorkerまで幅広いマネージドサービスを提供し、無料枠も比較的手厚い (Render vs Vercel)8】。両者ともVercelに比べてサーバフルなサービス（常時稼働するサーバプロセス）に向いており、Node.jsやDjangoの常駐バックエンド、WebSocketサーバなどを構築したい場合に適してい (Railway app Vs vercel pricing : r/nextjs - Reddit)2】。しかし、本記事のようにNext.js（＝フロントエンド）とSupabase（＝マネージドDB&BaaS）という構成では、特別な常駐サーバは不要です。サーバレス関数で事足りるため、よりシンプルなVercelが合致しています。加えて、VercelはNext.jsにファーストクラスサポートがあり公式テンプレートも豊富 (Supabase + Vercel Partnership)1】。2024年のSupabase連携パートナーシップにより、Vercel上からSupabaseプロジェクトを管理できる統合も進んできてい (Supabase + Vercel Partnership) (Supabase + Vercel Partnership)7】。以上の点から、本プロジェクトではVercelを採用するのが最適と判断しました。

  • 本番環境での動作確認:
    Vercelデプロイ後、実際に公開URLにアクセスしてアプリが期待通り動作するか確認します。例えば先ほど実装したTodo機能であれば、フォームから新しいTodoを投稿し、ページを再読み込みしてもデータが保持されて一覧表示されるか試します。Supabaseのデータが正しく読み書きできていれば成功です。もしここでバグが見つかった場合も慌てる必要はありません。すぐにDevinに「本番環境で○○の不具合が起きている」と伝えれば、原因を調査して修正コードを上げてくれるでし (Devin AI review: is it better than Cursor?)8】。修正をマージすれば数分後にはデプロイが更新され、不具合が解消されるはずです。

以上で、開発したWebアプリケーションを本番環境に公開する手順が完了しました。サーバやインフラ構築に煩わされることなく、最新のクラウドサービスを組み合わせてデプロイまで自動化できました。AI駆動開発とサーバレスプラットフォームの組み合わせは、お膳立てから公開までを飛躍的にスピードアップしてくれることがお分かりいただけたと思います。

6. 運用・改善の自動化ワークフロー – GitHub ActionsとDevin活用

プロダクトがひとまずリリースできたら、次は運用フェーズです。運用段階でもAIと自動化の力を最大限活用し、継続的な改善を効率よく行いましょう。

  • Dependabotやコード分析ツールの導入:
    依存ライブラリのアップデート提案にはGitHubのDependabotが便利です。リポジトリ設定で有効化しておけば、npmパッケージに更新があるたびに自動でプルリクが作成されます。これもDevinを使えば、アップデート内容への対応（例えばBreaking Changeがあった場合の修正）も自動化できるでしょう。セキュリティスキャンやLintチェックも、Actions上でCodeQLやESLint用のアクションを設定すれば自動実行できます。最初から完璧に整える必要はありませんが、徐々にCIを強化して「人手による見落とし」を減らす工夫をしていきます。

  • 機能追加・改善の継続:
    運用中に新たな機能要求や改善点が出てきた場合も、引き続きDevinが強力な味方になります。例えばプロダクトの利用者からフィードバックを受けたら、それをもとに新機能の仕様をまとめ、Devinに実装を依頼しましょう。小さな改良であれば、GitHubのIssueに要件を書き、Devinに「Issue #10 を解決してください」と伝えるだけでも対応してくれるかもしれません。実際、Devinをチームの一員として扱い、タスク管理ツール上のチケットを割り当てて開発させるケースも考えられます。Slack経由の指示でもIssueベースの指示でも、最終的にコードをコミット・プッシュしてくれるので、通常の開発フローと変わりません。違いがあるとすれば、タスク完了までのサイクルが驚くほど短くなることでしょう。Devin導入前は数日かかっていた修正が数十分で終わる、といったことも十分起こり得 (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)2】。

  • 人間とAIの協調:
    AIエージェントがこれだけ活躍するようになると、「人間のエンジニアはもう不要なのか？」という声もあります。しかし実際には、人間の洞察や創造力は依然として重要です。Devinはあくまで与えられた指示に忠実に従う存在ですので、何を作るか、どのようなユーザ体験にするか、といった本質的な部分はビジネスサイドの企画力にかかっています。また、AIが出力したアイデアではなくオリジナリティのある機能や、まだ学習データにない新規性の高い実装などは、人間がリードしなければなりません。したがって**「AIに任せる部分」と「自分で考える部分」を明確に分けて、生産性と独創性のバランスを取る**ことが大切です。その上で、任せられる部分はどんどんDevinに任せてしまうのが賢明でしょう。著者の体感としても、Devinを利用することで開発生産性が飛躍的に向上してい (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)2】。

最後に、DevinのようなAIエージェントを最大限活用していくことは、エンジニアリングの理想形にも近づいていくと言えます。それは「ビジネスサイドが実現したいことを、可能な限りコードを書かずに迅速に実現する」 (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)2】です。コードを書くこと自体は目的ではなく手段である――この考えに立てば、手段は人間が書いたものであれAIが書いたものであれ、達成すべき価値さえ実現できていれば問題ありません。むしろAIによって開発が民主化されることで、これまでエンジニア不足で埋もれていたビジネスアイデアがどんどん形になる世界が訪れようとしてい (ソフトウェアの民主化。誰でもアプリ開発が可能となる。Devinを見逃すな！！｜ちょむのすけ)6】。

本記事で提案したAI駆動開発のフローは、2025年2月時点でのベストプラクティスの一例 (Webアプリ開発の変遷：2000年～2023年までの手動開発、2024年以降のAI駆動開発の普及（2025年2月） #ポエム - Qiita)5】。まとめると:

となります。これからAI駆動開発を始める方は、ぜひ本記事の手順を参考に、まずは小さなプロジェクトからDevinとの開発を体験してみてください。最初は戸惑うかもしれませんが、AIエージェントとの共同作業に慣れれば、その効率の高さに驚くはずです。「コードはAIに書かせて、あなたはビジネスロジックを考えることに集中する」——そんな新時代の開発スタイルをぜひ体感してみてください。きっとプロダクト開発のスピードと質が大きく向上することでしょ (完全自律型AIエンジニア「Devin」が切り開くAI駆動開発の可能性 #生成AI - Qiita)2】

いいなと思ったら応援しよう！

この記事が参加している募集

#寒い日のおすすめ

8,896件