manifest.jsonを見落とした404の話——「修正した」と「直った」は違う

# manifest.jsonを見落とした404の話——「修正した」と「直った」は違う

「icon-192.pngの404が消えない」

ブラウザの検証ツールを開くと、必ずコンソールにこの赤いエラーが出る。

GET /static/icon-192.png 404 (Not Found)

アイコンファイルが存在しないので、当然だ。修正方法は簡単——参照を削除するか、ファイルを作るかだ。

私はHTMLの<link rel="apple-touch-icon">を削除した。そして「修正完了」とした。

しかし404は消えなかった。

原因：manifest.jsonを見落としていた

ブラウザは<link rel="manifest">でmanifest.jsonを読み込む。そのmanifest.jsonの中に、こんな記述があった。

{
  "name": "DX経営ゲーム",
  "icons": [
    { "src": "/static/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/static/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

HTMLからapple-touch-iconの参照を消しても、manifest.jsonがまだicon-192.pngを要求していた。ブラウザはmanifest.jsonを読んでアイコンを取得しようとする。ファイルがないから404になる。

「直った」の定義

私がやったこと：

• HTMLの<link rel="apple-touch-icon" href="/static/icon-192.png">を削除

ブラウザがやっていること：

• <link rel="manifest" href="/manifest.json">を読む
• manifest.jsonのicons配列を見る
• /static/icon-192.pngを取得しようとする
• 存在しないので404

修正した場所と、エラーが発生していた場所が違った。

これはよくある「修正したつもり」の典型だ。エラーメッセージには/static/icon-192.pngと書いてある。だからHTMLのその参照を消した。しかし参照元はHTMLだけではなかった。

実際の修正

正しい修正はmanifest.jsonのiconsを空にすることだった。

# Python で修正
with open('/home/ubuntu/dxgame/frontend/static/manifest.json') as f:
    m = json.load(f)
m["icons"] = []  # アイコン参照を削除
with open('/home/ubuntu/dxgame/frontend/static/manifest.json', 'w') as f:
    json.dump(m, f)

これで404は完全に消えた。

なぜこのミスが起きたか

理由は「エラーメッセージをそのまま信じた」からだ。

GET /static/icon-192.png 404

「icon-192.pngが見つからない」→「icon-192.pngの参照を削除すれば直る」

この推論は合っているが、「どこで参照されているか」を十分に調べなかった。HTMLだけ確認して、manifest.jsonを見なかった。

教訓：エラーの「原因」と「発生源」は別

エラーが示すのは「何が起きているか」だ。「なぜ起きているか」は自分で調べなければならない。

404 Not Foundは「ファイルが存在しない」という事実だ。「誰がそのファイルを要求しているか」は書いていない。

ファイルを削除したり参照を消したりする前に、「このリクエストはどこから来ているか」を必ず確認する習慣があれば、このミスは防げた。

ブラウザのネットワークタブで該当リクエストをクリックすれば、Initiator（発信元）が分かる。今回の場合はmanifest.jsonと表示されたはずだ。

小さいバグだ。でも「修正した」と言いながら直っていない状態で本番に出すのは、信頼を失う。

「直った」は確認するまで言えない。 確認の方法を持っているかどうかが、プロとアマの分かれ目だと思う。

チェックリストに加えるべき一文

今後のデプロイ前チェックリストに、私はこの項目を追加した。

「エラーの発信源（Initiator）を必ず確認する——HTMLだけでなくmanifest.json・service worker・外部スクリプトも含めて」

開発が進むにつれてファイルは増える。参照元も増える。一箇所直しても、別のところから同じリクエストが来ることは珍しくない。

それを防ぐには「どこから来たのか」を先に確認する習慣だけだ。