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

最新記事

streamAppendHTML() で AI の回答を HTML のままストリーミング描画する

LLM の回答を逐次描画するとき、届いた文字列全体を毎回パースして DOM を置き換える実装では、要素が作り直され続けてテキストの選択状態が失われたりします。streamAppendHTML() は WritableStream を返し、届いた HTML を要素の末尾へ順にパースします。この記事では streamAppendHTML() の使い方とサニタイズの挙動について紹介します。

Claude Code で MCP Tasks と Elicitation を試す

Claude は MCP の Tasks と Elicitation に対応し始めました。Tasks は時間のかかるツール呼び出しをタスク ID とポーリングに分ける拡張で、Elicitation は処理の途中でユーザーに入力を求める仕組みです。この記事では 2 つの機能の基本を説明し、TypeScript SDK で実装した MCP サーバーを Claude Code CLI から呼び出した結果を紹介します。

Device Posture API と Viewport Segments API で折りたたみ端末の画面に対応する

Safari 27.1 では、iPhone Duo のような折りたたみ端末向けに Device Posture API と Viewport Segments API が機能フラグ付きで実装されました。Device Posture API で端末が折れているかを、Viewport Segments API で折り目によって分かれた画面の位置と大きさを取得できます。この記事では、2 つの API の仕組みと策定の経緯を説明し、折り目を避けるレイアウトの実装例を示します。

すべての記事を見る

人気記事

  1. エージェントスキル集 pstack の開発原則と使い方
  2. Claude Code で MCP Tasks と Elicitation を試す
  3. Void でフルスタックアプリを構築して Cloudflare にデプロイする
  4. 最近の AI コーディングで実践している、設計を中心とした開発の進め方
  5. OpenAI の Decisions API で問い合わせの分類と段階評価をする
  6. Claude Code の Mods で Claude Code 自身に機能を追加する
  7. react-devtools-cdt-mcp で AI エージェントが React のコンポーネントツリーを調べられるようにする
  8. Canvas 内に直接 HTML を描画できる HTML in Canvas API について
  9. Device Posture API と Viewport Segments API で折りたたみ端末の画面に対応する
  10. Claude Code から Codex を呼び出すためのプラグイン codex-plugin-cc

ショート

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

すべての登壇資料を見る