Web Developer

Hey, I'm azukiazusa👋

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

最新記事

`contrast-color()` 関数を使用した自動コントラスト調整

`contrast-color()` 関数は、指定した色に対して `white` もしくは `black` のどちらがより高いコントラスト比を持つかを自動的に判断し、適切な色を返す関数です。動的に色が変わる場合やユーザーがカスタムテーマを使用する場合など、常にコントラスト比を確保するのが難しい状況で役立ちます。

AI エージェントが UI を安全に生成して描画するためのプロトコル A2UI とは?

Google が提唱する A2UI(Agent-to-UI)プロトコルは、AI エージェントが安全に UI を生成してクライアントに送信し、クライアントがそれを描画するための標準的な方法を提供します。A2UI は、AI エージェントがテキストの応答を返す代わりに宣言的なコンポーネント定義を返すことにより、クライアントはネイティブなウィジェットを使用して安全に UI をレンダリングできます。

事前に定義した UI を AI に生成させる json-render を試してみた

AI に UI を生成させる Generative UI の手法が注目されています。しかし、AI の出力が予測不可能であるため、意図しない UI が生成されてしまうリスクもあります。json-render はあらかじめ定義したコンポーネントやアクションのカタログに基づいて AI に JSON を生成させることで、AI が誤った構造の UI を生成するリスクを減らし、アプリケーションの一部として自然に統合された UI を提供するフレームワークです。

人気記事

  1. gh コマンドでエージェントスキルをインストール・管理できるようになった
  2. 事前に定義した UI を AI に生成させる json-render を試してみた
  3. AI エージェント向けのパッケージマネージャー apm
  4. Claude Code から Codex を呼び出すためのプラグイン codex-plugin-cc
  5. Claude Code to Figma を使ってコードから Figma デザインを生成する
  6. 新しいデザインツール Pencil を試してみた
  7. 大規模にエージェントを構築する Claude Managed Agents を試してみた
  8. Claude の Advisor tool を活用して性能とコストのバランスを最適化する
  9. Canvas 内に直接 HTML を描画できる HTML in Canvas API について
  10. Figma MCP でデザインシステムを提供して AI コーディングエージェントに一貫したフロントエンドコードを書かせる

ショート

azukiazusa
azukiazusa
azukiazusa
azukiazusa

登壇資料

  1. 2026

  2. React Tokyo Fes 2025

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

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

  3. KMC交流会 LT

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

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

  4. 技育CAMPアカデミア

    探求の技術 なぜ新しい技術を学び続けるのか

    急速に進化する技術の世界において、いかに効果的に新しい技術を探求し、その知見を価値あるアウトプットに変換していくかについて、実践的な方法論を共有します。毎週の技術ブログ執筆と年間300冊の読書から得た知見を基に、技術者として成長し続けるための具体的なテクニックをお伝えします。