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

はじめに

この記事を参考にして、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>

まとめ

• Tiedwaveがあると、CopilotがMCPを通じて、問題点の切り分けを行う事ができる。
• ソートできない原因を、どの段階で問題が起きているのかMCPを使って切り分けをしている事を確認した。
• 適切に修正されていた。人が行うのと同じような手順をおこなってる。