会社で構築していたプログラムのデバッグをしていたところ、IEで動作しないファンクションを発見してしまいました…
Object.assign() – MDN Web Docs
この関数は
一つ以上の ソース オブジェクトから、直接所有で (own) 列挙可能な (enumerable) すべてのプロパティの値を、ターゲット オブジェクトへコピーします。
という機能を持っているのですが、この関数がInternet Explorerで対応していなくて、プログラムがIEで動かない状況が発生してました。
IEで対応していない、といわれるとかなり焦ってしまいますが、よく使われている関数については、大抵の場合代替えとなる関数を誰かが公開していることが多いです。
今回の Object.assign() については、こちらのサイトでPolyfillなライブラリが公開されていました。
spiralx/object-assign.js – Gist
今回は、このGistのコードを使わせていただきました。
使い方は簡単。
Object.assign()を使用しているページで、一緒にobject-assign.jsを読み込むだけ。
“assign”という名前で使えるようにしてくれているので、コード内で記述したファンクションを書き換える必要がないのは非常にありがたいです。
今回のように、新しいブラウザでしか対応していない関数をほぼ同じ機能を持つ同じ名前の自作関数として定義してしまうことで、使えるようにしてしまう手法のことを”Polifill”と呼ぶそうです。
反対に、その関数でやりたかったことを別の関数で代替えすることを”Ponyfill”と呼ぶそうです。
それぞれの違いや、メリット／デメリットについては、上記の記事が非常に分かりやすいです。
html5によって、各ブラウザ間の動作はそこそこ統一されてきている印象はありますが、まだまだ完全な互換性があるとはいいがたく、依然としてWebプログラムのデバッグをするために、主要なブラウザで一通り動作確認をする必要があるのが現状です。
特に酷いのがビューの部分。ブラウザによって大分解釈が違うようで、Chromeは意図通りに動いても、SafariやIEだとめちゃくちゃに崩れている…なんてことも結構あり、油断できません。
正直HTML5の意味…とか思ってしまうけど、統一するのもなかなか一筋縄ではいかないのでしょう。
HTML5はまだ改善の途上ですし、今後に期待したいです。
とりあえず、せめてモダンなブラウザとの互換性がかなり微妙なIEがデファクトスタンダードな風潮だけは抜けてほしいなーと思いますね…
