新春特別企画

2012年のJavaScript~PCからモバイルの時代へ

この記事を読むのに必要な時間:およそ 4 分

あけましておめでとうございます。一昨年昨年に引き続き,今年も昨年のJavaScriptを振り返りつつ,JavaScriptの近い未来についてちょっとだけお話させて頂きます。

それでは早速,昨年の予想を振り返りつつ,最近までのJavaScript界隈の動きを振り返ってみましょう。

2011年のJavaScript界隈でのニュース

昨年の記事で私は2011年はウェブアプリの普及に向けて,JavaScriptの開発環境とテスト環境がキーになると書きました。まずはこの2つの視点から見てみましょう。

JavaScriptの開発環境

2011年のJavaScriptの開発環境に関する大きなニュースといえば,Ruby on Railsの3.1にCoffeeScriptがデフォルトで採用されたという一件があります。Railsは非常に人気の高いウェブアプリケーションフレームワークで,多くのフレームワークに多大な影響を与え続けている先駆者的存在です。そのRailsでCoffeeScriptが採用されたということは大きな意味を持っています。

CoffeeScriptとは

そもそも,CoffeeScriptとはなんでしょうか? CoffeeScriptはPythonやRubyに似た文法を持ち,Haskellなどの関数型言語のアイディアを取り入れつつ,ECMAScript5とECMAScript Harmony(検討中のECMAScript次世代仕様)の成果も取り入れた,JavaScriptを生成するための小さな言語です。CoffeeScriptはJavaScriptを置き換えるものではなく,むしろJavaScriptを書くためのツールに近い存在です。

CoffeeScriptはシンタックスが簡潔なだけでなく,JavaScriptのよくないところ(変数宣言を忘れた変数がグローバル変数になってしまうといった,さまざまなバッドノウハウ)の面倒を見てくれるので,JavaScriptに不慣れなプログラマーにとって嬉しい存在です。また,CoffeeScriptの生成するJavaScriptは速度や可読性も配慮されているので,速度的にも問題ありませんし,デバッグもそれほど難しくありません。

また大規模開発など,複数人でJavaScriptをメンテナンスするときには,JavaScriptのベストプラクティスを自然に共有できるCoffeeScriptは非常に嬉しい存在です。

ただし,コンパイルという手間が入るので,そこを自動化する仕組みが必要ですし,エラーの起きた行に対応するソースコードを探すのにも一手間かかってしまうといったデメリットもあります。JavaScriptを日常的に書き慣れているプログラマーにとって,自分自身でCoffeeScriptを書くことにはそれほど魅力を感じないかもしれません。

GoogleのDart

CoffeeScriptと似て非なるアプローチとして,JavaScriptを置き換える言語として,GoogleはDartを発表しました。DartはJavaScriptに変換するツールも備えていますが,あくまで最終目標はJavaScriptをDartで置き換えることです。

Dartは大規模開発での利用に特化した設計になっており,JavaのようにIDE上で静的に解析できるようにデザインされています。また,当然ながらJavaScriptの良い点,悪い点から学んで,シンプルかつ強力な言語となっています。

ただし,今のところDartをサポートする予定があるのはGoogle Chromeのみで,MicrosoftなどはMSDN Blogsの記事の中でDartを支持しない方針を明らかにしています。DartはJavaScriptにコンパイルすることも可能ですが,Dartが出力するJavaScriptはCoffeeScriptと違い,可読性が悪く,基本的に冗長です。最適化オプションもありますが,そうすると難読化に等しくなってしまいデバッグが困難になってしまうといった問題があります。

デバッグ環境の進化

