古い Internet Explorer 向けの対応を行った時に Mozilla Developer Network に助けられた話

最近は Internet Explorer 8 という、この世から消滅して欲しいリストの上位にランクインし続けているブラウザの対応をする試練があり、とっくの昔に Internet Explorer 11 に移行済みの私は、仕方なくドキュメントモードを切り替えてある程度まで対応を行いました。

しかしながら、やはり限界があり JavaScript 周りで対応していないメソッドが出てきて困っていたところ、Mozilla Developer Network に助けられました。

Global Objects - JavaScript | MDN

ちなみに Internet Explorer 8 では Date.now メソッドが存在していないので、当然ながらコードないで使っていたらエラーになって止まってしまいます。

// このコードは IE8 では動作しない。滅びろ
var timestamp = Date.now();

Internet Explorer 8 との互換性を重視した場合には Date.getTime メソッドを使う方法がありますが、MDN のメソッドリファレンスページを見ると、下の方に互換性という項目があるので、記載されているコードそのまま使うことが出来ます。

互換性

このメソッドは ECMA-262 第 5 版に追加されたメソッドです。次のコードを使用する事により、実装の如何に関わらず同等のメソッドが使用可能となります。

if (!Date.now) {
  Date.now = function now() {
    return new Date().getTime();
  };
}

Date.now - JavaScript | MDN

当然ながら該当するメソッドのネイティブ実装があればそれを使うようになっています。

他にも LINQ で言うところの Any メソッドに相当する Array のメソッドとして some というものがありますが、これも Internet Explorer 8 には実装されていないのでエラーになります。

var array = [ 1, 2, 3, 4, 5, 6 ];

// このコードも IE8 では動作しない。消えてくれ、頼む
array.some(function (value) {
    return value === 10;
});

ちょっと実装はめんどくさそうですが、MDN の該当メソッドのページにはしっかりと互換性を実現するためのコードが記載されています。

互換性

some は ECMA-262 標準 に最近追加されたメソッドなので、別の版の標準には存在しない場合があります。次のコードをスクリプトの先頭に追加することにより some がネイティブでサポートされていない実装上でも some が使用可能となります。このアルゴリズムは ECMA-262 第 5 版で指示されたアルゴリズムと全く同じものです。Object、TypeError はそれぞれオリジナルの値を持ち、またそれらの fun.call は Function.prototype.call のオリジナルの値として評価されます。

if (!Array.prototype.some) {
  Array.prototype.some = function(fun /*, thisp */) {
    "use strict";

    if (this == null) throw new TypeError();

    var t = Object(this),
        len = t.length >>> 0;

    if (typeof fun != "function") throw new TypeError();

    var thisp = arguments[1];

    for (var i = 0; i < len; i++) {
      if (i in t && fun.call(thisp, t[i], i, t))
        return true;
    }

    return false;
  };
}

Array.some - JavaScript | MDN

マジでファッキンな Internet Explorer 8 ですけど、MDN のおかげで死ぬことはなく対応出来ました。