jsx の現在と未来 - oct 26 2013

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

1

JSX の現在と未来Oct. 26 2013

DeNA Co., Ltd.

Kazuho Oku


2

自己紹介

名前：奥一穂経歴：

⁃ モバイルウェブブラウザ Palmscape (Xiino) の開発 (1996-2003)

⁃ IPA 未踏スーパークリエータ (2004)• 「ウェブアプリケーション統合開発環境の開発」

⁃ サイボウズ・ラボ (2005-2010)• Japanize, Pathtraq, Q4M, mycached, …

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

JSX の現在と未来


3

JSX の概要



4

altJS とは ?

JavaScript に変換して実行される言語背景 :

⁃ JavaScript の普及⁃ ウェブブラウザで動くのは JavaScript だけ• ベンダー間の競争の結果、実行速度が高速に

⁃ ウェブブラウザ以外でも JavaScript を使うように• サーバサイド : node.js

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

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



5

JSX とは ?

DeNA でを中心に開発している altJS

⁃ JavaScript の言語仕様にできるだけ沿いつつ、以下を実現

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

2012/5/31 に公開



6JSX の現在と未来


7

altJS の種類

CoffeeScript

⁃ JavaScript と 1:1 対応する文法⁃ 意味論は変更しない

TypeScript

⁃ JavaScript の上位互換 JSX

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

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



8

DeNA における JavaScript

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

専用内製ライブラリ／フレームワークの使用が多い⁃ ngCore, ExGame, Post ExGame, …

⁃ スマホ上での実行が多い + 一部サーバサイド頻繁なコード変更

⁃ ゲーム内イベント等



9

直面した問題

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

実行速度が遅いロード時間と使用メモリ量の増大

⁃ スマートフォンは PC より貧弱



10

解決策 : JSX の開発

課題 : 生産性と品質担保→ コンパイル時にエラー検知

課題 : 実行速度→ JavaScript への変換時に最適化コンパイル• 型情報を利用したインライン展開や定数畳み込み

課題 : ロード時間と使用メモリ量→ 強力な minify• 静的型付け必須だからプロパティ名の安全確実なリネー

ムが可能トレードオフ : JavaScript の動的な性質を利用したラ

イブラリとの接続が煩雑に



11

静的型付けで生産性と品質が向上する理由

変数名やメソッドの存在をコンパイル時に検証できる⁃ 全ての値は、代入するまで参照不可能⁃ 以下のような JS でよくある現象と戦わなくていい• “Object foo has no method ’bar’”

• “foo is not defined”

• いつのまにか値が NaN

実行時にエラーチェックを行うことができる⁃ 配列の未初期化要素へのアクセスを検出

⁃ デバッグビルドの場合のみ



12

なぜ静的型付けを必須としたのか

型付けが Optional なら JavaScript 上位互換なのに⁃ 例 : CoffeeScript, Google Closure Compiler

オプショナルな型付けの問題⁃ 型付けがないコードが混在すると、コンパイル時の

エラーチェックが困難に⁃ 安全な最適化や minify ができない



13

JSX の文法

できるだけ JavaScript っぽく⁃ プログラマの多くは、新しい言語を学びたいとは思っていない

JSX = JavaScript の式と文 + 型アノテーション + 型推論 + クラスベースのオブジェクト指向

(単一クラス継承、複数インターフェイス継承 )

( メソッドのオーバーロード可能 )



14

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

}

}



15

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



16

Performance Benchmarks

Box2D

⁃ box2d.js を JSX に移植して fps を測定⁃ iOS 5.0 – 12% 向上⁃ Android 2.3 – 29% 向上

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


JavaScript

JSX

TypeScript

Haxe

0 0.2 0.4 0.6 0.8 1 1.2 1.4 1.6 1.8

処理速度

iOSAndroid


プロファイラ

17


呼出回数や総実行時間を測定⁃ サンプリングではない

あらゆる環境で実行可能


18

Minify

強力かつ安全な minify

⁃ プロパティ名の短縮は静的型付けが必須でない限り不可能



19

JSX 公開後の進化



20

JSX 公開後の進化

セルフホスティング⁃ JSX のコンパイラを JSX へ移植

minify 型推論の強化

⁃ var a = [1,2,3].map((x) -> 3 * x)• a の型は number[]

オプティマイザの強化⁃ メソッドの関数への変換、末尾再帰のループ展開等

JavaScript との互換性の強化⁃ export 属性、バインディングのインライン定義



21

バインディング／ライブラリの増加

W3C API

⁃ ほぼ全対応• IDL から自動生成

node.jsx

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

Qt.jsx, Ext.jsx, tmlib.jsx, mizuki, …

⁃ ごめんなさいなんかいろいろ忘れてる気が



22

現在の開発体制

ゆるふわにこんな感じ ?


名前主な貢献kazuho リーダー , 言語仕様 , コンパイラ実装gfx コンパイラ実装 , テストフレームワーク , W3C バインディン

グwasabiz セルフホスティング , オプティマイザ , 言語仕様拡張shibukawa バインディング , パッケージ管理


23

DeNA における JSX の使用状況

社内における普及方針⁃ 複雑なライブラリの新規開発で JSX を使用⁃ その後、それらを使うゲームでも JSX を使用• 理由 : 既存のゲームを JSX に移植するのは非現実的

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

• HTML5 上で動作するスプライト描画系• node.js 上で動作するサーバサイドフレームワーク

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



24

社内開発の教訓

言語仕様は枯れている⁃ 学習コストはそれほど高くなさそう

最適化関連のバグを踏むことがある⁃ デバッグビルドは品質高い• 開発中はデバッグビルドでエラー検出するのが便利

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



25

JSX の未来



26

予定している拡張

async 対応⁃ 非同期処理を同期的に書けるように

JSX のパッケージ管理⁃ npm として公開する方向

ドキュメント強化⁃ 必要ですよね…



27

まとめ



28

まとめ

JSX は得失のはっきりした altJS

⁃ メリット :• 強力なエラー検出機能• 実行速度とサイズの両面における最適化

⁃ デメリット :• JavaScript で書かれた既存との接続が煩雑

プロダクションレベルの成熟度⁃ 今後も機能追加します／互換性は壊しません

新規開発案件にオススメ⁃ バインディングは今後増えて行くでしょうが⁃ 既存ライブラリへの依存が少ないとなお良い


jsx の現在と未来 - oct 26 2013

Technology