Web Developer

Hey, I'm azukiazusa👋

週に1回 Web 開発に関する記事をお届けします。フロントエンドに関する分野の記事が中心です。

最新記事

AI SDK の MCP Events 対応で MCP サーバーからのイベントを Webhook で受け取る

MCP のクライアントがサーバー側の変化を知るには、ポーリングするか接続を張り続ける必要がありました。MCP Events はサーバーが購読者へイベントを通知するための実験的な拡張で、poll、push、webhook の 3 つの配信モードを定義しています。この記事では MCP Events の概要を説明したうえで、AI SDK の webhook モードの対応を使ってイベントの購読から受信、購読の更新と解除までを試します。

react-devtools-cdt-mcp で AI エージェントが React のコンポーネントツリーを調べられるようにする

Chrome DevTools MCP で AI エージェントはブラウザを操作できますが、DOM からはどのコンポーネントが描画したのか、なぜ遅いのかがわかりません。react-devtools-cdt-mcp はページで import すると、コンポーネントツリーやレンダリング時間を調べるツールを Chrome DevTools MCP に登録する実験的なライブラリです。仕組みとセットアップ、各ツールの出力、Claude Code による調査を試します。

人気記事

  1. エージェントスキル集 pstack の開発原則と使い方
  2. Void でフルスタックアプリを構築して Cloudflare にデプロイする
  3. Claude Code の Mods で Claude Code 自身に機能を追加する
  4. GitHub Actions の依存関係を lockfile で固定する
  5. 最近の AI コーディングで実践している、設計を中心とした開発の進め方
  6. エディタを Zed に乗り換えてみた
  7. Go でデスクトップアプリを作る MyGo を試してみた
  8. 新しいデザインツール Pencil を試してみた
  9. react-devtools-cdt-mcp で AI エージェントが React のコンポーネントツリーを調べられるようにする
  10. 自然言語で操作し、結果を検証するテストフレームワーク e2e

ショート

azukiazusa
azukiazusa
azukiazusa
azukiazusa

登壇資料

  1. 2026

  2. リファクタリングのためのトークン節約術

    ボーイスカウトルールでメモリやスキルを改善しよう

    エージェントがより効率よくタスクを達成できるように、日常のタスクの中で徐々にメモリやスキルを改善していこうという話です。

  3. フロントエンドカンファレンス名古屋 2026

    フロントエンドの相手が変わった - AIが加わったWebの新しいインターフェース設計

    フロントエンドエンジニアがこれまで向き合ってきた相手は人間でしたが、AIの登場によってその前提が変わりつつあります。AIがWebの出力者になる(ストリーミングUI、MCP Apps)ことと、AIがWebの消費者になる(Markdown配信、WebMCP)という2つの変化を軸に、AI時代のWebインターフェース設計を考察します。

  4. React Tokyo Fes 2025

    コーディングエージェントにフロントエンドを書かせるとき、フィードバックはどのように与えるか?

    LLMベースのコーディングエージェント(Claude Code、Codexなど)が普及しているが、LLMの反復改善プロセスにおいて、コード実行結果のフィードバックがなぜ不可欠です。バックエンド開発では実行結果やテストを通じて即座にフィードバックを得られる一方、フロントエンド開発では独特の課題が存在します。本発表では、コーディングエージェントがフロントエンドコードを生成する際の「フィードバックループの問題」に焦点を当て、実践的な解決策とそのトレードオフについて議論します。