2013年12月24日火曜日

es5-shimを使って旧来のブラウザでEcmaScript5を利用しよう

JavaScript - Client Side - Advent Calendar 2013」の24日目として投稿。
普段はブログを書かないから手間取った!

これまでの担当プロダクトがIE8(EcmaScript5非対応)をターゲットブラウザにしていたため、EcmaScript5の追加機能を使う機会がなかったが、どうせなら最新の技術を追いたいので、そのような環境でもEcmaScript5の機能を使う方法を調べてみた。

その中で、es5-shim ライブラリが便利そうだと思ったのでメモとして書く。

利用は簡単
配布されているes5-shim.min.jsをhtmlファイルから読み込めば、JavaScriptのソースコードでEcmaScript5相当の機能を利用できる。
var array = [11, 12, 13];
array.forEach( function(element){console.log(element);} );
これだけで、IE8でもEcmaScript5の機能が動いた!
EcmaScript5対応のブラウザでももちろん動く!(最新のChromeで確認)

副作用もある
これはいわゆるモンキーパッチなので、その他のライブラリで同名のメソッドを定義していないことを確認する必要がある。

その他にも、既存prototype(Array.prototype等)への機能拡張が行われているため、for in 文の利用に影響が出る(forEachなどの追加メソッドも抽出される)。

(注意)これで味をしめて既存prototypeへの機能拡張をすればよいという考え方をしないように。モンキーパッチは標準的なメソッドのみに留めるべき。
参考:「Effective JavaScript」項目42 やみくもなモンキーパッチを避ける

EcmaScript5の全機能がカバーされるわけではない
たとえば Object.create() など、全部または部分的に対応しない機能もあるので、es5-shimのリファレンスをよく確認して使うこと。

その他
現在策定中のEcmaScript6の機能を先取りするための es6-shim なんてものもあるので機会を見て試すことにする。

なお、EcmaScript5の機能の一部を異なるIFで提供するライブラリもあるので、
わざわざes5-shimを利用しないでよい場合もあると思うので一例として書く。
・BackboneのようにUnderscoreを前提としているフレームワークを利用する場合はそれを使うのもよい
→ _.forEach, _.bind など
・jQueryを利用するならば、jQueryのユーティリティを使うのもよい
→ $.each, $.extend など

サンプルコードやUnderscore等との比較など、色々と書きたかったけど、本日はここまで。

これを機に色々とブログでアウトプットを続けようと思った。