`:playing` や `:muted` で video 要素の状態に応じたスタイルを適用する
video 要素の再生やミュート状態に応じて見た目を変えるには、JavaScript でイベントを監視して CSS クラスを同期する方法が使われてきました。メディア状態擬似クラスを使うと、ブラウザが管理する再生、一時停止、シーク、バッファリ
azukiazusa のテックブログ2
Web フロントエンド要素多めの技術ブログです。週に1度更新されます。
flex-wrap: balance で Flexbox の折り返しを均等にする
flex-wrap: wrap では、最後の行に少数のアイテムだけが残り、行ごとのアイテムの量が大きく偏ることがあります。flex-wrap: balance は、通常の折り返しで決まる行数を維持しながら、各行の長さが近くなるように Fle
Zod の z.compile() でバリデーションを高速化する
Zod 4.5 で、スキーマを実行時に最適化された JavaScript へ変換する z.compile() が追加されました。コンパイル済みスキーマは通常のスキーマと同じ API を保ちながら、複雑なデータの検証を高速化します。この記事で
CSS の shape() 関数でレスポンシブな図形を作る
clip-path の path() 関数で複雑な図形を作ると、固定座標のため要素のサイズへ追従させにくいという問題があります。shape() 関数ではパーセントや CSS の単位、カスタムプロパティを使って曲線を含む図形を定義できます。こ
ローカル開発中に現れる GET /.well-known/appspecific/com.chrome.devtools.json とは何か
Chrome でローカル開発をしていると、開発サーバーへ GET /.well-known/appspecific/com.chrome.devtools.json という見慣れないリクエストが送られることがあります。これは Chrome
ChatGPT デスクトップの Codex から WebMCP 対応 TODO アプリを操作する
ChatGPT デスクトップの内蔵ブラウザが、Web サイトの機能を AI エージェント向けのツールとして公開する WebMCP に対応しました。この記事では WebMCP に対応した TODO アプリを実装し、Codex が呼び出した S
IndexedDB と React・Dexie.js でタスク管理アプリを作ってみる
IndexedDB は、構造化されたデータをブラウザへ保存できる非同期・トランザクション型のデータベースです。この記事では素の IndexedDB API で基本的な仕組みを確認した後、React と Dexie.js でタスク管理アプリを
Vitest のモックを using で自動的に復元する
Vitest で作成したスパイを復元し忘れると、別のテストへモックの状態が漏れるおそれがあります。Vitest 3.2.0 以降では `vi.spyOn()` の戻り値を `using` で宣言すると、スコープを抜けるときに元の実装を自動的
AI に技術ブログを書かせてみてわかったこと
AI が書いた記事は一般論に寄りすぎ、冗長になりやすいと考えていたため、これまでは誤字脱字の確認にだけ AI を使っていました。AI に任せる執筆フローを試したところ、生成稿を批判的に読み、自分の体験を加えて推敲すれば、学習効果は大きく失わ
Slack 上でオープンな開発を行う Slack Code を試してみた
Slack Code は Slack 上でオープンな開発を行う手段を提供する機能です。コードチャンネルと呼ばれる特別なチャンネルを作成し、チーム全体でコーディングエージェントとやり取りを行うことができます。この記事では Slack Code
TanStack Virtual で大量の要素を仮想化して描画する
大量の要素を一度に DOM へ追加すると、初期描画や更新のコストが増加します。TanStack Virtual はスクロール位置に応じて必要な要素だけを描画するヘッドレスな仮想化ライブラリです。この記事では React 向けの @tanst
React でアクセシブルな Tree View を実装する
Tree View は階層構造を効率よく操作できる一方、ARIA ロールを付けるだけではアクセシブルになりません。WAI-ARIA APG を参考に、roving tabindex、矢印キー、選択、文字検索を備えた単一選択の Tree Vi
宣言的にカメラ・マイク権限を要求する `<usermedia>` 要素
Chrome 151 で `` 要素が使えるようになりました。従来の `getUserMedia()` の問題を解決するために提案された新しい HTML 要素です。この記事では、仕様の概要と、実際に動かしてみた様子を紹介します。
Scoped Custom Element Registries でカスタム要素の名前衝突を防ぐ
Web Components を利用してアプリケーションを構築する際に、異なるコンポーネントライブラリが同じ名前のカスタム要素を定義していると、名前の衝突が発生します。Scoped Custom Element Registries を使用
ストリーミングされるチャット UI の回答をスクリーンリーダーに伝える手法の調査
生成 AI のチャット UI では、回答が少しずつ画面に表示されます。このような更新をそのままライブリージョンに入れると、スクリーンリーダーが生成途中の回答を細切れに読み上げることがあります。ChatGPT と Claude、チャット UI
`aria-actions` 属性で要素に関連する操作を支援技術へ伝える
`aria-actions` 属性は、ある要素に対して実行できる操作を提供する別のインタラクティブ要素を関連付けるための WAI-ARIA のプロパティです。この記事では、メール一覧の各項目と「既読にする」「スターを付ける」「削除する」ボタ
Fetch API の textStream() でレスポンスをテキストとしてストリーミングする
Fetch API に textStream() メソッドが追加されました。レスポンスボディを UTF-8 のテキストとして読み出すストリームを返すメソッドで、これまで TextDecoderStream を自分で繋いでいた処理を 1 つの
Hono のログを Pino と OpenTelemetry で計装する
OpenTelemetry を使用すると、アプリケーションのログをベンダーに依存しない形式で収集し、トレースと関連付けることができます。この記事では Node.js で動作する Hono バックエンドの構造化ログを Pino で出力し、Op
Flue 2.0 で導入された hook ベースのエージェントフレームワーク
Flue 2.0 では従来の静的なエージェントの定義方法から、Agent Hooks と呼ばれる hook ベースのエージェントフレームワークへと進化しました。Agent Hooks では React の hooks と同様の API を用
矢印キーによるフォーカス移動を宣言的に実装する `focusgroup` 属性
`focusgroup` 属性は、ツールバーやタブリストなどの複合ウィジェットにおける矢印キーのフォーカス移動を宣言的に実装する HTML 属性です。従来必要だった roving tabindex の JavaScript をブラウザに任せ
CSS Grid Lanes で Masonry レイアウトを実装する
CSS Grid Lanes は、高さの異なるアイテムを複数のレーンへ隙間なく配置するレイアウト方式です。`display: grid-lanes` を指定することで、JavaScript を使わずに Masonry レイアウトを実装できま
HTML-in-Canvas コンポーネントライブラリ Canvas UI
Canvas UI は HTML-in-Canvas API を活用し、液体シミュレーションやシェーダーといったクリエイティブな UI を構築するためのコンポーネントライブラリです。
Hermes Agent と Slack で設計し、Linear のチケットから Draft PR まで作成するワークフローの素振りをした
Hermes Agent と Slack を連携して要件を整理し、Linear のチケット作成から Coding Worker による実装・検証・Draft PR 作成までを自動化するワークフローを紹介します。
最近の AI コーディングで実践している、設計を中心とした開発の進め方
AI コーディングエージェントの自律性が向上し、複数のエージェントを並行して動かすことが日常になったことで、開発の中で最も時間を使う工程が実装から設計へ移りつつあります。この記事では、設計セッション、Git worktree を使った並列実
Next.js の Instant Navigations を試してみた
Next.js 16.3 Preview では、Instant Navigations という新機能が導入されました。画面遷移で即時表示できない箇所を開発時に検出し、修正を促すための機能です。この記事では Instant Navigatio
Safari MCP サーバーでエージェントが Safari ブラウザを操作できるようにする
Web アプリケーションの開発には実ブラウザでの動作確認が必要不可欠です。Playwright CLI や chrome-devtools-mcp などエージェント向けのブラウザ操作ツールは多くが Chromium に依存しています。Saf
AI SDK の MCP Apps 対応でインタラクティブな UI を返す
AI SDK の v7 では MCP Apps 対応が追加されました。AI モデルはツールを呼び出す際に `ui://` リソースが紐付けられていれば、アプリケーション側でその UI をサンドボックス化された環境でレンダリングすることができ
AI エージェントフレームワーク Flue を試してみた
Flue は AI エージェントを構築するための TypeScript フレームワークです。ハーネス駆動のアーキテクチャを採用しており、エージェントの構築に必要な機能を包括的に提供しています。この記事では SRE エージェントを構築する例を
Deno で Desktop アプリを作れるようになっていた
Deno v2.9.0 以降で `deno desktop` コマンドが使えるようになりました。`deno desktop` コマンドは単一の TypeScript ファイルから Next.js プロジェクトまで、デスクトップアプリに変換で
Vercel で Feature Flags を管理する
今日のアプリケーション開発において、Feature Flags（機能フラグ）は欠かせないツールとなっています。Vercel Flags を使用することで、Vercel 上でホストされているアプリケーションに Feature Flags を簡
Cloudflare の一時アカウントを使って即座にデプロイできるようになった
Cloudflare の Temporary Cloudflare Accounts を使用すると、人間が介入することなく AI エージェントが即座に Cloudflare Workers にデプロイできるようになります。この記事では、Te
ワークフローを再利用可能なスキルに変換する Record & Replay を試してみた
Codex の Record & Replay は macOS 上でのユーザーの操作を実演することで再利用可能なスキルに変換する機能です。例えば経費精算の提出や勤怠アプリへの打刻や工数入力、定期的なレポートの作成などをスキルとして記録し、煩
AI エージェントフレームワーク eve を試してみた
Vercel が新しい AI エージェントフレームワーク eve を発表しました。Next.js の設計思想に基づいて構築された eve は、AI エージェントの開発に必要な機能がすべて揃ったフレームワークです。この記事では、eve を使っ
実装前に設計を徹底的にインタビューし、要件を明確にするためのスキル `/grill-me`
コーディングエージェントの自律性が向上し、並行して複数のエージェントを動かすことが当たり前になってきた今、エージェントの動きを逐一監視することは現実的ではなくなっています。そのため実装前に人間と AI の間で共通理解を形成することが重要にな
`/goal` コマンドの活用例: Vitest の実行時間を 6 倍高速化した話
Vitest の `isolate: false` オプションを有効にすることで、テストの実行時間を大幅に短縮できましたが、その際に大規模なコードの修正が必要でした。Claude Code の `/goal` コマンドを活用することで、最終
エディタを Zed に乗り換えてみた
Zed は Rust で書かれたネイティブアプリケーションで、非常に高速な動作と軽量な設計が特徴の新しいエディタです。この記事では、Zed のインストール方法と、実際に使ってみて感じた主要な機能や特徴について紹介していきたいと思います。
OpenAI の Secure MCP Tunnel を試してみた
OpenAI の Secure MCP Tunnel を利用すると、プライベートな MCP サーバーをパブリックなインターネットに公開することなく OpenAI のプロダクトに接続できるようになります。この記事では Secure MCP T
Claude Code の Dynamic Workflow を試してみた
Claude Code v2.1.154 で Dynamic Workflow と呼ばれる機能が追加されました。Dynamic Workflow は数時間から数日かかるような大規模な作業を実行するために設計されています。ワークフローは Ja
2026-07-28 MCP 仕様ではステートレスファーストになる
2026-07-28 MCP 仕様リリース候補の最も大きな変更点は、MCP サーバーがステートレスファーストになることです。これにより、MCP サーバーはシンプルなロードバランサーの背後でスケーリングできるようになります。また `Mcp-M
Hermes Agent と Grok の統合を試してみた
Hermes Agent は v0.14.0 で xAI の Grok モデルとの統合できるようになりました。Grok モデルは X（旧 Twitter）の投稿を検索できる `x_search` ツールを使えることが特徴で、リアルタイムでト