1. JSX公開から１年を迎えて
DeNA Co., Ltd.
Kazuho Oku

2. 自己紹介
n 名前：奥 一穂
n 経歴：
n モバイルウェブブラウザ「Palmscape」「Xiino」の開発
(1996-2003)
n IPA未踏スーパークリエータ (2004)
n サイボウズ・ラボ (2005-2010)
n Japanize, Pathtraq, Q4M, mycached, …
n ディー・エヌ・エー (2010-)
n R&Dに従事
Aug 24 2013 JSX - 公開から１年を迎えて 2

3. altJS とは?
n JavaScript に変換して実行される言語
n 背景: JavaScript の普及
n ウェブブラウザで動くのは JavaScript だけ
n ベンダー間の競争の結果、実行速度が高速に
n ウェブブラウザ以外でも JavaScript を使うように
n サーバサイド: node.js
n クライアントサイド: Titanium, PhoneGap, ngCore, …
n 適用範囲が拡大した結果、不満が噴出…
Aug 24 2013 JSX - 公開から１年を迎えて 3

4. JSX とは?
n DeNA でを中心に開発している altJS
n JavaScript がベース
n 静的型付け
n クラスベースのオブジェクト指向
n 最適化コンパイラ
Aug 24 2013 JSX - 公開から１年を迎えて 4

5. Aug 24 2013 JSX - 公開から１年を迎えて 5

6. altJS の種類
n CoffeeScript
n JavaScript と1:1対応する文法
n TypeScript, Dart, …
n JavaScript の上位互換
n JSX
n JavaScript の下位互換 + 独自拡張
n Java Web Toolkit, Haxe, Emscripten, …
n 既存のプログラミング言語を JavaScript に変換
Aug 24 2013 JSX - 公開から１年を迎えて 6

7. DeNA における JavaScript
n JavaScript による大規模開発
n 専用内製ライブラリ／フレームワークの使用が多い
n ngCore, ExGame, Post ExGame, …
n スマホ上での実行が多い + 一部サーバサイド
n 数万行に及ぶコードベース
n 頻繁なコード変更
n ゲーム内イベント等
Aug 24 2013 JSX - 公開から１年を迎えて 7

8. 直面した問題
n 生産性と品質担保
n 実行するまでバグが見つからない
n GUI やネットワークまわりはテストが難しい
n 実行速度が遅い
n ロード時間と使用メモリ量の増大
n スマートフォンは PC より貧弱
Aug 24 2013 JSX - 公開から１年を迎えて 8

9. 解決策 = JSX の開発
n JSX： 静的型付け必須なJavaScriptの方言
n 課題：生産性と品質担保
→ コンパイル時にエラー検知
n 課題：実行速度
→ JavaScriptへの変換時に最適化コンパイル
n 型情報を利用したインライン展開や定数畳み込みが可能
n 課題：ロード時間と使用メモリ量
→ 強力なminify
n 静的型付け必須だから、プロパティの安全確実なリネームが可能
n トレードオフ
n JavaScript の動的な性質を利用したライブラリと接続が煩雑に
Aug 24 2013 JSX - 公開から１年を迎えて 9

10. なぜ静的型付けを必須としたのか
n 型付けが Optional なら JavaScript 上位互
換なのに
n 例: CoffeeScript, Google Closure Compiler
n オプショナルな型付けの問題
n 型付けがないコードが混在すると、コンパイル時のエ
ラーチェックが困難に
n 安全な最適化やminifyができない
Aug 24 2013 JSX - 公開から１年を迎えて 10

11. JSX の文法
JSX = JavaScript の式と文
+ 型アノテーション
+ 型推論
+ クラスベースのオブジェクト指向
n 単一クラス継承、複数インターフェイス継承
n メソッドのオーバーロード可能
Aug 24 2013 JSX - 公開から１年を迎えて 11

12. JSX のコード例
class Point {
var x : number, y : number;
function constructor(x : number, y : number) {
this.x = x;
this.y = y;
}
}
class Matrix {
var a11 : number, a12 : number, a13 : number
var a21 : number, a22 : number, a23 : number;
function constructor(a11 : number, a12 : number, (省略)) {
this.a11 = a11;
(省略)
}
function transform(pt : Point) : Point {
return new Point(
this.a11 * pt.x + this.a12 * pt.y + this.a13,
this.a21 * pt.x + this.a22 * pt.y + this.a23);
}
}
Aug 24 2013 JSX - 公開から１年を迎えて 12

13. 最適化コンパイル例 – アフィン変換
n JSX のソースコード:
new Matrix(1, 0, 0, 0, 2, 0).transform(new Point(x, y))
n 生成される JavaScript:
{x: x + 0 * y, y: 0 * x + 2 * y}
Note: 0 * n cannot be folded since it is equiv. to: isNaN(n) ? NaN : 0
Aug 24 2013 JSX - 公開から１年を迎えて 13

14. Performance Benchmarks
n Box2D
n convert box2d.js to JSX and measure the fps
n iOS 5.0 – 12% speed-up
n Android 2.3 – 29% speed-up
n AOBench
n from http://spheresofa.net/blog/?p=757
Aug 24 2013 JSX - 公開から１年を迎えて
0 0.5 1 1.5 2
JavaScript
JSX
TypeScript
Haxe
処理速度
iOS
Android
14

15. Minify
Aug 24 2013 JSX - 公開から１年を迎えて
n Minify is safe and more effective thanks
to the type information
0" 0.2" 0.4" 0.6" 0.8" 1" 1.2"
Total"
ngCore"HTML5"
JSX"
v8bench.jsx"
byte%size%of%generated%code(ra2o)%
Impact%of%Minifica2on
jsx"AArelease"
jsx"AArelease"|"uglifyjs"
jsx"AArelease"|"esmangle"
jsx"AArelease"AAminify"
15

16. リリース後の進化
n セルフホスティング
n JSX のコンパイラを JSX へ移植
n 型推論の強化
n var a = [1,2,3].map((x) -> 3 * x)
n a の型は number[]
n オプティマイザの強化
n メソッドの関数への変換、末尾再帰のループ展開等
n JavaScript との互換性の強化
n export 属性、バインディングのインライン定義
Aug 24 2013 JSX - 公開から１年を迎えて 16

17. JSX の今後
n バグフィックス、最適化の改善
n 社内外のプロジェクトのサポート
n node.js 対応の強化
n W3C 策定のブラウザAPIは、ほぼすべて対応済
n TypedArray とか WebGL も
n async 属性
n 通常の関数同様に書かれたコードを、非同期ベース
の JavaScript にコンパイル
Aug 24 2013 JSX - 公開から１年を迎えて 17

18. まとめ
n JSX は得失のはっきりした altJS
n メリット:
n 強力なエラー検出機能
n 実行速度とサイズの両面における最適化
n デメリット:
n JavaScript で書かれた既存との接続が煩雑
n 既存ライブラリに依存しない新規プロジェク
トにオススメ
n 例: HTML 5 Canvas を使うゲームを大量に作ったり
とか…
Aug 24 2013 JSX - 公開から１年を迎えて 18