CodeZine(コードジン)

特集ページ一覧

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/03/27 16:00

 本稿では、「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 浅井智也氏
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でも公開
ECMA5thの便利メソッド「Native Json」のコード例

ECMAScript 6thでさらに扱いやすく、大規模開発も可能に

 「ECMA6thでは、JavaScriptの言語仕様をもっときれいにもっと書きやすくしようと取り組んでいる。そのほか大規模開発にも使えるように、モジュールやライブラリを整理したり、テストや相互運用性を向上したりしている」(浅井氏)

 またバージョニングが複雑にならないように考慮されている、と浅井氏は言う。現行仕様のECMA5thでは従来のクラシックモードとStrictモードを、「"use script";」という文字列を使って切り替えている。この2種類のモードにさらに6thのオン・オフが加わると、面倒になる。できるだけモードの切り替えをしないような検討をしている、と浅井氏。これが決まれば、「どのモードでどんなことができるか決まってくるので、最新情報を知りたい人はチェックして欲しい」ということだ。

 実際、ECMA6thのサポート状況はどうなっているのか。ここで浅井氏は各ブラウザの対応状況を紹介する。「今はまだFirefoxとChromeが一部の機能をサポートしているだけという状況だ」と浅井氏。もちろんECMA6thにも「es6-shim」などの後方互換スクリプトが用意されているので、これを最初に読み込めばすでに実装されている機能はもちろん、ブラウザで実装されてはいないが提案されている機能も一部は使えるようになるという。

 続けて浅井氏は実際にサポートしている機能の紹介に移った。最初に取り上げたのがSimple Map。これはPythonのdict、RubyのHash、Javaのjava.util.HashMapなどと同じ機能を提供する。Firefox12やChrome18でサポートされているが、未実装でも先に紹介したshimスクリプトを読み込ませることで使える。

 次はSimple Set。これもmapと同じで他の言語にあるsetと同じ機能を提供する。mapやsetも使うときの注意点がある。JavaScriptでは内部的には-0と+0は別の値となり、Simple Mapのキー比較時には区別される。使う際はこの点に留意して欲しい、と浅井氏。

 次世代仕様でぜひ知っておいて欲しい機能として浅井氏が挙げたのが、Typed Arrayだ。型固定配列で高速数値演算ができるというもの。このほかにもまだまだたくさん機能がある。次世代仕様はすごく楽しい、と浅井氏。

 10年前はJavaの出来損ないと誰も尊敬してくれなかったJavaScript。現在、HTML5の基盤言語となった。「さらに10年後。本家のJavaを超える存在になっていて欲しい」。

 そう、浅井氏は熱く語り、セッションは終了した。

ECMA6thに実装される「Simple Map」の使い方(SlideShareでも公開
ECMA6thに実装される「Simple Map」の使い方
お問い合わせ

一般社団法人 Mozilla Japan

http://mozilla.jp/

Mozilla Japan 広報担当

press@mozilla-japan.org

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • CodeZine編集部(コードジンヘンシュウブ)

    CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5