Claude CodeとTidewaveでPhoenix LiveViewアプリをリファクタリング

私はこれまでAIコーディングツールに対して概ね懐疑的でした。多くのコード生成は「一見正しく見えるが、実行すると壊れる」というカテゴリに終わることが多かったからです。

しかし最近、サイドプロジェクトのリファクタリングに、Claude CodeとTidewave（Phoenixプロジェクト専用に作られたMCPサーバー）を組み合わせて使ってみました。実際のワークフローがどう機能したか、正直に振り返ります。

目標：DaisyUIへのリファクタリング

私はPhoenix LiveViewアプリを運用しており、カスタムのガラスモーフィズムCSSのメンテナンスが面倒になっていました。複数のビューを標準的なDaisyUIコンポーネントに刷新したかったのです。具体的には、よりすっきりしたヒーローセクション、標準的なタブ、適切なフォーム入力、レスポンシブなテーブルです。

各テンプレートを手作業で書く代わりに、Claude CodeとTidewaveを試すことにしました。

Claude CodeをTidewaveに接続する

Claude Codeを起動する際、MCP（Model Context Protocol）サーバーに接続できます。

私のセットアップでは、コンテキストとエラートラッキングツールとともにTidewaveを設定しました。

TidewaveはClaudeにPhoenixアプリケーションの構造（スキーマ、ルーター定義、LiveViewコンポーネント）への直接的なコンテキストを提供します。つまり、スキーマやヘルパー関数を手動でプロンプトに貼り付ける必要がなくなります。

複雑なビューでのテスト

メンバープロフィールのLiveView（lib/pulse_board_web/live/member_live/show.ex）でセットアップをテストしました。

「lib/pulseboardweb/live/member_live/show.exが良くないので、daisyUIを使ってモダンでUI/UXの良いものにしてください」

Claudeはタスクを体系的に分解しました。

ヒーローヘッダー、メトリクスカード、タブナビゲーション、フィルターフォーム、モバイル対応テーブルにわたって、カスタムCSSをDaisyUIクラスに体系的に置き換えていきました。

さらに、差分のステージング、説明的なコミットメッセージの作成、リモートへのプッシュまで処理してくれました。

うまくいった点

初回精度の高さ：Tidewaveがスキーマとコンポーネントのコンテキストを提供したため、生成されたHEExテンプレートとPhoenixイベントハンドラーは、assignエラーなしで動作しました。
UIモダナイゼーションの速さ：複数のコンポーネントにわたるカスタムCSSクラスのDaisyUIへの置き換えは、手作業で書く場合の数分の一の時間で完了しました。
より良い慣用的パターンを学ぶ：生成されたLiveViewコードをレビューすることで、自分では思いつかなかったクリーンなDaisyUIコンポーネントの組み合わせに触れることができました。

実際の制限と欠点

トークンコストはすぐに膨らむ：大規模なコードベースでの多用は、APIの制限をすぐに使い切ってしまいます。毎日の集中的な反復作業では、コストが月額100〜200ドルに簡単に達することがあります。
過剰リファクタリングの傾向：小さなスタイル調整を依頼しただけで、Claudeがコンポーネント構造全体を書き直してしまうことがあります。意図的なエッジケースの処理が削除されていないか、差分を注意深く確認する必要があります。
プロンプトの精度は依然として重要：曖昧なプロンプトは、やはり一般的なレイアウトを生み出します。最良の結果は、具体的なコンポーネントタイプ（例：「daisyUIのカードとタブを使用」）を指定したときに得られました。

まとめ

Claude CodeとTidewaveのようなプロジェクト認識型MCPツールを組み合わせることで、一般的なチャットベースのコード生成と実際のプロジェクトレベルの開発との間のギャップを大幅に埋めることができます。アーキテクチャを理解する必要性がなくなるわけではありませんが、LiveViewアプリケーションの構築やリファクタリングにおける反復的なボイラープレート作業の多くを削減してくれます。