---
title: "公開後にJavaScriptが動かないときの原因と直し方"
description: "ローカルでは動いていたボタンやアニメーションが公開後に反応しなくなった方向け。JavaScriptが止まる主な原因をファイルパスや読み込み順の観点で切り分け、自分で直せるかどうかを判断できます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/javascript-not-working"
markdown: "https://giga-site.com/articles/javascript-not-working/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-22"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 公開後にJavaScriptが動かないときの原因と直し方

ローカルでは問題なく動いていたのに、ギガサイト便で公開した途端にボタンやアニメーションが反応しなくなる、という相談はよくあります。多くの場合、JavaScriptファイルの置き場所や読み込み方、相対パスの書き方など、HTMLの作り方に原因があります。この記事では症状の切り分けから具体的な直し方、再発を防ぐコツまでを順番に説明します。

> Source HTML: https://giga-site.com/articles/javascript-not-working
> Article index: https://giga-site.com/articles/index.md

## 症状の確認：何が動いていないのかを切り分ける

まず「ページ全体が真っ白」なのか「一部のボタンだけ反応しない」のかを区別します。全体が真っ白な場合はスクリプトの読み込み自体に失敗している可能性が高く、一部だけ動かない場合は特定の処理でエラーが起きていると考えられます。

ブラウザの開発者ツール（多くのブラウザでF12キーで開けます）を開き、コンソールに赤いエラーが出ていないかを見てください。エラーの文言には、どのファイルが見つからないか、どの行で止まっているかのヒントが含まれています。

## よくある原因：ファイルの置き忘れと相対パスのズレ

もっとも多いのは、HTMLだけをアップロードしてJavaScriptファイルを一緒に公開していないケースです。外部ファイルとして分けたスクリプトは、HTMLと同じ場所に存在しないと読み込めません。

次に多いのが相対パスのズレです。たとえば script src の指定が絶対パスやローカル固有のパスになっていると、公開環境では正しく解決されません。フォルダ構成を変えたのにパスを直し忘れている場合も同様です。

- HTMLにJavaScriptファイルを添付し忘れている
- script src が見つからない場所を指している
- ローカル専用の絶対パスが残っている
- 読み込み順が逆で、参照より先に処理が走っている

## 症状別チェック表

公開後にJavaScriptが動かないときは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

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

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

## 自分でできる確認：コンソールとネットワークを見る

開発者ツールのコンソールでエラー内容を確認したら、続けてネットワークタブを開いて、JavaScriptファイルのステータスを確認します。404と表示されていればファイルが見つかっていない、つまりパスかアップロード漏れが原因です。

また、HTTPSのページからHTTPの外部スクリプトを読み込もうとしてブロックされているケースもあります。混在コンテンツの警告がコンソールに出ていないかも合わせて確認してください。

## ギガサイト便での対処手順

原因の多くは「ファイルが揃っていない」か「パスが合っていない」のどちらかです。ギガサイト便ではZIPでまとめてアップロードすると、フォルダ構成と相対パスを保ったまま公開できるため、この種の問題を一気に解決できます。

以下の手順で公開し直してください。同じURLのまま中身を差し替えられるので、送付済みのURLを変えずに修正できます。

1. HTMLとJavaScript、関連ファイルを1つのフォルダにまとめる
2. HTML内のパスがそのフォルダ構成と一致しているか確認する
3. フォルダごとZIPに圧縮する
4. ギガサイト便のトップにZIPをドラッグ＆ドロップする
5. 認証方式と公開期限を設定して公開する
6. 発行されたURLを開き、開発者ツールでエラーが消えたか確認する

## 予防：作る段階で読み込みを揃えておく

再発を防ぐには、最初から関連ファイルを同じフォルダにまとめ、相対パスで書く習慣をつけるのが有効です。絶対パスやローカル固有のパスは公開時に壊れやすいため避けます。

公開前にローカルでフォルダごと開き、開発者ツールでエラーが出ないことを確認してからZIP化すると、公開後のトラブルをほぼ防げます。差し替えのたびに同じチェックを行うと安心です。

## よくある質問

### HTMLは表示されるのにボタンだけ反応しません。

JavaScriptファイルの読み込みに失敗しているか、特定の処理でエラーが出ている可能性が高いです。開発者ツールのコンソールで赤いエラーを確認してください。ファイルが404なら添付漏れかパスのズレが原因です。

### ローカルでは動くのに公開すると動きません。

ローカル固有の絶対パスや、HTMLと別の場所にあるファイルが原因になりがちです。関連ファイルを同じフォルダにまとめ、相対パスにそろえてからZIPで公開すると解決することが多いです。

### コンソールに混在コンテンツの警告が出ています。

HTTPSのページからHTTPの外部スクリプトを読み込もうとするとブロックされます。外部スクリプトのURLをHTTPSに変えるか、可能であればファイルを自分のZIPに含めて読み込んでください。

### 修正したらURLは変わりますか。

ギガサイト便は同じURLのまま中身を差し替えられます。修正版のZIPをアップロードし直せば、すでに共有した相手にURLを送り直す必要はありません。

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

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

## 関連記事

- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [CSSファイルが読み込まれずスタイルが全く当たらないときの対処（相対パス）](https://giga-site.com/articles/css-not-loading-relative-path/index.md)
- [共有先でパスワードが通らないときの対処](https://giga-site.com/articles/password-not-working/index.md)
- [canvas・WebGLが動かないときの原因と対処](https://giga-site.com/articles/canvas-webgl-not-working/index.md)
- [localStorageが使えない・保存されないときの対処](https://giga-site.com/articles/localstorage-not-working/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "公開後にJavaScriptが動かないときの原因と直し方",
  "description": "ローカルでは動いていたボタンやアニメーションが公開後に反応しなくなった方向け。JavaScriptが止まる主な原因をファイルパスや読み込み順の観点で切り分け、自分で直せるかどうかを判断できます。",
  "datePublished": "2026-06-22",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/javascript-not-working",
  "url": "https://giga-site.com/articles/javascript-not-working",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "HTMLは表示されるのにボタンだけ反応しません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JavaScriptファイルの読み込みに失敗しているか、特定の処理でエラーが出ている可能性が高いです。開発者ツールのコンソールで赤いエラーを確認してください。ファイルが404なら添付漏れかパスのズレが原因です。"
      }
    },
    {
      "@type": "Question",
      "name": "ローカルでは動くのに公開すると動きません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ローカル固有の絶対パスや、HTMLと別の場所にあるファイルが原因になりがちです。関連ファイルを同じフォルダにまとめ、相対パスにそろえてからZIPで公開すると解決することが多いです。"
      }
    },
    {
      "@type": "Question",
      "name": "コンソールに混在コンテンツの警告が出ています。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTTPSのページからHTTPの外部スクリプトを読み込もうとするとブロックされます。外部スクリプトのURLをHTTPSに変えるか、可能であればファイルを自分のZIPに含めて読み込んでください。"
      }
    },
    {
      "@type": "Question",
      "name": "修正したらURLは変わりますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便は同じURLのまま中身を差し替えられます。修正版のZIPをアップロードし直せば、すでに共有した相手にURLを送り直す必要はありません。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```