---
title: "fetchで相対パスのファイルが404になるときの原因と対処"
description: "ローカルでは取れていたデータがfetchで404になって途方に暮れている開発者向け。fetchの相対パスが「どこを基準に」解釈されるかを明確にし、公開後のディレクトリ構成とのズレを素早く特定して直すための確認フローを紹介します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/fetch-relative-path-404"
markdown: "https://giga-site.com/articles/fetch-relative-path-404/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# fetchで相対パスのファイルが404になるときの原因と対処

ローカルでは取れていたデータが、公開した途端にfetchで404になる。多くは相対パスの基準が、公開後のディレクトリ構成とずれていることが原因です。この記事では、fetchのパスがどこを基準に解釈されるかを押さえ、ずれを切り分けて直す手順をまとめます。

> Source HTML: https://giga-site.com/articles/fetch-relative-path-404
> Article index: https://giga-site.com/articles/index.md

## 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に変われば解決です。関係者だけに確認してもらいたいときは認証を併用すると安心です。

## よくある質問

### imgやlinkは取れるのにfetchだけ404になります

fetchの相対パスはJSの位置ではなく、表示中のページのURLを基準に解釈されるためです。imgやlinkとはずれの起き方が異なるので、Networkで実際のRequest URLを確認してください。

### 末尾のスラッシュで結果が変わるのはなぜですか

/dir と /dir/ では相対パスの基準ディレクトリがずれるためです。同じコードでも開き方で取れたり404になったりするので、現在のページURLを意識してパスを組んでください。

### 絶対パスにすれば解決しますか

ルート基準の絶対パスにすると基準は固定できますが、公開先のルート構成が想定と違うと外れます。一時共有のZIPでは、配置を保って公開できる前提で相対パスを組む方が扱いやすいです。

### パスは合っているはずなのに404が消えません

大文字小文字の違いや、ZIP化で親フォルダが一段増えたことが疑われます。NetworkのRequest URLと実際のファイル名・階層を一文字ずつ照合して、ずれを特定してください。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [CSSファイルが読み込まれずスタイルが全く当たらないときの対処（相対パス）](https://giga-site.com/articles/css-not-loading-relative-path/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [外部JSONの読み込みでパースエラーになるときの確認点](https://giga-site.com/articles/json-fetch-parse-error/index.md)
- [404ページを自分で用意したいときの考え方](https://giga-site.com/articles/custom-404-page/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "fetchで相対パスのファイルが404になるときの原因と対処",
  "description": "ローカルでは取れていたデータがfetchで404になって途方に暮れている開発者向け。fetchの相対パスが「どこを基準に」解釈されるかを明確にし、公開後のディレクトリ構成とのズレを素早く特定して直すための確認フローを紹介します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/fetch-relative-path-404",
  "url": "https://giga-site.com/articles/fetch-relative-path-404",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "imgやlinkは取れるのにfetchだけ404になります",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "fetchの相対パスはJSの位置ではなく、表示中のページのURLを基準に解釈されるためです。imgやlinkとはずれの起き方が異なるので、Networkで実際のRequest URLを確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "末尾のスラッシュで結果が変わるのはなぜですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "/dir と /dir/ では相対パスの基準ディレクトリがずれるためです。同じコードでも開き方で取れたり404になったりするので、現在のページURLを意識してパスを組んでください。"
      }
    },
    {
      "@type": "Question",
      "name": "絶対パスにすれば解決しますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ルート基準の絶対パスにすると基準は固定できますが、公開先のルート構成が想定と違うと外れます。一時共有のZIPでは、配置を保って公開できる前提で相対パスを組む方が扱いやすいです。"
      }
    },
    {
      "@type": "Question",
      "name": "パスは合っているはずなのに404が消えません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "大文字小文字の違いや、ZIP化で親フォルダが一段増えたことが疑われます。NetworkのRequest URLと実際のファイル名・階層を一文字ずつ照合して、ずれを特定してください。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```