Download - JSX の現在と未来 - Oct 26 2013
![Page 1: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/1.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
1
JSX の現在と未来Oct. 26 2013
DeNA Co., Ltd.
Kazuho Oku
![Page 2: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/2.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
2
自己紹介
名前:奥 一穂 経歴:
⁃ モバイルウェブブラウザ Palmscape (Xiino) の開発 (1996-2003)
⁃ IPA 未踏スーパークリエータ (2004)• 「ウェブアプリケーション統合開発環境の開発」
⁃ サイボウズ・ラボ (2005-2010)• Japanize, Pathtraq, Q4M, mycached, …
⁃ ディー・エヌ・エー (2010-) R&D に従事
JSX の現在と未来
![Page 3: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/3.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
3
JSX の概要
JSX の現在と未来
![Page 4: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/4.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
4
altJS とは ?
JavaScript に変換して実行される言語 背景 :
⁃ JavaScript の普及⁃ ウェブブラウザで動くのは JavaScript だけ• ベンダー間の競争の結果、実行速度が高速に
⁃ ウェブブラウザ以外でも JavaScript を使うように• サーバサイド : node.js
• クライアントサイド : Titanium, PhoneGap, ngCore, …
⁃ 適用範囲が拡大した結果、不満が噴出
JSX の現在と未来
![Page 5: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/5.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
5
JSX とは ?
DeNA でを中心に開発している altJS
⁃ JavaScript の言語仕様にできるだけ沿いつつ、以下を実現
⁃ 静的型付け⁃ クラスベースのオブジェクト指向⁃ 最適化コンパイラ
2012/5/31 に公開
JSX の現在と未来
![Page 6: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/6.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
6JSX の現在と未来
![Page 7: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/7.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
7
altJS の種類
CoffeeScript
⁃ JavaScript と 1:1 対応する文法⁃ 意味論は変更しない
TypeScript
⁃ JavaScript の上位互換 JSX
⁃ JavaScript の下位互換 + 独自拡張 Java Web Toolkit, Haxe, Emscripten, …
⁃ 既存のプログラミング言語を JavaScript に変換
JSX の現在と未来
![Page 8: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/8.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
8
DeNA における JavaScript
JavaScript による大規模開発⁃ 数万行〜 10 万行規模に及ぶコードベース⁃ 開発メンバーの入れ替わりが激しい
専用内製ライブラリ/フレームワークの使用が多い⁃ ngCore, ExGame, Post ExGame, …
⁃ スマホ上での実行が多い + 一部サーバサイド 頻繁なコード変更
⁃ ゲーム内イベント等
JSX の現在と未来
![Page 9: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/9.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
9
直面した問題
生産性と品質担保⁃ 実行するまでバグが見つからない⁃ GUI やネットワークまわりはテストが難しい
実行速度が遅い ロード時間と使用メモリ量の増大
⁃ スマートフォンは PC より貧弱
JSX の現在と未来
![Page 10: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/10.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
10
解決策 : JSX の開発
課題 : 生産性と品質担保→ コンパイル時にエラー検知
課題 : 実行速度→ JavaScript への変換時に最適化コンパイル• 型情報を利用したインライン展開や定数畳み込み
課題 : ロード時間と使用メモリ量→ 強力な minify• 静的型付け必須だからプロパティ名の安全確実なリネー
ムが可能 トレードオフ : JavaScript の動的な性質を利用したラ
イブラリとの接続が煩雑に
JSX の現在と未来
![Page 11: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/11.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
11
静的型付けで生産性と品質が向上する理由
変数名やメソッドの存在をコンパイル時に検証できる⁃ 全ての値は、代入するまで参照不可能⁃ 以下のような JS でよくある現象と戦わなくていい• “Object foo has no method ’bar’”
• “foo is not defined”
• いつのまにか値が NaN
実行時にエラーチェックを行うことができる⁃ 配列の未初期化要素へのアクセスを検出
⁃ デバッグビルドの場合のみ
JSX の現在と未来
![Page 12: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/12.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
12
なぜ静的型付けを必須としたのか
型付けが Optional なら JavaScript 上位互換なのに⁃ 例 : CoffeeScript, Google Closure Compiler
オプショナルな型付けの問題⁃ 型付けがないコードが混在すると、コンパイル時の
エラーチェックが困難に⁃ 安全な最適化や minify ができない
JSX の現在と未来
![Page 13: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/13.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
13
JSX の文法
できるだけ JavaScript っぽく⁃ プログラマの多くは、新しい言語を学びたいとは思っていない
JSX = JavaScript の式と文 + 型アノテーション + 型推論 + クラスベースのオブジェクト指向
(単一クラス継承、複数インターフェイス継承 )
( メソッドのオーバーロード可能 )
JSX の現在と未来
![Page 14: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/14.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
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);
}
}
JSX の現在と未来
![Page 15: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/15.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
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
JSX の現在と未来
![Page 16: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/16.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
16
Performance Benchmarks
Box2D
⁃ box2d.js を JSX に移植して fps を測定⁃ iOS 5.0 – 12% 向上⁃ Android 2.3 – 29% 向上
AOBench⁃ http://spheresofa.net/blog/?p=757
JSX の現在と未来
JavaScript
JSX
TypeScript
Haxe
0 0.2 0.4 0.6 0.8 1 1.2 1.4 1.6 1.8
処理速度
iOSAndroid
![Page 17: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/17.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
プロファイラ
17
JSX の現在と未来
呼出回数や総実行時間を測定⁃ サンプリングではない
あらゆる環境で実行可能
![Page 18: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/18.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
18
Minify
強力かつ安全な minify
⁃ プロパティ名の短縮は静的型付けが必須でない限り不可能
JSX の現在と未来
![Page 19: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/19.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
19
JSX 公開後の進化
JSX の現在と未来
![Page 20: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/20.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
20
JSX 公開後の進化
セルフホスティング⁃ JSX のコンパイラを JSX へ移植
minify 型推論の強化
⁃ var a = [1,2,3].map((x) -> 3 * x)• a の型は number[]
オプティマイザの強化⁃ メソッドの関数への変換、末尾再帰のループ展開等
JavaScript との互換性の強化⁃ export 属性、バインディングのインライン定義
JSX の現在と未来
![Page 21: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/21.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
21
バインディング/ライブラリの増加
W3C API
⁃ ほぼ全対応• IDL から自動生成
node.jsx
⁃ node.js 用のバインディングを淡々と作っていくよ⁃ コア , mysql, memcached, needle, …
Qt.jsx, Ext.jsx, tmlib.jsx, mizuki, …
⁃ ごめんなさいなんかいろいろ忘れてる気が
JSX の現在と未来
![Page 22: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/22.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
22
現在の開発体制
ゆるふわにこんな感じ ?
JSX の現在と未来
名前 主な貢献kazuho リーダー , 言語仕様 , コンパイラ実装gfx コンパイラ実装 , テストフレームワーク , W3C バインディン
グwasabiz セルフホスティング , オプティマイザ , 言語仕様拡張shibukawa バインディング , パッケージ管理
![Page 23: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/23.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
23
DeNA における JSX の使用状況
社内における普及方針⁃ 複雑なライブラリの新規開発で JSX を使用⁃ その後、それらを使うゲームでも JSX を使用• 理由 : 既存のゲームを JSX に移植するのは非現実的
社内の使用状況⁃ JSX で開発されたライブラリが複数存在• ngCore on HTML5
• HTML5 上で動作するスプライト描画系• node.js 上で動作するサーバサイドフレームワーク
⁃ それらを使ったゲーム開発プロジェクトが複数
JSX の現在と未来
![Page 24: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/24.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
24
社内開発の教訓
言語仕様は枯れている⁃ 学習コストはそれほど高くなさそう
最適化関連のバグを踏むことがある⁃ デバッグビルドは品質高い• 開発中はデバッグビルドでエラー検出するのが便利
⁃ 早期から最適化オプションを使ったテストをすべき
JSX の現在と未来
![Page 25: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/25.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
25
JSX の未来
JSX の現在と未来
![Page 26: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/26.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
26
予定している拡張
async 対応⁃ 非同期処理を同期的に書けるように
JSX のパッケージ管理⁃ npm として公開する方向
ドキュメント強化⁃ 必要ですよね…
JSX の現在と未来
![Page 27: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/27.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
27
まとめ
JSX の現在と未来
![Page 28: JSX の現在と未来 - Oct 26 2013](https://reader030.vdocuments.pub/reader030/viewer/2022012908/54922dabac795953288b46d7/html5/thumbnails/28.jpg)
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
28
まとめ
JSX は得失のはっきりした altJS
⁃ メリット :• 強力なエラー検出機能• 実行速度とサイズの両面における最適化
⁃ デメリット :• JavaScript で書かれた既存との接続が煩雑
プロダクションレベルの成熟度⁃ 今後も機能追加します/互換性は壊しません
新規開発案件にオススメ⁃ バインディングは今後増えて行くでしょうが⁃ 既存ライブラリへの依存が少ないとなお良い
JSX の現在と未来