JSX の現在と未来 - Oct 26 2013

JSX の現在と未来
Oct. 26 2013
DeNA Co., Ltd.
Kazuho Oku

1
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.

自己紹介
 名前：奥一穂
 経歴：
⁃ モバイルウェブブラウザ Palmscape (Xiino) の開発
(1996-2003)
⁃ IPA未踏スーパークリエータ (2004)
•

「ウェブアプリケーション統合開発環境の開発」

⁃ サイボウズ・ラボ (2005-2010)
•

Japanize, Pathtraq, Q4M, mycached, …

⁃ ディー・エヌ・エー (2010-) R&Dに従事


2

JSX の概要


3

altJS とは?
 JavaScript に変換して実行される言語
 背景:
⁃ JavaScript の普及

⁃ ウェブブラウザで動くのは JavaScript だけ
•

ベンダー間の競争の結果、実行速度が高速に

⁃ ウェブブラウザ以外でも JavaScript を使うように
•

サーバサイド: node.js

•

クライアントサイド: Titanium, PhoneGap, ngCore, …

⁃ 適用範囲が拡大した結果、不満が噴出


4

JSX とは?
 DeNA でを中心に開発している altJS
⁃ JavaScript の言語仕様にできるだけ沿いつつ、以下
を実現

⁃ 静的型付け
⁃ クラスベースのオブジェクト指向
⁃ 最適化コンパイラ

 2012/5/31 に公開


5


6

altJS の種類
 CoffeeScript
⁃ JavaScript と1:1対応する文法
⁃ 意味論は変更しない

 TypeScript
⁃ JavaScript の上位互換
 JSX

⁃ JavaScript の下位互換 + 独自拡張
 Java Web Toolkit, Haxe, Emscripten, …

⁃ 既存のプログラミング言語を JavaScript に変換


7

DeNA における JavaScript
 JavaScript による大規模開発
⁃ 数万行〜10万行規模に及ぶコードベース
⁃ 開発メンバーの入れ替わりが激しい

 専用内製ライブラリ／フレームワークの使用が多い
⁃ ngCore, ExGame, Post ExGame, …
⁃ スマホ上での実行が多い + 一部サーバサイド

 頻繁なコード変更
⁃ ゲーム内イベント等


8

直面した問題
 生産性と品質担保
⁃ 実行するまでバグが見つからない
⁃ GUI やネットワークまわりはテストが難しい

 実行速度が遅い
 ロード時間と使用メモリ量の増大
⁃ スマートフォンは PC より貧弱


9

解決策: JSX の開発
 課題: 生産性と品質担保
→ コンパイル時にエラー検知
 課題: 実行速度

→ JavaScriptへの変換時に最適化コンパイル
•

型情報を利用したインライン展開や定数畳み込み

 課題: ロード時間と使用メモリ量

→ 強力なminify
•

静的型付け必須だからプロパティ名の安全確実なリネー
ムが可能

 トレードオフ: JavaScript の動的な性質を利用したラ
イブラリとの接続が煩雑に

10

静的型付けで生産性と品質が向上する理由
 変数名やメソッドの存在をコンパイル時に検証できる
⁃ 全ての値は、代入するまで参照不可能
⁃ 以下のような JS でよくある現象と戦わなくていい
•

“Object foo has no method ’bar’”

•

“foo is not defined”

•

いつのまにか値が NaN

 実行時にエラーチェックを行うことができる
⁃ 配列の未初期化要素へのアクセスを検出
⁃ デバッグビルドの場合のみ


11

なぜ静的型付けを必須としたのか
 型付けが Optional なら JavaScript 上位互換なのに
⁃ 例: CoffeeScript, Google Closure Compiler
 オプショナルな型付けの問題

⁃ 型付けがないコードが混在すると、コンパイル時の
エラーチェックが困難に
⁃ 安全な最適化やminifyができない


12

JSX の文法
 できるだけ JavaScript っぽく
⁃ プログラマの多くは、新しい言語を学びたいとは思
っていない
JSX = JavaScript の式と文
+ 型アノテーション

+ 型推論
+ クラスベースのオブジェクト指向
(単一クラス継承、複数インターフェイス継承)
(メソッドのオーバーロード可能)


