ローカルのブラウザでJavaScriptが動かない時の主な原因を現役エンジニアが解説【初心者向け】
初心者向けにローカルのブラウザでJavaScriptが動かない時の主な原因について現役エンジニアが解説しています。原因には、JavaScriptの有効化、バージョン、拡張ライブラリ、ソースコードのエラーなどが考えられます。解決方法としてIEなども例にして解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
ローカルのブラウザでJavaScriptが動かない時の主な原因について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
目次
- ローカルのブラウザでJavaScriptが動かない時の主な原因（確認すべきこと）
- 特にInternetExplorerで動かない時の主な原因（確認すべきこと）
- JavaScriptが動かない時の解決方法
- まとめ
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
ローカルのブラウザでJavaScriptが動かない時の主な原因について詳しく説明していくね！
お願いします！
ローカルのブラウザでJavaScriptが動かない時の主な原因（確認すべきこと）
１．JavaScriptがブラウザで無効になっていないか
Chromeなどのブラウザを利用する場合、初期状態でJavaScriptは有効に動作します。
もし、何かの理由で無効にする設定をしていたら、JavaScriptは動作しません。
ブラウザの設定画面から、JavaScriptを選択して有効にすると良いです。
２．ブラウザのバージョンを確認する
基本的にブラウザのバージョンは、最新バージョンにしておけば良いです。
しかし、ブラウザのバージョンによっては、JavaScriptの特定関数が動作しないことがあります。
業務利用において特定のJavaScriptの関数を利用する必要がある場合、該当プログラムが動作するブラウザのバージョンを利用すると良いです。
３．外部ライブラリのインストールを確認
JavaScriptは動作するが、JavaScriptで利用している外部ライブラリが正しく設定されていないと、該当プログラムが動作しません。
外部ライブラリをクラウド上から読み込むのではなく、自分のPCに用意する必要がある場合は、パスの設定を確認する必要があります。
パスとは、読み込み元のプログラムが、読み込み先のライブラリの位置を正しく理解するための住所のようなものです。
ライブラリの正しい住所を、読み込み元プログラムに設定すると良いです。
４．JavaScriptのエラーを確認
Chromeのデベロッパーツールを使って、エラーメッセージを確認しましょう。
５．コードに全角が入っていないか確認
プログラムのコードに全角スペースが入っている場合はうまく動作しません。
特に、HTMLに全角スペースが入っている場合は、エラーメッセージでも見つからないことが多いため、HTMLに関してはコード内検索処理をすると良いです。
特にInternetExplorerで動かない時の主な原因（確認すべきこと）
2022 年 6 月 16 日までが Microsoft 社の InternetExplorerのサポート期間です。
サポート期間が終了していても、いろいろな方法でInternetExplorerを利用する方はいらっしゃると思います。
InternetExplorerを利用してJavaScriptのアプリケーションを動作させたい場合は注意が必要です。
１．利用できない機能
InternetExplorerでは利用できない機能や関数は多いです。
InternetExplorerではclass構文やfind()メソッドやアロー関数など、利用できない機能がたくさんあります。
Chromeで開発確認していて、InternetExplorerだけ動かない場合などは、利用している機能がInternetExplorerに対応してるか確認しましょう。
JavaScriptが動かない時の解決方法
ここでは、JavaScriptが動かない時の解決方法を解説します。
１．ブラウザの設定でJavaScriptを有効にする
Chromeの場合は、次の手順で操作します。
- 右上の●が3つ表示されているアイコンをクリック
- 設定をクリック
- 上部検索フォームにJavaScriptと入力
- サイトの設定部分に黄色いポップアップが表示されるのでクリック
- サイトがJavaScriptを使用できるようにするを選択すると、JavaScriptを利用できます。
２．バージョンもブラウザの設定を確認
- 右上の●が3つ表示されているアイコンをクリック
- ヘルプをクリック
- Google Chromeについてをクリック
- 最新バージョンをインストールする必要があれば、その旨が表示されるのでインストールをクリックします。
- 最新バージョンであれば、その旨が表示されるので大丈夫です。
３．jQueryのバージョンを確認する
利用しているjQueryのバージョンを、利用したいアプリケーションで指定されているものと統一する必要がある場合、jQueryのバージョンを確認します。
デベロッパーツールを開いて、コンソールに「$.fn.jquery」を入力すると、該当アプリケーションで利用しているjQueryのバージョンを確認できます。
４．Chromeのデベロッパーツールは下記の方法で起動する
- Windowsの場合F12キー
- Macの場合はCommand＋Option＋Iキー
console画面でエラーが確認できますので、エラー内容を調べて対応します。
●変数や●関数が未定義の場合は、「● is not defined」という表示がデベロッパーツールで表示されます。
●ファイルが存在しない場合は、「● is not found」という表示がデベロッパーツールで表示されます。
JavaScriptでconsole.logを使ったデバッグのやり方 を参考にしていただくと良いですよ。
５．全角スペースを見つける方法
エディタでソースコードを開いて、Ctrl+Fを押すと検索フォームが表示されます。
検索フォームに1回だけ全角スペースを入力すると、全角スペースの位置がわかります。
次の画像はcloud9というエディタを利用しています。
13行目に水色部分が見えますが、これが全角スペースを意味しています。
全角スペースは半角スペースで修正すると良いです。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
今回はJavaScriptが動作しない場合の対応方法について解説しました。
最新のChromeを利用することが大事でした。
個別の環境やアプリケーションで動作しない場合は、デベロッパーツールのエラーなどを確認する必要がありました。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
