Design

Context¶

MemberList は参加メンバーを行単位で表示するコンポーネントであり、データ量が多い場合は画面外行も含めて初期描画・再描画のコストが増加します。既存 UI 構造を大きく変更せずに性能改善するため、ブラウザ標準の content-visibility を活用し、Tailwind 4 のユーティリティとして管理する方針を取ります。

Goals / Non-Goals¶

Goals: - 長いリストでのスクロール時・初期表示時のレンダリング負荷を下げる。 - MemberList の各行に一貫して適用できるスタイル定義を提供する。 - 既存の見た目と DOM 構造を維持する。

Non-Goals: - 仮想スクロールやページネーションの導入。 - MemberList 以外のリストコンポーネントへの横展開。 - データ取得ロジックや集計ロジックの変更。

Decisions¶

行要素への直接適用
content-visibility: auto は行ごとに適用し、画面外要素の描画を遅延させる。
代替案としてリスト全体への適用もあるが、部分表示の効果が弱くなるため不採用。
contain-intrinsic-size の併用
画面外要素の推定サイズを与え、レイアウトジャンプを抑える。
値は既存行高に合わせた保守的な値を採用する。
Tailwind カスタムユーティリティ化
src/index.css にユーティリティを定義し、MemberList.jsx からクラス適用する。
インライン style は再利用性と一貫性が下がるため不採用。

Risks / Trade-offs¶

[リスク] 推定サイズが実サイズと乖離する → [緩和策] 既存行高に合わせた contain-intrinsic-size を設定し、表示崩れを目視確認する。
[リスク] 一部ブラウザで最適化効果が限定的 → [緩和策] 非対応時も既存表示は維持されるため、機能的互換性を優先する。
[トレードオフ] スタイルルールが増える → [緩和策] MemberList 専用意図が分かる命名にして管理コストを抑える。