【デブサミ2012】16-C-5 レポート より扱いやすく進化する次世代JavaScript「ECMAScript 6th」注目機能とは?

CodeZine / 2012年3月27日 16時0分

ECMA6thに実装される「Simple Map」の使い方(SlideShareでも公開)

 本稿では、「Developers Summit 2012」(デブサミ2012)において、2月16日に行われたMozilla Japan 浅井智也氏によるセッション「JavaScript 最新事情 - 開発者なら知っておきたい次世代 JavaScript -」の内容を紹介する。なお、本文で紹介されているスライドはSlideShareでも公開されている。

 HTML5の基盤言語として注目を集めているJavaScript。JavaScriptが生まれたのは1995年。以降、紆余曲折を経て発展したJavaScriptは、現在、次世代の仕様であるECMAScript 6th(以下、ECMA6th)として標準化が進んでいる。とはいえ現行バージョンであるECMAScript 5th(以下、ECMA5th)に搭載されている機能中にも、ブラウザによってはサポートしていないものもある。ECMA6thにはどんな機能が追加されるのか。それを知るために、Mozilla Japanの浅井智也氏はまず、現行のバージョンに搭載されている最新機能について詳しく解説。さらにECMA6thに搭載されるであろう機能を紹介した。

Mozilla Japan 浅井智也氏


■後方互換も可能、ECMAScript 5thの使える機能

 「このセッションでは現行JavaScriptの注目機能と、実装ありの次世代仕様を中心に話をする。HTML5やDOM APIを期待された方は、今すぐ他のセッションに移ったほうがいいかもしれない」

 冒頭でこう断りを入れ、浅井智也氏のセッション「JavaScript最新事情─開発者なら知っておきたい次世代JS─」は始まった。今でこそWebの開発には欠かせない言語となったJavaScriptが生まれたのは1995年。「現在Mozilla CorporationのCTOのBrendan Eich(ブレンダン・アイク)が10日間程度のやっつけ実装でできた言語。当初は実装者本人も後悔するような仕様だった」と浅井氏。標準仕様であるECMAScript 1stがリリースされたのは1997年。その後、さまざまな物語を経て、2009年12月、現行バージョンであるECMAScript 5th(ECMA5th)がリリースされた。

 「ECMA5thは現行仕様でもあり次世代仕様ともいえる」

と浅井氏は語り、ECMA5thの最新の機能について解説を始めた。

 Firefoxなら4からフルサポートしているが、IEであればIE9以降、Safariであれば5.1以降でほぼフルサポートというように、ECMA5thに対応するには最新のブラウザが必要になる。しかし下位のバージョンもなかなかなくならないのが現状だ。そこでJavaScriptでは後方互換のスクリプトを利用することで、その問題を解決する。

 「JavaScriptの良い点はプロトタイプベースのオブジェクト指向であること。プリミティブなオブジェクトの拡張ができる。例えば、Array(配列)オブジェクトにいくつかメソッドが追加されるが、サポートしていないバージョンであっても後方互換スクリプトを読み込めば、新しいメソッドが追加定義され現行仕様のコードが使えるようになる。ここからは具体的機能をいくつか取り上げて説明していきたい 」と語った。

 「まず使って欲しいのが、Native JSON」と浅井氏。これは米Yahoo!JavaScriptアーキテクトであるDouglas Crockford(ダグラス・クロックフォード)が作った仕様で、IE8などその他広くサポートしている。json2.jsを使えば後方互換にできるので下位バージョンのブラウザでも問題なく動く。

 使い方も簡単だ、と浅井氏。生成されたJSONのグローバルオブジェクトを「parse」と「stringify」というメソッドを使うことで、JSON文字列をオブジェクトに変えたり、オブジェクトをJSON文字列に変えたりが簡単にできるようになる。またネイティブの実装の場合、C言語のプログラムになるため、JavaScriptのライブラリより高速でセキュリティ問題も発生しにくいというメリットもある。「ただし、万事すべてがうまくいくわけではない。Dateオブジェクトについてはブラウザ間の挙動が異なるなど、受け渡すデータによっては注意が必要なこともある 」と浅井氏は注意を促す。

 次に紹介したのは「Array Extra」。「indexOf」「every」「map」などの配列操作メソッドが追加されたのだ。Firefox 1.5以降、古くから広く実装されてきたが、IE8まではサポートしていないので、「Augment.js」などを読み込んで使って欲しい。 ここで浅井氏はどんなことができるか、コードを紹介。例えば「filterメソッドを用いれば、filterで渡された関数が真か偽かによって、配列の要素を減らす操作が簡単にできるようになる。またeveryメソッドあるいはsomeメソッドを使うと、配列のすべての要素あるい は1つ以上の要素が、特定の関数に対して真か偽か簡単に確認できるようになるという。

 「そのほかにも、mapメソッドやreduceメソッドなど、他の言語でサポートされているような配列操作周りのメソッドが増えているので、どんどんArray Extraを活用して欲しい」と語り、さらに浅井氏はmapメソッドの少し変わった使い方なども披露した。

 「ECMA5thではオブジェクト周りの機能も増えている」と浅井氏。その一例として浅井氏が最初に取り上げたのはbindメソッド。主要ブラウザであるIE9以降 Firefox4以降、Chrome7以降、Opera11.60以降でサポート。ただSafariだけはいまだ未サポートなので、注意が必要だ。

 bindはどんなときに使えるのか。JavaScriptでは関数を実行するとき、オブジェクトのメソッドとして呼び出さなければ関数中で「this」が意図したオブジェクトとならない。そこで便利なのがbindメソッド。bindメソッドを使えばthisを固定した関数を定義できる。また浅井氏はArgumentsなどをArrayに変換する関数を定義する利用例も紹介。

 3番目に取り上げたStrict Modeは「ECMA5thの中で最も重要な機能だ」と浅井氏は言う。これまでJavaScriptを書いている際、未定義変数の代入や書き込み禁止や削除禁止のプロパティ操作、オブジェクトのプロパティ名や関数の引数名の重複などよくあるミスをエラーとして検出する機能。IE9は未サポートだが、IE10ほか、Firefox4~、Chrome13~など主要ブラウザはサポートしている。「とはいえIE9でも使えないというわけではない」と浅井氏。オンにするだけなら古いブラウザでもエラーとはならず、テスト時だけ使うということもできる。また「全体に使うのはちょっと」という場合は、関数単位でも利用できる。「次世代仕様を使う際にはStrict Modeが前提になっているものがかなり出てくるなど、Strict Modeは将来的に使われていく機能。withやarguments.caller/calleeなど、禁止されているコードを書かない習慣を身につけて欲しい」(浅井氏)

 4番目に浅井氏が取り上げたのはGetter、Setter。これはプロパティ値取得や設定を行うための特別なメソッドだ。浅井氏はパフォーマンス重視の人向けのテクニックなどを披露した。

 そのほか、seal(プロパティ追加・削除禁止)やfreeze(プロパティ変更禁止)などの機能も紹介した。

 「このようにECMA5thではStrict Modeでミスを減少したり、JSONやArray関数が便利になったり、オブジェクト指向周りが強化されてきた。では次世代仕様ではどうなるのか、紹介したい」と浅井氏は語り、次世代仕様であるECMA6thの紹介へと移った。

ECMA5thの便利メソッド「Native Json」のコード例(SlideShareでも公開)



CodeZine

トピックスRSS

ランキング