azukiazusa.dev

Web Developer

Hey, I'm azukiazusa👋

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

ブログを読む About me
#MCP
#アクセシビリティ
#claude-code
#agent skills
#codex
#Web API
#Cloudflare
#A2A
#Generative UI
#moonbit
#figma
#MCP Apps
#claude
#Web Components
#Jev
#Slack
#Flue
#Hermes Agent
#json-render
#canvas
#discord
#WebMCP
#TanStack
#nextjs
#Vercel
#Mastra
#ESLint
#Prisma
#Open UI
#React Aria
#AI SDK
#モノレポ
#パスキー
#仕様駆動開発
#コンテキストエンジニアリング
#触覚フィードバック
#Void
#MyGo
#TanStack Redact
#TanStack Charts
#DevTools
#WebRTC
#Safari
#Feature Flags
#eve
#Zed
#Grok
#openui
#SwiftUI
#ios
#A2UI
#github-cli
#apm
#difit
#kanban
#cline
#Vite+
#skill-creator
#agent skill
#WebHaptics
#paper
#chat-sdk
#Entire
#Remotion
#luna
#signals
#Pencil
#TUI
#OpenTUI
#agent-browser
#motia
#lsp
#react-grab
#TanStack AI
#URLPattern
#Apps SDK
#cagent
#AP2
#CI/CD
#Vibe Kanban
#POML
#MCP UI
#Qwen3-Coder
#serena
#Kiro
#Container Use
#v0
#vibe-coding
#AG-UI
#VoltAgent
#React Router
#ink
#llms.txt
#Baseline
#standard-schema
#WebAuthn
#Web Socket
#vlt
#OpenFeature
#Herms Agent

最新記事

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. 最近の AI コーディングで実践している、設計を中心とした開発の進め方
  5. GitHub Actions の依存関係を lockfile で固定する
  6. react-devtools-cdt-mcp で AI エージェントが React のコンポーネントツリーを調べられるようにする
  7. エディタを Zed に乗り換えてみた
  8. Go でデスクトップアプリを作る MyGo を試してみた
  9. 新しいデザインツール Pencil を試してみた
  10. 自然言語で操作し、結果を検証するテストフレームワーク e2e

ショート

azukiazusa

azukiazusa

Codex のネットワークアクセス設定

azukiazusa

azukiazusa

Codex Hooks で終了時に通知を出す

azukiazusa

azukiazusa

Codex の smart_approvals で承認の負担を軽減する

azukiazusa

azukiazusa

browserslist で Baseline を設定できるようになった

もっと見る

登壇資料

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

すべての登壇資料を見る