13

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);
}
}

14

JSX のコード例（アフィン変換）
 JSX のソースコード:
new Matrix(1, 0, 0, 0, 2, 0).transform(new Point(x, y))

 生成される 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


15

Performance Benchmarks
 Box2D
⁃ box2d.js を JSX に移植して fps を測定
⁃ iOS 5.0 – 12%向上

⁃ Android 2.3 – 29%向上
 AOBench
⁃

http://spheresofa.net/blog/?p=757

処理速度

Haxe

TypeScript
iOS
Android

JSX

JavaScript

0

0.5

1

1.5

2
16


プロファイラ
 呼出回数や総実行時間を測定
⁃ サンプリングではない
 あらゆる環境で実行可能


17

Minify
 強力かつ安全な minify
⁃ プロパティ名の短縮は静的型付けが必須でない限り
不可能
Impact of Minifica on
Total

ngCore HTML5
jsx --release
jsx --release | uglifyjs
JSX

jsx --release | esmangle
jsx --release --minify

v8bench.jsx
0


0.2
0.4
0.6
0.8
1
byte size of generated code(ra o)

1.2

18

JSX 公開後の進化


19

JSX 公開後の進化
 セルフホスティング
⁃ JSX のコンパイラを JSX へ移植
 minify

 型推論の強化
⁃ var a = [1,2,3].map((x) -> 3 * x)
•

a の型は number[]

 オプティマイザの強化
⁃ メソッドの関数への変換、末尾再帰のループ展開等
 JavaScript との互換性の強化
⁃ export 属性、バインディングのインライン定義


20

バインディング／ライブラリの増加
 W3C API
⁃ ほぼ全対応
•

IDLから自動生成

 node.jsx
⁃ node.js 用のバインディングを淡々と作っていくよ
⁃ コア, mysql, memcached, needle, …

 Qt.jsx, Ext.jsx, tmlib.jsx, mizuki, …
⁃ ごめんなさいなんかいろいろ忘れてる気が


21

現在の開発体制
 ゆるふわにこんな感じ?
名前

主な貢献

kazuho

リーダー, 言語仕様, コンパイラ実装

gfx

コンパイラ実装, テストフレームワーク, W3C バインディング

wasabiz

セルフホスティング, オプティマイザ, 言語仕様拡張

shibukawa

バインディング, パッケージ管理


22

DeNA における JSX の使用状況
 社内における普及方針
⁃ 複雑なライブラリの新規開発で JSX を使用
⁃ その後、それらを使うゲームでも JSX を使用
•

理由: 既存のゲームを JSX に移植するのは非現実的

 社内の使用状況
⁃ JSX で開発されたライブラリが複数存在
•

ngCore on HTML5

•

HTML5 上で動作するスプライト描画系

•

node.js 上で動作するサーバサイドフレームワーク

⁃ それらを使ったゲーム開発プロジェクトが複数


23

社内開発の教訓
 言語仕様は枯れている
⁃ 学習コストはそれほど高くなさそう
 最適化関連のバグを踏むことがある

⁃ デバッグビルドは品質高い
•

開発中はデバッグビルドでエラー検出するのが便利

⁃ 早期から最適化オプションを使ったテストをすべき


24

JSX の未来


25

予定している拡張
 async対応
⁃ 非同期処理を同期的に書けるように
 JSX のパッケージ管理

⁃ npm として公開する方向
 ドキュメント強化
⁃ 必要ですよね…


26

まとめ


27

まとめ
 JSX は得失のはっきりした altJS
⁃ メリット:
•

強力なエラー検出機能

•

実行速度とサイズの両面における最適化

⁃ デメリット:
•

JavaScript で書かれた既存との接続が煩雑

 プロダクションレベルの成熟度
⁃ 今後も機能追加します／互換性は壊しません
 新規開発案件にオススメ
⁃ バインディングは今後増えて行くでしょうが
⁃ 既存ライブラリへの依存が少ないとなお良い

28

JSX の現在と未来 - Oct 26 2013

More Related Content

JSX の現在と未来 - Oct 26 2013