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

Last updated at 2025-05-18Posted at 2025-05-06

はじめに

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

試して見た事

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

次に試して見たのは、

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

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

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

次に試してみたこと

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

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

デバックを依頼

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

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

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

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

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

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

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

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

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を使って、内部の動作が正しいか検証してください」

結果

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

「各ユーザの情報に電話番号を追加して、表示して。」

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

Continueします

結果

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

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

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

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

修正されました。

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

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

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

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

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

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