fetchで相対パスのファイルが404になるときの原因と対処

fetchの相対パスは何を基準にするのか

fetchに渡す相対パスは、現在表示しているページのURLを基準に解釈されます。リンクタグやimg srcと違ってJSファイルの場所ではなく、ブラウザのアドレス欄に出ているページの位置が基準になる点が混乱のもとです。

たとえば同じ data.json を取るコードでも、トップで開いたときとサブページで開いたときでは、ページのURLが違うため指す先が変わります。JSをどこに置いたかではなく、どのURLのページから呼ばれたかで結果が変わると理解すると、ずれの理由が見えてきます。

公開後に404になりやすいパターン

ローカルでindex.htmlを直接開いていたときと、公開後にサブフォルダ階層が一段増えたときとでは、ページのURLが変わり、相対パスの基準もずれます。data.json とだけ書いていると、想定と違うフォルダを探しに行って404になります。

末尾スラッシュの有無も影響します。/dir で開いたときと /dir/ で開いたときでは、相対パスの基準ディレクトリがずれることがあり、同じコードでも取れたり404になったりします。

ルート基準の絶対パス（/data.json）に変えれば基準は固定できますが、公開先のルート構成が想定と違うと今度はそこで外れます。一時共有のZIPでは、配置を保ったまま公開できる前提で相対パスを組むのが扱いやすいです。

症状別チェック表

fetchで相対パスのファイルが404になるときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

404の原因を切り分ける手順

推測ではなく、実際にどのURLを取りに行ったかを見れば原因はすぐ分かります。次の順で確認します。

1. F12のNetworkタブを開いてページを再読み込みする
2. fetchしたファイルの行を探し、ステータスが404になっているか確認する
3. その行のRequest URLを見て、実際に取りに行った完全なパスを確かめる
4. ファイルツリー上の本当の置き場所と、取りに行ったパスを突き合わせる
5. ずれていれば、現在のページURLを基準に正しい相対パスへ書き直す

大文字小文字とフォルダ階層の確認

ローカルでは大文字小文字を区別しないことが多く、Data.json を data.json と書いても開けてしまいます。公開環境では区別される場合があり、その差だけで404になります。Request URLとファイル名を一文字ずつ照合してください。

ZIP化したときに親フォルダが一段余計に増え、想定していた階層と実際の配置がずれることもよくあります。Networkで見えるパスと実際のフォルダ構成を見比べると、どこで一段ずれているかが分かります。

配置を保ったまま公開して確認する

fetchの404は公開後の配置に依存するため、ローカルのプレビューだけでは再現しきれません。本番に近い配置で公開し、Networkタブで実際のリクエストURLを見ながら直すのが確実です。

ギガサイト便はJSやJSONを含むZIPをそのままドロップでき、相対位置を保ったまま 〇〇.giga-site.com で公開されます。Networkで取りに行ったURLを確認しながらパスを直し、同じURLのままZIPを差し替えて再検証できます。404が200に変われば解決です。関係者だけに確認してもらいたいときは認証を併用すると安心です。