1. JSX
Design Overview
DeNA Co., Ltd.
Kazuho Oku

2. 自己紹介
 1997-2003 「Palmscape」「Xiino」の開発者
 Palm OS用Webブラウザ (Sony, IBM, DoCoMo 等が採用)
 JavaScript VMもフルスクラッチで書いていた
 2004 IPA未踏「Webアプリ統合開発環境の開発」
 スーパークリエータ認定
 Perlのウェブブラウザ上でのデバッガ等
 2005-2010 サイボウズ・ラボ
 Japanize, Pathtraq – ブラウザ拡張を使うウェブサービス
 Q4M – メッセージキュー (Mixi, livedoor, DeNA 等で利用)
 2011- ディー・エヌ・エー
 JavaScript 等、プラットフォーム技術の研究開発
May 31 2012 JSX - Design Overview 2

3. JSX の目標
優れたウェブブラウザ用プログラミング
言語
JavaScript より速く
ブラウザゲームは速度重要。超重要
JavaScript より開発効率が高く
特に中〜大規模開発において
メンテナンスコストも重要
JavaScript より成果物の品質が向上
サービスに影響があるバグの中には JavaScript で書か
れたコードが原因のものもある
May 31 2012 JSX - Design Overview 3

4. JavaScript の問題
生産性が低い
実行しないとバグが見つからない
成果物の品質が低い
遅い
メモリ食い
初動が遅い
May 31 2012 JSX - Design Overview 4

5. JavaScript の問題 = 動的な言語である点
実行時に「しか」エラーチェックできな
い
→ 生産性と品質に悪影響
実行時に適応コンパイル
→ 実行速度、起動速度、メモリ消費量に悪影響
コンパイラ系の最適化技術が活用されな
い
JIT で可能な最適化には限界 or オーバーヘッドが存在
→ 実行速度に悪影響
May 31 2012 JSX - Design Overview 5

6. 解決策
独自のプログラミング言語を開発
JavaScript に静的な型機構を追加
like ActionScript 3 / EcmaScript 4
JavaScript への変換時に最適化
JavaScript より高速に！
May 31 2012 JSX - Design Overview 6

7. 先行事例
いずれも一長一短
実行環境 生産性と品質 速度
(PC Web / SP Web)
JavaScript ○/○ △ △
Google Web Toolkit ○/△ □ ×
Google Closure Compiler ○/○ △ □
Dart △/△ ○ ×
ActionScript 3 △/× ○ ○
JSX ○/○ ○ ○
Google Web Toolkit は JVM と JavaScript へのトランスレータの互換性に難あり。Google Closure Compiler には、生産性／品質
と速度の間にトレードオフあり（ADVANCED_OPTIMIZATIONS モードを使用するには煩雑でエラーチェックの弱い型アノテー
ションを書く必要があるため）。Dart はネイティブサポートしたブラウザがないに等しく、JavaScript へのトランステータだ
と実行速度低下。ActionScript 3 は要フラッシュ、スマートホンのブラウザ上で動作しない。
May 31 2012 JSX - Design Overview 7

8. JSX の言語設計方針
静的型言語
できるだけ多くのエラーをコンパイル時に検出
開発効率と品質の向上につながる
式と文は JavaScript + 型指定
開発者がとっつきやすいように
JS への変換におけるオーバーヘッドを最小化
デバッグ支援コードの挿入
静的なクラス構造
リンク時最適化を含むコンパイル時最適化
May 31 2012 JSX - Design Overview 8

9. JSX が解決する JavaScript の問題
生産性が低い / 成果物の品質が低い
→ コンパイル時のエラーチェック + デバッグ支援
速度が遅い
→ コンパイル時最適化
メモリ食い
→ ???
初動が遅い
→ ???
May 31 2012 JSX - Design Overview 9

10. JavaScript との連携
JS のオブジェクトは JSX 内ではキャストし
て使用
(js.global["alert"] as function (:string):void)("hello");
JS から JSX を呼び出すには require
 JSX.require("foo.jsx")._Main.run$();
May 31 2012 JSX - Design Overview 10

11. 最適化
JavaScript より遅くはならない
理由： 式と文が１対１対応だから
型情報を使ったインライン展開を実装
中〜大規模開発でプロジェクトで特に有効
Google Closure Compiler では不可能な展開も実現
型アノテーションつきの JavaScript を出
力
Closure Compiler で更に最適化可能
つまり JSX で書くだけで Closure Compiler
May 31 2012 (ADVANCED_OPTIMIZATIONS) 以上の高速化
JSX - Design Overview 11

12. 最適化の実装状況
数種類のテストプログラムで JavaScript
より高速なことを確認
大域最適化から優先して実装中
インライン展開
既に Google Closure Compiler より優秀?
定数畳み込み
リンク時最適化
コードの可読性が下がらない最適化はあとまわし
例: loop-invariant code motion, CSE
May 31 2012 JSX - Design Overview 12