IE 9はウェブ標準への準拠が飛躍的に向上し,それまでIE専用に対策しなければいけなかった部分が大幅に改善されました。またIE 9に搭載されたF12開発者ツールはFirefoxのFirebug,WebKitのWebInspectorに劣らない機能が盛り込まれており,特に難読化されたJavaScriptを整形する機能が特徴的でした。F12開発者ツール上で整形したJavaScriptにブレークポイントを設置し,ステップ実行もできるなど,難読化されたコードのデバッグのしやすさが大きく変わりました。この難読化解除機能はFirebugのAdd-onや,Google ChromeのDeveloper Tools,SafariのWebInspectorなどにも実装されています。

FirefoxはこれまでAdd-onにFirebugなどが存在したため,Firefox本体にはデバッグ機能がほとんどありませんでした。しかし,最近ではWeb開発ツールが標準で搭載され,いくつかの面白い機能が搭載されています。特にFirefox 11から搭載される予定の3Dインスペクタは面白いので,是非試してみてくださいTilt 3DというAdd-onでも同様のことができます)。

図1 Firefox11の3Dインスペクタ

図1 Firefox11の3Dインスペクタ

また,スマートフォン向けのデバッグ環境として,weinreが登場しました。weinreは,PC上でデバッグサーバーを起動して,iPhoneやAndroidのブラウザ上でブックマークレットからサーバーに繋ぐことで,実機上のブラウザの中をWebInspectorで解析することができます。ブックマークレットは1つのjsファイルを読み込むだけなので,サイト側にそのjsファイルを埋めこんでおくこともできます。将来的にはWebInspectorネイティブのリモートデバッグが可能になる予定もありますが,今のところweinreは十分に活躍してくれます。

JavaScriptのテスト環境

Sencha IncのAriya Hidayat氏はSenchaのJasmine(JavaScript用テスティングフレームワーク)で書かれたテストを高速に実行するために,QtWebKitを専用にビルドし,Jasmine専用のテストランナーを作りましたHeadless Testing for Continuous Integration with Git and Jasmine)。その後,Ariya氏はPhantomJSというアプリケーションを作りました。PhantomJSは,QtWebKitをJavaScriptのAPIで操作できるようにしたツールで,JavaScriptの実行結果を含めたスクレイピングやスクリーンショットを取るといったことが手軽にできるようになっています。当然このPhantomJSをJavaScriptのテスト環境として利用することもできます。実際のブラウザを操作するSeleniumよりも大幅に高速で,しかも実際のブラウザに極めて近い再現度という,比較的理想に近いテスト環境といえます。

ただ,PhantomJSは日常に使うちょっとしたツールといったコンセプトで作られており,サンプルも「ピザ屋を探す」,「天気予報をみる」などといったものが中心です。さらに,PhantomJSは外部から操作するためのAPIが(2011年時点では)用意されていないため,テストを実行させるには少々使いにくい面もあります。

テストを実行する環境としては(フレームワークがJasmineに限定されますが),jasmine-headless-webkitなどがオススメです。

ECMAScript 5の普及とECMAScript 6

その他のニュースとして,2009年12月に改訂されたECMA−262 5th Editionの実装がひと通り出揃いました。Firefox 4+,Google Chrome 13+,IE 9+,Safari 5.1+,Opera 10.60+と,それぞれの最新ブラウザではECMAScript 5で追加されたAPIをほぼ実装し終えています。IE 9はstrict modeをサポートしていないなど,多少の誤差はありますが,最新ブラウザをターゲットにする限りは十分に使えるレベルになってきました。

しかし,ECMAScript 5はマイナーチェンジだったにも関わらず,実装が揃うまでに約2年かかり,現在の最新ブラウザが十分に普及するまでにはさらに時間が必要となるでしょう。これは今後のECMAScriptの進化について,不安材料といえます。

とはいえ,最近ではECMAScript 6の試験実装も進んできており,高速リリースを始めたFirefoxをはじめ,Google Chromeなどに実装され始めています。特にChromeのv8ではProxyやWeakMapなどの実装が利用できるようになっています(Chrome 18以降なら,about:flagsから有効にできます)。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/

コメント

コメントの記入