Web Developer

Hey, I'm azukiazusa👋

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

最新記事

@json-render/chat で AI が組み立てたカードを Slack に投稿する

LLM にテーブルやグラフを含むチャットのメッセージを作らせる方法の 1 つに、メッセージの形ごとにツールを用意する方法があります。@json-render/chat は、カタログから AI に部品を選ばせた Spec を Chat SDK のカードに変換し、Slack では Block Kit として投稿します。この記事では Slack ボットを実装し、テーブルやグラフを含むリッチなメッセージが投稿されるまでの流れを紹介します。

@custom-media でメディアクエリのプリセットを定義する

同じメディアクエリを複数の CSS ファイルに書くと、ブレークポイントを変えるときにすべての箇所を書き換える必要があります。@custom-media はメディアクエリに --md のような名前を付ける at-rule で、入力方式やブレークポイントをプリセットとして 1 か所で管理できます。この記事では、@custom-media の構文と仕様上の挙動について説明します。

人気記事

  1. streamAppendHTML() で AI の回答を HTML のままストリーミング描画する
  2. AI エージェントがデスクトップアプリを操作する CLI agent-desktop
  3. エージェントスキル集 pstack の開発原則と使い方
  4. 最近の AI コーディングで実践している、設計を中心とした開発の進め方
  5. @custom-media でメディアクエリのプリセットを定義する
  6. Go でデスクトップアプリを作る MyGo を試してみた
  7. Void でフルスタックアプリを構築して Cloudflare にデプロイする
  8. エディタを Zed に乗り換えてみた
  9. Claude Code の Mods で Claude Code 自身に機能を追加する
  10. Canvas 内に直接 HTML を描画できる HTML in Canvas API について

ショート

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