JS memo

お洒落にJavaScript。

2019年6月26日20:52

IE非対応のJavascriptをまとめてみた

メインビジュアル

IE非対応のJavascriptをまとめてみた

最近、労力と時間を使って書いたJavascriptがテストの時に初歩的かつ致命的なミスをしました。

「あれ?IEで動かない?」

JavascriptでWebサイトやアプリを作成している人なら誰でも経験したことがあるのではないでしょうか。

IEで動かない問題を解決するためにはどこのJavascriptが非対応か調べて、対応のものに書き換えるという地道な作業をしなければいけません。
IE非対応のJavascriptを使用しない方法以外にpolyfillを使ったり、jQueryで書く方法もあります。
しかしpolyfillも実装する機能ごとに違うファイルを読み込まないといけない、jQueryでも完璧にIEに対応している訳ではないので、結局はどのJavascriptがIEに非対応か調べなければいけません。

そのためJavascriptを書く前に少しでもIEのエラーを知って、エラーに費やす時間を減らすべくIE非対応のJavascriptのうちよく使用するものをまとめてみました。

目次

  1. IEへの配慮は必要か
  2. IEが対応しているか確認する方法
  3. IE非対応のJavascript
  4. まとめ

IEへの配慮は必要か

Chrome、Safariが主流になってきている今、そもそもJavascriptを書くときにIEを考慮して書く必要があるかどうか悩ましいですよね。
StatcounterでIEのシェア率を見てみると世界では低いものの、日本では未だ約7, 8%とIEを無視することができない状況です。

Source: StatCounter Global Stats - Browser Market Share

またOSでWindowsを使っているパソコンはデフォルトでIEがダウンロードされているので、 パソコンに慣れていなくて、ブラウザ自体をあまり知らない人はそのままIEを使っているのではないでしょうか。 (私の親もそうだったので、実家のパソコンにしれっとChromeをダウンロードしておきました笑。)

IE11以下ではサポートがきれていますが、IE11のサポートについてはマイクロソフトの ブログ「Internet Explorer の今後について」にも分からないと書かれていています。

誰をターゲットにしてWebサービスを作成するのかにもよりますが、IEはまだ見て見ぬふりはできない存在です。

IEが対応しているか確認する方法

JavaScriptが各ブラウザに対応しているかどうかはCan I useを使って確認することができます。

can i use

Can I Useは調べたいJavaScriptの仕様を上部の「Can I use ____?」に入力すると各ブラウザのバージョンごとに対応しているかどうか教えてくれます。

今回はよく使うJavaScriptのうちIEバージョン11に対応していなかったものをご紹介します。

IE非対応のJavascript

promise

ES6から登場したJavascriptの仕様で、非同期処理を行うことができます。またコールバック地獄を解決してくれる優れた仕様なのですが、IE11ではまだ非対応でした。


const promise = new Promise((resolve, reject)=>{
  setTimeout(()=>{
    resolve("😆");
  }, 300);
});
promise.then(emoji =>{
  console.log(emoji); // 😆
});

fetch

fetchとはXMLHttpRequestのようなJavascriptの仕様で、XMLHttpRequestよりも簡単に実装することができるので注目を注目を浴びています。がIE11では非対応です。


fetch('url')
  .then((response) => response.text())
  .then((text) => console.log(text))
  .catch((error) => console.log(error));

arrow

arrowもES6から登場したJavascriptの仕様で、functionを矢印に置き換えることのできる優れた仕様ですが、IE11では使えません。


const func = emozi => console.log(emozi);
func("😆");
// "😆"

ParentNode, ChildNodeのメソッド

取得した要素の親または子要素を取得するプロパティーParentNodeとChildNodeの以下のメソッドはIE11に対応していません。
プロパティー自体は対応しています。

ChildNode.before, ChildNode.after, ChildNode.replaceWith, ParentNode.prepend, ParentNode.append


const element = document.getElementById("emoji");
const newElement = document.createElement("p");
newElement.textContent = "😆" ;
element.before(newElement);

intersection observer

intersection observerとは画像や動画の遅延読み込みなど、スクロールイベントを簡単に実装できるJavascriptのAPIです。Scroll Jank(Javascriptの実行スピードが スクロールより遅くて画面が固まること)が起こらない優れたAPIでしたが、IE11では非対応です。


document.querySelectorAll("img").forEach(target => {
  const io = new IntersectionObserver((entries, observer)=>{
    entries.forEach( entry =>{
      console.log("💩");
      if(entry.isIntersecting){
        const img = entry.target;
        const src = img.getAttribute('data-lazy');
        img.setAttribute('src', src);
        observer.disconnect();
      }
    });
  });
  io.observe(target);
});

class

今までコンストラクタやメソッドをfunctionで頑張って実装していましたが、ES6からClass構文が導入されて簡単に実装できるようになりました。
しかしIEではサポートされていません。


class emoji {

}

find

任意の配列から欲しい要素を取得する際に便利なfindですが、IE11ではサポートされていません。


["😆", "😓", "😩"].find( x => console.log(x==="😆"));
// true
// false
// false

for-of

配列やNodeListなど反復可能なオブジェクトをループで簡単に処理できるfor-ofですが、IE11では使用できません。


for( let emozi of ["😆", "😓", "😩"]){
  console.log(emozi);
}
// "😆"
// "😓"
// "😩"

include

任意の配列に特定の要素が含まれているかどうかをBooleanで返してくれるincludeですが、IE11では使用できません。


const arr = ["😆", "😓", "😩"];
console.log(arr.includes("😆")); //true

スプレッド構文

ピリオド3つ書くだけで、配列から配列を作成することができる便利な機能ですが、IEでは非対応です。


const arr = ["😆", "😓", "😩"];
const copy_arr = [...arr]; //["😆", "😓", "😩"]

テンプレートリテラル

バッククォート内で変数や関数を文字列と連結させて簡単に記述できるテンプレートリテラルですが、IEでは非対応です。


const emoji = "💩";
console.log(`好きな絵文字は${ emoji }です`); //好きな絵文字は💩です

まとめ

IEが非対応のJavaScriptの機能を全て羅列することはできませんが、よく使う仕様だけでも知っておくと開発の時にIEで動かない問題を少しでも回避できます。