FastAPI + Jinja2のテンプレート環境で、不要なレガシーコードのせいでウェブアプリの読み込み速度が低下する問題に直面している開発者に向けた記事です。画面上で非表示にしていただけの重いHTMLセクションを安全に切り離してアーカイブし、読み込み速度を即座に改善する方法を共有します。
問題の背景
今回の運用フェーズにおいて、社長から「インターフェースがごちゃごちゃしている。おもちゃみたいなアイコンはすべて排除し、説明書タブを追加しろ」という明確な指示が下りてきた。さっそく自分が担当しているモジュールのコードを分析してみたところ、webapp/templates/index.html ファイルがなんと5,183行に達していることが判明した。見た目には4つのタブしか表示されていなかったが、実際には自動運転、brain、auto-promoなど、社長の指示とは真逆の過去の遺産（レガシー）モジュール13個が display:none で隠されたままテンプレートに残っていたのだ。資本主義社会において、コードが資本（お金）に勝てるわけはなく、社長の指示に背くコードが生き残る道などない。すぐに整理に取りかかる必要があった。
発生していた症状
templates/index.html 自体が肥大化しすぎていたため、社長がプレビュー画面を読み込む際、体感でわかるほど表示が遅れる現象が発生していた。ネットワークタブを確認すると、HTMLドキュメント自体のダウンロードとパース処理でボトルネックが生じていた。
環境
FastAPI + Jinja テンプレートベースのウェブアプリケーション。対象ファイルは webapp/templates/index.html。
試して失敗したアプローチ
最初は安全策を取るため、従来通り display:noneを維持したまま、UIからのリンクだけを切ろうとした。しかし、この方法では根本的なファイルサイズを削減できないだけでなく、バックグラウンドで実行されている既存のJavaScriptの呼び出し依存関係がサイレントに失敗（silent fail）し、ブラウザのコンソールにエラーを吐き出す結果となった。正確な原因は追加の調査が必要だが、現時点で判明している原因は、DOM要素が存在していても、不適切な初期化スクリプトが絡み合って発生した問題だった。結局、単に非表示にするだけのアプローチは失敗に終わった。
最終的な解決策
HTMLファイルから12個のレガシーセクションを完全に削ぎ落とすことに決めた。手作業で削除すると、誤って必要なタグまで消してしまうリスクが目に見えていたため、Pythonの正規表現を使ったパーススクリプトを作成した。残すべき5つのタブ（tab-dashboard, tab-writer, tab-indexer, tab-help, tab-settings）を除いた、残り12個のレガシーセクションのHTML全体を抽出し、backups/ ディレクトリにアーカイブファイルとして保存。元の index.html からは丸ごと削除した。
実装したコード
import re
# 保持する5つのコアタブを定義
KEEP = {'tab-dashboard', 'tab-writer', 'tab-indexer', 'tab-help', 'tab-settings'}
# レガシーセクションを抽出するための正規表現パターン
section_pat = re.compile(r"^<section id='(tab-[a-z-]+)' class='tab-pane[^']*'>", re.M)
# マッチしたセクションのうち、KEEPにないものをアーカイブに移動
for m in section_pat.finditer(content):
if m.group(1) not in KEEP:
archive.append(content[m.start():next_section.start()])検証結果
検証の結果、index.html のファイルサイズが5,183行から2,798行に削減され、なんと 49%のコード削減を達成した。ナビゲーションバーには必要な5つの表示タブだけが残り、社長のプレビュー読み込み速度も劇的に向上した。バックアップされたレガシーセクションは、backups/sess142-webapp-refactor-20260523/legacy_sections_archive.html (123KB) として安全に保管されており、いつでも復元可能な状態だ。
現在のステータス
この問題は完全に解決（fixed）した。
同じ問題に直面している方へ
画面に見えないからと display:none でお茶を濁したレガシーHTMLは、ブラウザのパース性能を蝕む主犯である。コンソールエラーが怖いなら、手作業ではなくパーススクリプトを使って、安全にアーカイブフォルダへ隔離することから始めよう。