React でアクセシブルな Tree View を実装する
Tree View は階層構造を効率よく操作できる一方、ARIA ロールを付けるだけではアクセシブルになりません。WAI-ARIA APG を参考に、roving tabindex、矢印キー、選択、文字検索を備えた単一選択の Tree View を React で実装する方法を紹介します
Web開発とフロントエンド技術に関する記事を探索しましょう
Tree View は階層構造を効率よく操作できる一方、ARIA ロールを付けるだけではアクセシブルになりません。WAI-ARIA APG を参考に、roving tabindex、矢印キー、選択、文字検索を備えた単一選択の Tree View を React で実装する方法を紹介します
Chrome 151 で `<usermedia>` 要素が使えるようになりました。従来の `getUserMedia()` の問題を解決するために提案された新しい HTML 要素です。この記事では、仕様の概要と、実際に動かしてみた様子を紹介します。
Web Components を利用してアプリケーションを構築する際に、異なるコンポーネントライブラリが同じ名前のカスタム要素を定義していると、名前の衝突が発生します。Scoped Custom Element Registries を使用すると、同じページの異なるスコープで同名のカスタム要素に別々の実装を登録できます。この記事では Scoped Custom Element Registries について紹介します
生成 AI のチャット UI では、回答が少しずつ画面に表示されます。このような更新をそのままライブリージョンに入れると、スクリーンリーダーが生成途中の回答を細切れに読み上げることがあります。ChatGPT と Claude、チャット UI ライブラリの実装を調査し、回答本文と状態通知を分離したサンプルを実装します。
`aria-actions` 属性は、ある要素に対して実行できる操作を提供する別のインタラクティブ要素を関連付けるための WAI-ARIA のプロパティです。この記事では、メール一覧の各項目と「既読にする」「スターを付ける」「削除する」ボタンを関連付ける例を使い、`aria-actions` が解決する問題と使い方を紹介します。
Fetch API に textStream() メソッドが追加されました。レスポンスボディを UTF-8 のテキストとして読み出すストリームを返すメソッドで、これまで TextDecoderStream を自分で繋いでいた処理を 1 つの呼び出しに置き換えられます。この記事では従来の書き方との違いを紹介します。
OpenTelemetry を使用すると、アプリケーションのログをベンダーに依存しない形式で収集し、トレースと関連付けることができます。この記事では Node.js で動作する Hono バックエンドの構造化ログを Pino で出力し、OpenTelemetry Collector を通じて Loki と Tempo に送信する方法を紹介します。
Flue 2.0 では従来の静的なエージェントの定義方法から、Agent Hooks と呼ばれる hook ベースのエージェントフレームワークへと進化しました。Agent Hooks では React の hooks と同様の API を用いて、エージェントの状態やライフサイクルを管理することができます。このブログ記事では Agent Hooks を使用してエージェントを構築する方法を紹介します。
`focusgroup` 属性は、ツールバーやタブリストなどの複合ウィジェットにおける矢印キーのフォーカス移動を宣言的に実装する HTML 属性です。従来必要だった roving tabindex の JavaScript をブラウザに任せ、単一の Tab ストップ、折り返し、最後にフォーカスした項目の記憶などを提供します。この記事では Chrome 150 で利用可能になった `focusgroup` 属性の使い方を紹介します。
CSS Grid Lanes は、高さの異なるアイテムを複数のレーンへ隙間なく配置するレイアウト方式です。`display: grid-lanes` を指定することで、JavaScript を使わずに Masonry レイアウトを実装できます。この記事では `display: grid-lanes` の基本的な使い方を紹介します。
Canvas UI は HTML-in-Canvas API を活用し、液体シミュレーションやシェーダーといったクリエイティブな UI を構築するためのコンポーネントライブラリです。
Hermes Agent と Slack を連携して要件を整理し、Linear のチケット作成から Coding Worker による実装・検証・Draft PR 作成までを自動化するワークフローを紹介します。
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa
azukiazusa