JavaScriptがMicrosoft Edgeで動かない時の対処方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptがMicrosoft Edgeで動かない時の対処方法について現役エンジニアが解説しています。セキュリティ上の問題からブラウザがJavaScriptを無効にしていることがあります。多くはブラウザの設定画面から有効にすることで動作するようになります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptがMicrosoft Edgeで動かない時の対処方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptがMicrosoft Edgeで動かない時の対処方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

JavaScriptが特定のブラウザで動かない時に考えられる原因

JavaScript特定のWebページに動きやエフェクトをつける時にJavaScriptが使われます。

しかし、JavaScriptはとても便利ですが、ユーザーの情報を抜き取るなどの脆弱性のあるサイトの原因の一つになるので、ブラウザによってはJavaScriptの機能を無効にしていることがあります。

これはユーザーの安全を確保するための設定なので、ブラウザの設定でJavaScriptが無効になっているときは有効にしてJavaScriptが機能するようにすれば解決できます。Chromeであれば設定画面のサイトの設定から有効にできます。

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

JavaScriptがMicrosoft Edgeで動かない時の原因、解決方法

先程はどのブラウザでも動作しないことがある時の対処法について述べましたが、それでもMicrosoft Edgeだけは一部の機能が動作しないことがあります。

その原因の多くは使用しているAPIが非対応であることです。最近ではJavaScriptで動作するWeb APIが豊富に登場し、サーバーサイドを使わずにWebページだけで様々な機能を実装することが出来るようになりました。

しかし、Chrome、Firefoxでは動作してもEdgeでは動作しないことがあります。この原因は使用しているWeb APIがEdgeでの動作保証をしていないことです。解決策としてはEdgeのバージョンを最新版にアップデートすれば対応することもあります。JavaScriptのWeb APIの対応についてはmozillaのサイトでAPIの対応を確認できます。

https://developer.mozilla.org/ja/docs/Web/API

事前の対策方法

これまでの内容をまとめると、APIの仕様上の問題でJavaScriptがEdgeで正常に動作しないことがあります。これはバージョンの問題がありますが、そもそもEdgeで非対応のAPIも中には存在します。

そこで立ち上げたブラウザがEdgeであるかどうかを判別させる必要があります。このときよく使われている方法が、userAgentを使うことです。以下の方法でお使いのブラウザを条件分岐させて、サイトの対応ブラウザかどうかを判別できます。

var agent = window.navigator.userAgent.toLowerCase();

var edge = agent.indexOf('edge') > -1;

console.log(edge);

上記のコードを実行すると、edgeである場合は、true、それ以外はfalseと出力されるので、あとはこれを応用させてEdge非対応のサイトである旨のアラートを出したり、そもそも他のブラウザを使ってもらうように表示に切り替えるということもできます。

また、その他の方法としては動作しないということはエラーとして出力されるのでそれに対してアクションを実行するということも一つの手段です。ただこちらの方法はエラーが出力されないこともあるので、前者の方法でサイトを作成する時に事前に対策を取ることをおすすめします。

筆者プロフィール

メンター三浦

モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。

TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はPython, Node.js。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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