1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AIにWEBアプリの実装からテストまで完全自動で作らせてみた!

1
Last updated at Posted at 2026-04-14

1. MCPサーバーってスゴイと思うんだけど…

最近 私はMCPサーバーの虜でして、暇さえあれば世の中にどんなMCPサーバーがあるのか調べています。

面倒なAPIを使わずとも様々なサービスと簡単にAI連携ができるので、どうにかして私の業務をAI×MCPに任せられないかと日々妄想しています。

ですが、お客様目線ではMCPサーバーはAPIと同じただの連携できるツールであり、それ自体がお金を生み出せるわけではないので、まだまだ魅力的に映っていないという意見もいただきました。

確かにそりゃそうだ。


となると求められるのは、AI×MCPでどこまで作業を効率化/短縮できるのかという点です。

あわよくば、一つの指示のみで複数サービスを相互に連携させ、人の介入なしで目的達成まで自律的に動くAIエージェントを実現することだと思いました。

MCPサーバーはいわゆるAIの手足のようなものなので、複数組み合わせることでよりAIが自律的に駆動できるようになります。

今回はMCPサーバーを複数使用して、AIにWEBアプリの環境用意から実装、テストまでをノンストップ完全自動で実施させてみました。


2. 今回AIに自動で実施させたいこと

  • PHP, HTML, CSS, JS + MySQL によるWEBアプリ(ログイン機能)の構築
  • DockerでWEBコンテナ、DBコンテナの構築
  • E2Eの自動認証テスト実行

image.png


3. 課題

これらを実現するためにぶつかるであろう壁は下記と考えています。

課題 対応方針
ソースコードの作成 AIで生成できそう!
ソースコードをローカルPCに配置 人がコピペすればできるが、AIが自分のPCにファイルを作成することはできない
Dockerコンテナの立ち上げ ターミナルでdockerコマンドを実行する必要があるが、AIがPC上でコマンドを実行する権限も操作する手段もない
テストのためのブラウザ操作 Playwright MCPサーバーを使えばできそう!

4. 使用したMCPサーバー

  • filesystem MCPサーバー: PCのディレクトリ内でAIがファイルの作成や編集などを実行できる(AIが作業できるディレクトリは指定可能)
    • AIが作ったソースコードを自分のPCに配置できる
  • command-executor MCPサーバー: PCでLinuxコマンドを実行できる(lsやcd、dockerコマンドなど)
    • dockerコマンドを実行してコンテナを立ち上げられる
  • playwright MCPサーバー: ブラウザでWEBアプリの操作やスクリーンショットの取得ができる
    • ブラウザを操作してテストを実施できる

5. AIに依頼したい作業

  • /home/mcp 配下で作業を行うこと(WSL2)
  • Dockerfile と docker-compose.yml を作成すること
  • PHP, HTML, CSS, JS のソースコードを生成すること
  • ログイン画面と認証成功画面を作成すること
  • メールアドレス/パスワードのバリデーションを組み込むこと
  • 初期のログイン用アカウントは下記とすること
  • MySQL 環境変数は下記とすること
    • MYSQL_USER: tenda_user
    • MYSQL_PASSWORD: tenda_pass
  • dockerコマンドを実行してコンテナを立ち上げること
  • 単体テスト(メール/パスワードのバリデーションとDB認証)
  • テスト結果はスクリーンショットを取得すること
  • テスト観点・テストパターンを列挙すること

6. プロンプト

