よく検索されているキーワード

【初心者向け】JavaScript(jQuery)のレガシーブラウザ対応について

【初心者向け】JavaScript(jQuery)のレガシーブラウザ対応について

CSS3やJavaScriptライブラリ(フレームワーク)は、スマートフォンの進化と共に徐々に増え、今では何らかを使用して制作することが当たり前になっています。制作するページがPC・スマートフォンなどのモダンブラウザ(*1)だけを考慮するなら問題ないのですが、サイトの仕様によりレガシーブラウザ(*2)にも対応しなければいけないこともいまだに珍しくはありません。私もこれまでCSSやJavaScriptについて、IE(Internet Explorer)などのレガシーブラウザ対応を行ってきました。今やレアケースの対応かもしれませんが、よくある対応ポイントを今回はいくつかピックアップしてみたいと思います。

(*1)…Web標準への準拠が進んでいるブラウザ。最新バージョン
(*2)…Web標準への準拠が進んでいないブラウザ

IE環境でのES6

ES6(*3)と呼ばれる記述方法は、簡潔で便利な書き方になりますが、IE11以下の環境で使用できないものが多くあります。そのため、ES5(*4)の書き方にトランスパイル(*5)しなければなりません。このようなケースになる原因は、サイト仕様の見落としによりモダンブラウザで検証を行い、レガシーブラウザで使用できないことに気づかないことです。
ES5に変換する際にBabel(*6)のようなJavaScriptトランスパイラが使用できれば簡単なのですが、手動で書き直すのは多少手間がかかります。そうならないために、気をつけるポイントのいくつかを見ていきましょう。

(*3)…JavaScriptの標準規格のバージョン「ECMAScript 6th Edition」の略称。正式名称は「ES2015」
(*4)…2015年以前のJavaScript標準規格のバージョン「ECMAScript 5th Edition」の略称
(*5)…あるプログラミング言語で書かれたものを、別の言語(バージョン)に変換すること。
(*6)…「ES6」を「ES5」に変換できるツール

変数宣言

ES6
ES5

ES6の「let」は再定義が不可、「const」は再代入や再定義が不可で、かつ両方ともブロックスコープ(*7)として扱うことができます。しかし、残念ながらIE10以下ではエラー(※)になってしまいます。その場合は「var」に変更することになりますが、変数名がグローバル変数(*8)などと被っている可能性があるので、意図しない箇所で参照データが書き変わらないよう必要に応じてユニークな変数名に変更しなければいけません。

※JavaScriptのエラーは、ブラウザの「開発者ツール」の「console」に表示されます。
「開発者ツール」の表示方法は、ブラウザを開いてから、

  • Windows : 「F12」
  • Mac OS :「command」+「option」+「i」

などで表示できます。

(*7)…「{ }」で囲まれたブロック毎に作られるスコープのこと。ブロック外側からのアクセス不可、内側は可。
(*8)…一番上の階層で定義された変数で、どこでも呼び出すことができる。反対に、関数(ブロック)内でのみ使用できるものはローカル変数。

アロー関数

ES6
ES5

アロー関数とは、見た目の通りアロー(矢)の形をした「=>」で定義する関数です。この場合は「function」にそのまま変更することができますが、注意する点は前述の変数名と「this」の部分です。アロー関数内の「this」は、同階層から順次上の階層まで同一オブジェクト内を検索し適用しますが、単純に「function」に変更しただけだと構成によっては同じ動きをせずにスコープが変わってしまう可能性があるので注意しましょう。

class構文

ES6
ES5

ES5への変換は、「prototype」を使用した場合の一例になります。ES6のclass構文は、コンストラクタとメソッドをひとつのパッケージとしてまとめることができます。またこれをベースに一部だけ変更して再利用する(継承)こともできます。同じような形を残し変換することを考えた場合、右上部の書き方になります。コンストラクタ部分を「function」で定義し、メソッド部分を「prototype」を使用して定義します。大抵は、このパターンで行けると思います。

jQuery関数と間違えやすいもの

jQueryライブラリは、JavaScriptを拡張するものとして多くのサイトで使用されています。その中で、いくつかJavaScript関数と混同してしまうものが存在します。jQuery関数として処理を行えれば問題なかったのかもしれませんが、JavaScript関数として認識された場合はIE11以下で処理できなくなります。このパターンの悪いところは、jQueryを使用していると思い込んで見逃しがちになってしまうことです。
下記3つについては、レガシーブラウザ(IE)でエラーや注意が表示されたものになります。

append

JQuery
JavaScript
代替案

「append」は、要素内の最後に新しい要素を付け加えたい場合に使用します。JavaScriptでjQueryの動きと同じようにする場合、少々記述量が増えてしまっていますが、仮に上記のような使い方をしていた場合は、残念ながらエラーとなってしまいます。(例がいまいちですがご了承ください…)
その場合の代替案として、「insertAdjacentHTML」も同じように使うことができます。上記の「beforeEnd」の部分には、「insertAdjacentHTML」のオプション(※)を設定します。JavaScriptで作成する場合、初めからこちらを使用した方が簡潔ですね。

※オプションの詳細はリファレンスサイト(MDN)を参照
https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML

prepend

JQuery
JavaScript
代替案

「prepend」は、要素内の先頭に新しい要素を付け加えたい場合に使用します。こちらも前述と同じように、JavaScriptではエラーになってしまいます。
この場合の代替案も「insertAdjacentHTML」を使い、オプションを「afterBegin」で設定すれば同じことができます。

※オプションの詳細はリファレンスサイト(MDN)を参照
https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML

find

JQuery
JavaScript
代替案

「find」もJavaScriptで使用の場合、IEでは認識されません。jQueryでは子要素に対し該当する要素全てを抽出しますが、JavaScriptでは配列内を検索し最初に該当した要素の値を抽出します。jQuery関数として使用していれば問題ないと思いますが、JavaScript関数として使用していた場合、こちらもエラーになってしまいます。代替案は「filter」を使うことですが、「result」の内容(形式)が違ってきますので、扱う際は注意が必要です。

まとめ

今回は、JavaScriptでのレガシーブラウザ対応の一部をご紹介しましたが、いかがでしたでしょうか。IE系で動かなくなるものについては、こちらで紹介した以外にもいくつかあります。このような事象に遭遇した場合は、まずはエラーの起きている箇所を特定し対策を行います。開発者ツールなどで調査し新たな方法を考えることを繰り返し行うことによって、理解や対応力が自然と身に付いてくると思います。悩んでいる時には辛い作業になりますが、よい経験として後々役立つと思うので、さまざまなことを解決できる力になるようお互い頑張っていきましょう。

また現在IDSでは「技術的なお悩み」のほか「職場でのお悩み」や「キャリア相談」などそれぞれ専門の担当者がオンラインにてご相談いただけるサービス(よろず相談所)を「無料」にてご用意しております。
HTML・CSS等の技術的なことやちょっとした悩み事でも、お答えできる範囲でサポートいたします。まずは下記バナーより専用ページの記載内容をご確認の上、お気軽にご相談ください。
ご連絡をお待ちしております。

お悩みに応じて専門の担当者がオンラインサポートします!

未経験・経験年数が浅い WEBクリエイター・エンジニア向けよろず相談所

「編集部おすすめ」の記事

PAGETOP