ローカルのブラウザでJavaScriptが動かない時の主な原因を現役エンジニアが解説【初心者向け】

初心者向けにローカルのブラウザでJavaScriptが動かない時の主な原因について現役エンジニアが解説しています。原因には、JavaScriptの有効化、バージョン、拡張ライブラリ、ソースコードのエラーなどが考えられます。解決方法としてIEなども例にして解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

ローカルのブラウザでJavaScriptが動かない時の主な原因について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

ローカルのブラウザでJavaScriptが動かない時の主な原因について詳しく説明していくね!

大石ゆかり

お願いします!

 

ローカルのブラウザでJavaScriptが動かない時の主な原因(確認すべきこと)

1.まず、一番に確認するべきことは、JavaScriptがそのブラウザーで有効になっているかどうかです。
ここが有効になっていないと当然JavaScriptは動きません。ブラウザーの設定を確認しましょう。

2.次に確認するべきは、動かそうとしているJavaScriptとブラウザーのバージョンです。
利用している関数によっては、ブラウザーの種類やバージョンによって使えなかったり、
挙動が代わるものもあります。ブラウザーの設定を確認しましょう。

3.jQueryなど拡張ライブラリーを利用している場合で、外部読み込みでない場合はクライアントにインストールが行われているか、パスの指定が正しいかを確認しましょう。
環境設定やインストールの設定を確認しましょう

4.これらの、JavaScriptを動かす前提が全て整っていて動かない場合は、JavaScriptのエラーの可能性が高いです。
Chromeのデベロッパーツールを使って、エラーメッセージを確認しましょう。

5.エラーで良くあるのは、コードに全角が入っている場合です。
特に半角スペースと全角スペースはよくあるミスです。不要なところ(文字列で使用していない部分)に全角がないか確認しましょう。

6.次によくあるエラーは、変数などの定義が誤っている場合です。
スペルミスや定義する場所が間違っていることがあります。エラーになっている個所の変数や関数の確認をしましょう。
 

特にIEで動かない時の主な原因(確認すべきこと)

1.利用しようとしている関数などはブラウザーによっては利用できないものがあります。
IE非対応なものだとRadioNodeListやclass、findなどがあります。

Chromeで開発確認していて、IEだけ動かない場合などは、利用している関数がIEに対応してるか確認しましょう。

2.「console.log」を利用している場合です。
開発ツールなどを利用している時は問題ないのですが、IEでは動作しない事があります。
「console.log」を利用しているか確認しましょう。

※IE9以降では対応しているので発生頻度は少ないかもしれません
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptが動かない時の解決方法

1.JavaScriptが有効かは、ブラウザーの設定を確認し向こうの場合は有効にしましょう。

2.バージョンもブラウザーの設定を確認します。
次に正しく動作しない関数などを
【https://developer.mozilla.org/ja/docs/Web/JavaScript】
などで確認してみましょう

3.jQueryのバージョンを確認するには「$.fn.jquery」を使います。
scriptに記載しているパスと実際のファイルの置いてあるところを確認しましょう。
とくに、相対パスになっているので、記載しているhtmlの場所からになるので注意しましょう。

4.chromeのデベロッパーツールは下記の方法で起動できます。

  • Windowsの場合F12キー
  • Macの場合はCommand+Option+Iキー

console画面でエラーが確認できますので、エラー内容を調べて対応します。

5.全角スペースを見つけるには、エディターなどで検索を掛けるのが一つの手です。
ただ、ミスを行わない為にもエディターで全角スペースを表示する設定にしておくのが良いかと思います。

6.この問題は、パターンが色々あるので、一概には言えません。
一般的に、色々な場所にログを出力するようにして、エラー個所を特定します。この時に出力するのは2つです。
どこまで出来ているかの情報と、必要な変数に必要な値が出力されているのかの情報です。
これで、エラー箇所とエラー内容を特定して対応します。

以上が、「ローカルのブラウザでJavaScriptが動かない時の主な原因」の特定と対応方法です。
自分である程度調べて、どうしても原因が不明であれば、ネットでの検索や質問をしてみるのもありかと思います。
 

筆者プロフィール

この記事を監修してくれた方

小宮山晃史(こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。