フロントエンド・パフォーマンス

大規模リアルタイムデータグリッド

担当

フロントエンド設計・実装 + 障害対応(同プラットフォーム内)

期間

2026

使用技術

Next.jsReactTypeScriptGlide Data GridTanStack QuerySupabasePostgreSQL
大規模リアルタイムデータグリッド

※ 実際の管理画面は前職の著作権・機密保持規定により掲載不可。機能を再現したモックアップ(ダミーデータ・匿名化)に置き換え。

概要

運用が拡大し、注文データは25万件を超過。通常のHTMLテーブルではこの規模を1画面に描けず、ページ送りでは現場の一覧確認や一括編集が滞る。さらに以前、タブの件数バッジが巨大な集計ビューを毎回数えたことでDBに46時間分のCPU負荷が集中し、無関係なクエリまで連鎖タイムアウトする障害が発生。その障害対応と恒久対応まで担当。パフォーマンスという非機能要件に正面から向き合い、canvasベースのデータグリッドで大量データを仮想描画しつつ、重い集計はバックグラウンドへ逃がし、画面は結果だけを読む設計へ切り替え。

担当業務

  • 01

    canvasグリッドで25万件超をDOM化せず仮想描画。全カラム横断検索を単一カラムのGINインデックスに置き換え、約10秒から40ms台へ短縮。

  • 02

    重い件数集計をpg_cronの定期スナップショットに移し、画面は結果を読むだけに(7.5秒→約0.001秒)。ピーク時のDB飽和による連鎖ダウンを無停止で解消。

  • 03

    同種の障害が二度と起きないよう、危険な集計呼び出しを個人の注意力に頼らず、ツールフック・gitフック・ルール文書の3重で機械的にブロック。「負荷が見えない=安全」ではないと捉え、負荷を現場で捕まえる計測器も内製。

成果

「大量データは1画面で見られない」という前提を覆し、25万件を止めずに複数人が同時に扱える運用グリッドを実現。