Mach3.laBlog

“ECMAScript” – Alphabetical Advent Calendar 2013

この記事は賞味期限切れです。(更新から1年が経過しています)

“E” は ECMAScript の “E”。

E

ECMAScript 5

ECMAScript というのはつまるところ JavaScript の「中の人」的な存在で、 ブラウザ上の JavaScript の他に Flash の ActionScript や Adobe の ExtendScript としても使用され、 他にも様々な場面で活躍している時の人…時のスクリプトです。

最新バージョンの ECMAScript5 の便利な機能の数々は多くのモダンなWebブラウザには実装されていますが、 古いバージョンのIEなどのレガシーな環境では定義がされていないので、当然使用出来ません。

es5-shim.js

そんな ES5 の新しいメソッド群のいくつかを使えるようにしてくれるスクリプトが es5-shim.js です。

https://github.com/kriskowal/es5-shim
es5-shim.js and es5-shim.min.js monkey-patch a JavaScript context to contain all EcmaScript 5 methods that can be faithfully emulated with a legacy JavaScript engine.

ES5 で新しく実装されたメソッド群を、未定義の場合に prototype に定義してくれたり、 既存のメソッドのバグを仕様にあった動作をするように調整してくれます。 今現在実装してくれている機能は以下です(抜けがなければ)。Arrayのメソッドが怒涛のようです。

実装

バグフィクス

es5-sham.js

es5-shim.js のプロジェクトの中に es5-sham.js というファイルが含まれていますが、 これは shim に定義されていない ES5 の機能を、「出来る範囲で」実現してみた見せかけ(”sham”)の実装です。 READMEが言うには再現度はあまり高くなく処理が失敗する可能性も高い為、導入自体はリスキーですが、中身は大変参考になると思います。

es5-sham.js は主に Object.createObject.defineProperty などの辺りの実装を試みています。

Mozzila Developper Network の Compatibility コード

Mozzila Developper Network のリファレンスには「互換性」(英語版では “Compatibility”)という項目がある場合がありますが、 これはコードを追加して互換性を持たせる事が出来る場合にそれを提示してくれているわけです。

例えば Array.isArray() のページを見ると、 こんなコードが書かれています。

if(!Array.isArray) {  
  Array.isArray = function (vArg) {  
    return Object.prototype.toString.call(vArg) === "[object Array]";  
  };  
}

このコードを追加する事で、Array.isArray が定義されていないブラウザでも Array.isArray が使用出来るようになります。

es5-shim.js でサポートされていないメソッドだったり(その場合は大抵MDNにもコードは掲載されていないと思いますが)、 何らかの理由で使いたくない場合は、必要な物だけ互換用のコードを書き加えておくというのも選択肢の一つですね。

あるいは自分で書いてみる

既に互換用のコードが公開されているような機能の再実装は車輪の再発明に他なりませんが、 コーディングの良いエクササイズになると思います。 問題と解答例が用意されていて、その解答の多くは自分より JavaScript を深く知っている方が書かれた物です。

実際に書いてみて解答例と全く違うコードになった場合、それは、 何故そのような違いが出るのか、抜けている機能はなかったか、何がより効率がよい方法かを考える良い機会です。 先人のコードをよく読んで、良い所はどんどん学んでいきます。 また、各機能の仕様に対する理解も深まっていくでしょう。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*