画像やCSS、JavaScriptが読み込まれない時に確認したいこと

コーディングをする際に画像やCSS、JavaScriptが読み込まれないという場面に誰もが一度は遭遇したことがあると思います。

そのような時に確認するべきことを今回はご紹介します。

確認するべき点

パスが正しいかどうか

まず最初に誰もが確認する内容だと思います。

自分では間違っていないと思っていても、タイピングミスをしている可能性があります。

私の場合、ファイルが正しく読み込まれない時は、自分の考え（書いたコード）は間違っているという前提で原因を探します。

Finder上でファイル名やパスをコピーして、それをもとにエディタで検索をかけたりなど、デバッグする際は出来るだけ自分でコードを書くのではなく、コピーしてそれを利用しましょう。

下記は、私が実際に犯したミスです。

テストサーバー上でPCでは読み込まれるが、実機（スマホ）では読み込まれない

ローカル環境で開発している最中は問題なく画像が読み込まれていて、テストサーバーにアップしてPCで確認しても正しく読み込まれていました。

もちろん、デベロッパーツールでスマホ表示にしても正しく読み込まれています。

ですが、実機（スマホ）で確認した時だけ、画像が読み込まれていませんでした。

この理由は、画像のパスをhttps://ではなく、localhost:8001/のように読み込ませていたからです。

普段、画像を読み込ませる時、WordPressならhome_url()を使ったりなど、自分でパスの前半は書かずに関数や変数を使うので、このようなことは起きないはずです。

なのに何故、このようなことが起きたか考えてみたところ、開発中にブラウザ上のコードをコピーしてエディタに貼り付けたのが原因だと思います。

（ローカルホストで開発しているので、ブラウザ上に表示されるパスはlocalhost:8001/のような形式になります）

パス関係はブラウザ上からコピペするのは辞めましょう…。

ファイル名にハイフンや大文字が含まれているかどうか

ファイル名やディレクトリ名に「ハイフン」や「大文字」が含まれている場合は注意が必要です。

サーバーの設定によっては、以下のようなことが起きる場合があります。

• 「ハイフン」を認識してくれない
• 「大文字」が「小文字」として認識される

「大文字が小文字として認識される」に関しては、認識される時もあれば、されない時もあります。

「imAgE.jpg」のようなコードの場合、Aサーバーでは「imAgE.jpg」と認識されるけど、Bサーバーでは「image.jpg」と認識されるようなイメージです。

なので、ファイル名やディレクトリ名にハイフンや大文字を使用しないのが一番安全です。

httpsサイトでhttpファイルを読み込んでいる

サイトをSSL化（URLがhttpsで始まる）している場合、httpで始まるファイルを読み込もうとするとエラーになります。

「サイト自体はSSL化して安全な通信をしているのに、httpの安全じゃないかもしれないファイルなんか読み込まないで」という理由でエラーになります。

これは、JavaScriptやjQueryなどのライブラリをCDNで読み込む時に起きたりします。

なので、自分のサイトがSSL化してる場合はhttpsで読み込む、SSL化していない場合はhttpで読み込むようにしましょう。

テストサーバーはhttpだけど本番サーバーはhttpsの場合どうすればいい？

このような場合でも対応出来る方法があります。

読み込ませるパスのhttp:（またはhttps:）の部分を削除して//の部分からコードを書いて読み込ませる方法です。

例えば、https://code.jquery.com/jquery-3.5.1.min.jsを読み込ませたいとします。

その場合、src="//code.jquery.com/jquery-3.5.1.min.js"のようにコードを書けば、httpとhttpsどちらのサイトにも対応することが出来ます。

読み込ませる外部ファイルが存在しない

JavaScriptやjQueryで外部ライブラリを読み込ませる時に、解説サイトをもとにコードを書いたりすることがあるかと思います。

その時に、解説サイトで紹介されている内容の「外部ライブラリのパスが違う」や「内容が古くてライブラリ側の更新が反映されていない」などの理由で外部ライブラリを正しく読み込めていない場合があります。

なので、外部ライブラリを読み込ませる時は、手順は解説サイトなどを参考にしても、読み込ませるパスに関しては出来るだけライブラリの公式サイトを参考にしましょう。

まとめ

今回は私が実際に経験した内容をもとに、ファイルが読み込まれない時に確認したいことを紹介しました。

ファイルが読み込まれないに限らず、何かの処理が正しく動かないなどが起きた時は、絶対に何かが間違っているので、一旦自分の常識や考えは忘れ、あらゆる可能性を探りましょう。