CopilotにTidewaveを与えたら、デバックが楽ちんだった経験談

# はじめに

https://qiita.com/RyoWakabayashi/items/a8f39f14781e7f51b6ee

この記事を参考にして、Tidewave Phoenixを使ってみました。

# 試して見た事

先ずは、@RyoWakabayashi さんの記事にもある、「users テーブルに登録されているデータを表示して」
を試してみました。ちゃんと想定したような応答がえられました。

次に試して見たのは、

「usersに100人のダミーデータを作成して登録して。名前は、日本人の典型的な名前でランダム、ユニークなものにして。年齢も適当に生成。」

一件追加するごとに実行してよいかの確認が表示されて、実行できました。面倒だったので途中からは、全部実行許可しましたけど。

これは便利。
MCPつないだだけで、使い方も理解してるんですね。

# 次に試してみたこと

「年齢順にソートするボタンを追加」

結構いい感じのコード修正が行われました。しかし、ボタンを押してもソートされませんでした。

# デバックを依頼

「ボタンを押しても何もかわりません」と伝えてみました。

このプロンプトに対してしばらく考えた後、修正されて、ソートが動作するようになりました。
おお。すごい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/0bca59fd-5e30-46f1-9daf-08eef5c67bdf.png)

"reset: true"の記述が無くて、表示が更新されないのが原因でした。

# MCPサーバで何をしたか聞いてみた

一体どうやって解決したのか、
「この調査を行う為にMCPサーバにどのような問い合わせをしたのか教えてください。」
聞いてみた


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/2d4d39ac-8190-4700-b543-19d16ac6355c.png)

順を追って動作を確認している！

# ソートボタンを追加の差分

```diff_elixir:lib/my_tidewave_app_web/live/user_live/index.ex
 
     {:noreply, stream_delete(socket, :users, user)}
   end
+
+  @impl true
+  def handle_event("sort_by_age", _params, socket) do
+    sorted_users = Accounts.list_users() |> Enum.sort_by(& &1.age)
+    {:noreply, stream(socket, :users, sorted_users, reset: true)}
+  end
 end
```

```diff_elixir:my_tidewave_app_web/live/user_live/index.html.heex b/lib/my_tidewave_app_web/live/user_live/index.html.heex
     <.link patch={~p"/users/new"}>
       <.button>New User</.button>
     </.link>
+    <.button phx-click="sort_by_age">Sort by Age</.button>
   </:actions>
 </.header>
``` 

# DBの状態を検証してみる。

「ユーザ一覧を取得した時のMCPserverを使って、内部の動作が正しいか検証してください」

結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/4465f437-6f3d-4d2d-8ad6-5047847885a2.png)

# ユーザ情報に電話番号を追加してみる

「各ユーザの情報に電話番号を追加して、表示して。」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/1307a960-501e-4af9-9fed-2588b0efb884.png)

MCPを使って、DBにALTER TABLEを実行して電話番号のカラムを追加してきました。
```
{
  "query": "ALTER TABLE users ADD COLUMN phone_number varchar(20);",
  "repo": "MyTidewaveApp.Repo"
}
```
実行してよいか聞かれて、許可してしまったんですが、DBを直接操作するのではなくて、マイグレーションファイルを作ってやりたいですよね。

「Phoenexのフレームワークのマナーに従て追加したいので、この方法はリバーとします。
ALTER TABLEはもとに戻してください。」

戻してもらいました。
改めて、指示してみます。

「各ユーザの情報に電話番号を追加して、表示して。
Phoenexのフレームワークのマナーに従て追加してください。
ユーザの編集画面なども変更してください。」

マイグレーションファイルが作成された。
```
defmodule MyTidewaveApp.Repo.Migrations.AddPhoneNumberToUsers do
  use Ecto.Migration

  def change do
    alter table(:users) do
      add :phone_number, :string
    end
  end
end
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/d2da4eb2-e931-441d-8b3d-06b74b4bbda9.png)

Continueします

結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/a4a865e4-5bc2-41e3-8253-49d3396d1984.png)

画面をみてみると、電話番号追加されていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/4a3358fe-38d7-40ee-92b2-95c5a8fa253c.png)


しかし、ユーザ画面に電話番号が表示されてなかった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/932fb637-b542-4131-9aa4-2cb360c31c83.png)

あえてこの事実を伝えず、気づくか調べてみる。

「現在提供されているすべての画面に対して電話番号の追加ができているかレビューしてください。」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/f897b5d3-5c1e-4ab3-abfa-3ff036b445db.png)

修正されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/de981794-1e8d-459c-9cef-0f7aefd0d8a8.png)

「この電話番号の追加でMCPserverを使用ていたら、その内容を説明してください。」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/a3567389-3180-4205-a48a-258248d97009.png)

電話番号の追加では、MCPサーバを使う状況はなかったようです。

「電話番号の欄にランダムな電話番号っぽい値をいれてください。すべてのユーザ対して実施して。」

電話番号をいれておきます。

# ソートボタンを追加してみる

「ユーザの一覧の年齢の列に年齢の大きい順か小さい順にソートしてするボタンを追加してください。
ボタンは　▽と△で△を押すと場合小さい順、▽を押すと大きい順でソートされるようにしてください。
このボタンは、ユーザ一覧の表の年齢のヘッダー部分に、ソート機能を表現するのに一般的に用いられているアイコンを使って下さい。
現在ある、ソートボタンは削除してください。」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/d232de4d-186f-4d47-8052-be4746c8604b.png)

結果は、うまくいってません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/affd9a10-6db5-43b2-95da-7d6fbe431921.png)

「エラーが発生しています。修正した内容に問題がないかMCPserverを使って実際の動作を確認して、修正してください。」

MCPServerを使うことを提案せず、不具合の状況を伝えただけの場合は、エラーの状況を伝えて、Agentが直すという操作を数回繰り返す必要がありました。今回は、MCP Serverを使って確認することを指示してみます。

結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/c8f4bde7-b6a8-43cd-b354-e6c894820f6a.png)

順を追って、動作を確認してます。
指示した通りの画面になってました。▽△のボタンも機能しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/572ece9d-e8a9-4068-ae53-31c68d2a590b.png)

どのような修正をしているか見てみます。

最初に見つけた修正点

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/ce8745f3-f465-4271-af84-e974e9e32aa0.png)

次に見つけた修正点

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/c0f18c44-acbf-4711-816b-3e6e552c8409.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/46b8dac2-712e-46d8-b46b-bea4d2cc6bb6.png)

「この修正でMCPserverをどのように使い、何を確認したのか順に説明してください。」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/a9f13f88-a204-4120-b946-f604b15f535f.png)


# まとめ

- Tiedwaveがあると、CopilotがMCPを通じて、問題点の切り分けを行う事ができる
- ソートできない原因を、どの段階で問題が起きているのかMCPを使って切り分けをしている事を確認した
- 適切に修正されていた。人が行うのと同じような手順をおこなってる
- 適切に指示しないと、マイグレーションファイルを作らないでDBを直接書き換える等あるので注意。方針は適切につたえないといけない

# 参考

この記事で作成したソース

https://github.com/masahiro-999/my_tidewave_app.git