あなたはDockerを使用したWebアプリ構築のスペシャリストです。
下記[手順 #]に従って[要求 #]を満たしてください。
[利用可能なMCPサーバー #]を使用してください。

# 手順
1. 「/home/mcp」の配下にDockerfileやdocker-compose.ymlを作成する
2. 「/home/mcp/src」の配下にPHP, HTML, CSS, JSのコードを用意する
3. 「docker compose -f /home/mcp/docker-compose.yml up -d」でコンテナを立ち上げる
4. 「ip addr show eth0」コマンドを実行してinetを確認する
5. inetで確認したIPにアクセスしてログイン画面が表示されることを確認する
6. ログイン機能のテストを行うためにテストパターンを用意する
7. テストを実施する(スクリーンショットを取得する)

# 要求
- WSL2で作業すること
- 「/home/mcpディレクトリ」配下で作業すること
- DockerでPHP, HTML, CSS, JSとMySQLを使用したWebアプリを構築したい
- Dockerfileやdocker-compose.ymlを作成してください。
- ログイン画面と認証成功画面を用意する
- DBやJSによるメールアドレス、パスワードのバリデーション機能
- ログインするためのメールアドレスは「yamada_taro@tenda.co.jp」でパスワードは「test123」
- MySQLのMYSQL_USERは「tenda_user」、MYSQL_PASSWORDは「tenda_pass」
- メールアドレスのバリデーションとDBに保存されているメールアドレスとパスワードでの認証が適切に実施されるログイン機能の単体テスト
- テスト結果はスクリーンショット取得してください。
- テスト観点やテストパターンを最後にリストアップしてください。

# 利用可能なMCPサーバー
- filesystem MCPサーバー: ファイル操作が可能。使用時は必ず「/home/mcpディレクトリ」配下で作業すること
- command-executor MCPサーバー: Linuxコマンドを実行可能であるが、必ず絶対パスで利用すること。
                                  「docker compose -f /home/mcp/docker-compose.yml up -d」でコンテナを立ち上げて利用する
- playwright MCPサーバー: ブラウザを操作できる。単体テストに使用可能。ブラウザのスクリーンショットを取得可能。
                          WSL2で実行するため、ブラウザアクセス時は「ip addr show eth0」コマンドを実行して、inetを確認すること

7. AIの作業過程

上記プロンプトを送信することで、以下の作業が全て自動で実行されます。

まずは、filesystem MCPサーバーで /home/mcp 配下にsrcディレクトリを作成する。

image.png

続いて、Docker関連のコードと各WEBアプリ用のソースコードを作成していきます。

image.png

これらのファイルはfilesystem MCPサーバーで /home/mcp 配下に作成されていきます。

全てのソースコードの用意が完了したら、command-executor MCPサーバーを使用してdockerコマンドを実行します。

画像2.png

パスが違ったようで一度失敗しましたが、WSL2で作業していることを思い出して、フルパスでコンテナ起動コマンドを実行してくれました。

(WindowsはWSL2を使用しないと、アプリの動作が遅いので困ったものです…)

http://localhost/ ではアプリにアクセスできないので、ipコマンドを実行して一度WSL2のIPアドレスを確認しています。

image.png

WSL2のIPアドレスでログイン画面にアクセスできましたね!

続いてplaywright MCPサーバーを使用して、ログイン機能のテストを自動で実行させます。

image.png

上記以外にも「存在しないユーザーでの認証エラー」や「正しいユーザーで間違ったパスワードでの認証エラー」、「空のフィールドでの送信テスト」なども実施してくれました。

最後にテスト結果のサマリーとディレクトリ構成を出力して、一連の作業完了です。

image.png

これでテストも完了したWEBアプリの実装完了です!

やった!


9. まとめ

今回は、指示一つで環境構築から実装、テストまで全て自動で実施してくれるAI環境を、MCPサーバーを組み合わせて実現してみました。

1年前、数年後にはAIが自動でシステムを作ってくれる日がくるかもね。という話をしていましたが、もう誰でも簡単にできてしまう時代が来たみたいです…

とは言え、プロンプトの内容は明確に指示する必要がある点やAIの実行回数にも制限があるため、まだ大規模なシステムが組めるわけではありません。

1年も経てば、もしかすると我々が作っているようなシステムが設計書を添付するだけで、インフラもアプリもDBも用意して、機能テストも完璧に実施してしまうAI環境が出来上がるかもしれませんね。

そう考えると、むしろ現在稼働中のWEBアプリが他のサービスやAIと連携できるよう、独自のMCPサーバーを開発する受託業務をやると良いかもしれません!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?