TanStack Virtual で大量の要素を仮想化して描画する
大量の要素を一度に DOM へ追加すると、初期描画や更新のコストが増加します。TanStack Virtual はスクロール位置に応じて必要な要素だけを描画するヘッドレスな仮想化ライブラリです。この記事では React 向けの @tanstack/react-virtual を使い、リストを仮想化して描画する方法を紹介します。
最新記事
React でアクセシブルな Tree View を実装する
Tree View は階層構造を効率よく操作できる一方、ARIA ロールを付けるだけではアクセシブルになりません。WAI-ARIA APG を参考に、roving tabindex、矢印キー、選択、文字検索を備えた単一選択の Tree View を React で実装する方法を紹介します
宣言的にカメラ・マイク権限を要求する `<usermedia>` 要素
Chrome 151 で `<usermedia>` 要素が使えるようになりました。従来の `getUserMedia()` の問題を解決するために提案された新しい HTML 要素です。この記事では、仕様の概要と、実際に動かしてみた様子を紹介します。
Feature
TanStack Virtual で大量の要素を仮想化して描画する
大量の要素を一度に DOM へ追加すると、初期描画や更新のコストが増加します。TanStack Virtual はスクロール位置に応じて必要な要素だけを描画するヘッドレスな仮想化ライブラリです。この記事では React 向けの @tanstack/react-virtual を使い、リストを仮想化して描画する方法を紹介します。
React でアクセシブルな Tree View を実装する
Tree View は階層構造を効率よく操作できる一方、ARIA ロールを付けるだけではアクセシブルになりません。WAI-ARIA APG を参考に、roving tabindex、矢印キー、選択、文字検索を備えた単一選択の Tree View を React で実装する方法を紹介します
宣言的にカメラ・マイク権限を要求する `<usermedia>` 要素
Chrome 151 で `<usermedia>` 要素が使えるようになりました。従来の `getUserMedia()` の問題を解決するために提案された新しい HTML 要素です。この記事では、仕様の概要と、実際に動かしてみた様子を紹介します。
人気記事
- 宣言的にカメラ・マイク権限を要求する `<usermedia>` 要素
- 最近の AI コーディングで実践している、設計を中心とした開発の進め方
- React でアクセシブルな Tree View を実装する
- エディタを Zed に乗り換えてみた
- Claude Code から Codex を呼び出すためのプラグイン codex-plugin-cc
- 実装前に設計を徹底的にインタビューし、要件を明確にするためのスキル `/grill-me`
- ストリーミングされるチャット UI の回答をスクリーンリーダーに伝える手法の調査
- Scoped Custom Element Registries でカスタム要素の名前衝突を防ぐ
- フルスタックフレームワーク TanStack Start を試してみた
- 新しいデザインツール Pencil を試してみた
ショート
azukiazusa
Codex のネットワークアクセス設定
azukiazusa
Codex Hooks で終了時に通知を出す
azukiazusa
Codex の smart_approvals で承認の負担を軽減する
azukiazusa
browserslist で Baseline を設定できるようになった
登壇資料
2026
-
リファクタリングのためのトークン節約術
エージェントがより効率よくタスクを達成できるように、日常のタスクの中で徐々にメモリやスキルを改善していこうという話です。
-
フロントエンドカンファレンス名古屋 2026
フロントエンドの相手が変わった - AIが加わったWebの新しいインターフェース設計
フロントエンドエンジニアがこれまで向き合ってきた相手は人間でしたが、AIの登場によってその前提が変わりつつあります。AIがWebの出力者になる（ストリーミングUI、MCP Apps）ことと、AIがWebの消費者になる（Markdown配信、WebMCP）という2つの変化を軸に、AI時代のWebインターフェース設計を考察します。
-
React Tokyo Fes 2025
コーディングエージェントにフロントエンドを書かせるとき、フィードバックはどのように与えるか？
LLMベースのコーディングエージェント(Claude Code、Codexなど)が普及しているが、LLMの反復改善プロセスにおいて、コード実行結果のフィードバックがなぜ不可欠です。バックエンド開発では実行結果やテストを通じて即座にフィードバックを得られる一方、フロントエンド開発では独特の課題が存在します。本発表では、コーディングエージェントがフロントエンドコードを生成する際の「フィードバックループの問題」に焦点を当て、実践的な解決策とそのトレードオフについて議論します。