azukiazusa.dev

Web Developer

Hey, I'm azukiazusa👋

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

ブログを読む About me
#AI
#claude-code
#MCP
#アクセシビリティ
#agent skills
#A2A
#OpenAI
#codex
#moonbit
#figma
#Web API
#claude
#Generative UI
#discord
#TanStack
#MCP Apps
#Mastra
#ESLint
#Prisma
#Open UI
#Web Components
#React Aria
#Chrome
#設計
#開発
#Tailwind CSS
#Zed
#Hermes Agent
#Grok
#openui
#SwiftUI
#ios
#A2UI
#json-render
#github-cli
#apm
#canvas
#difit
#kanban
#cline
#Vite+
#skill-creator
#agent skill
#WebHaptics
#触覚フィードバック
#paper
#chat-sdk
#Entire
#WebMCP
#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
#nextjs
#vibe-coding
#AG-UI
#VoltAgent
#React Router
#Vercel
#Cloudflare
#ink
#llms.txt
#Baseline
#standard-schema
#パスキー
#WebAuthn
#Web Socket
#vlt
#OpenFeature
#axe-core
#Farm
#Effect-TS
#MistCSS
#Waku
#SafeTest
#Conform
#TypeSpec
#Herms Agent

最新記事

実装前に設計を徹底的にインタビューし、要件を明確にするためのスキル `/grill-me`

コーディングエージェントの自律性が向上し、並行して複数のエージェントを動かすことが当たり前になってきた今、エージェントの動きを逐一監視することは現実的ではなくなっています。そのため実装前に人間と AI の間で共通理解を形成することが重要になっています。この記事では、実装前の設計フェーズで要件を明確にし、人間と AI の間で共通理解を形成するためのスキル `/grill-me` について紹介します。

`/goal` コマンドの活用例: Vitest の実行時間を 6 倍高速化した話

Vitest の `isolate: false` オプションを有効にすることで、テストの実行時間を大幅に短縮できましたが、その際に大規模なコードの修正が必要でした。Claude Code の `/goal` コマンドを活用することで、最終的なゴールを達成するために必要なステップを自律的に判断して実行させることができます。この記事ではその経験について紹介します。

エディタを Zed に乗り換えてみた

Zed は Rust で書かれたネイティブアプリケーションで、非常に高速な動作と軽量な設計が特徴の新しいエディタです。この記事では、Zed のインストール方法と、実際に使ってみて感じた主要な機能や特徴について紹介していきたいと思います。

すべての記事を見る

人気記事

  1. 実装前に設計を徹底的にインタビューし、要件を明確にするためのスキル `/grill-me`
  2. エディタを Zed に乗り換えてみた
  3. Claude Code から Codex を呼び出すためのプラグイン codex-plugin-cc
  4. Claude Code の Dynamic Workflow を試してみた
  5. `/goal` コマンドの活用例: Vitest の実行時間を 6 倍高速化した話
  6. Claude の Advisor tool を活用して性能とコストのバランスを最適化する
  7. コーディングエージェントの現状の整理とエンジニアの仕事の変化について
  8. Figma MCP でデザインシステムを提供して AI コーディングエージェントに一貫したフロントエンドコードを書かせる
  9. AI エージェント向けのパッケージマネージャー apm
  10. 新しいデザインツール Pencil を試してみた

ショート

azukiazusa

azukiazusa

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

azukiazusa

azukiazusa

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

azukiazusa

azukiazusa

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

azukiazusa

azukiazusa

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

もっと見る

登壇資料

  1. 2026

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

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

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

  3. React Tokyo Fes 2025

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

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

  4. KMC交流会 LT

    学生時代に熱中したことが、社会人の今も生きている話

    学生時代に麻雀に熱中した経験から得た「上達のスキーマ」が、社会人になってからのプログラミング学習にも通じるという話。書籍での体系的な学習、プラトーの乗り越え方、生涯学習の大切さについて紹介します。

すべての登壇資料を見る