1. JSX
a faster, safer, easier JavaScript
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 等、プラットフォーム技術の研究開発
Aug 4 2012 JSX - a faster, easier, safer JavaScript 2

3. JavaScriptの問題
遅い
特にスマホ向けのゲームを作っていると
デバッグに時間がかかる
例: プロパティ名の間違い
読みにくい
さまざまな「クラス」実装や「華麗な」コーディ
ングテクニック
Aug 4 2012 JSX - a faster, easier, safer JavaScript 3

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

5. JSX とは?
JavaScript より速く、開発効率が高く、成
果物の品質が高いプログラミング言語
あくまでも目標です！
Aug 4 2012 JSX - a faster, easier, safer JavaScript 5

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

7. なぜ新言語なのか?
ActionScript 3
ウェブブラウザで動かない
JavaScript へ変換できなくはないがオーバーヘッドが
発生
型がオプショナル
Dart
JavaScript へ変換するオーバーヘッドが発生
型がオプショナル
Coffeescript
静的型でなく、大規模むけでない
Aug 4 2012 JSX - a faster, easier, safer JavaScript 7

8. JSX の最適化
const-folding, inline-expansion, unboxing,
…
Box2D ベンチマーク
box2d.js を JSX にポーティングして fps を測定
iOS 5.0 - 12%向上
Android 2.3 – 29%向上
Aug 4 2012 JSX - a faster, easier, safer JavaScript 8

9. JSX の最適化例: アフィン変換
ソースコード:
new Matrix(1, 0, 0, 0, 2, 0).transform(new Point(x, y))
コンパイル結果:
{x: x + 0 * y, y: 0 * x + 2 * y}
注: 0 * n は isNaN(n) ? NaN : 0 と等価のため畳み込めない
Aug 4 2012 JSX - a faster, easier, safer JavaScript 9

10. Hello world!
class _Main {
static function main(args : string[]) : void {
log "Hello world!";
}
}
Aug 4 2012 JSX - a faster, easier, safer JavaScript 10

11. 冗長？
Aug 4 2012 JSX - a faster, easier, safer JavaScript 11

12. 「リーダブルコード」より
「コードは理解しやすくなければならな
い」
Aug 4 2012 JSX - a faster, easier, safer JavaScript 12

13. 開発効率と規模の関係
大規模なコードを書くのは大変
1,000行のプログラム – 1日
10,000行のプログラム – 10日?
100,000行のプログラム – 100日??
重要性: キータッチの少なさ < 読みやす
さ
8時間で1,000行*30桁コーディングしたとして
も、約60文字/分
Aug 4 2012 JSX - a faster, easier, safer JavaScript 13

14. 書きやすさと読みやすさの両立
エディタによる補完
わかりやすい変数名
補完候補と、その機能の概要が表示されること
「class」を省略できるよりも、補完が効きまくる
ほうがうれしい
そのためにも、構造化された文書化仕様
を
/**
* description
* @param a …
Aug 4 2012 JSX - a faster, easier, safer JavaScript 14

15. そもそも…
プログラミング言語は開発環境の一部
Aug 4 2012 JSX - a faster, easier, safer JavaScript 15

16. 開発環境に必要な機能
コード編集とリーディングの支援
 jsx --complete
 jsx --mode doc (kazuho/jsxdoc branch)
テストフレームワーク
 jsx --test
ソースコードデバッグ
 jsx --enable-source-map
プロファイラ
 jsx --profile
Aug 4 2012 JSX - a faster, easier, safer JavaScript 16

17. 開発環境に必要な機能
ライブラリサポート
考え中…
だって（まだ）ライブラリないし…
むしろライブラリ書いてくれる人募集中です！
Aug 4 2012 JSX - a faster, easier, safer JavaScript 17

18. まとめ
JSX は、より速く、より簡単で、より安
全な JavaScript の方言
開発環境の一部として言語を設計・実装
人柱^H^Hユーザー募集中です
Aug 4 2012 JSX - a faster, easier, safer JavaScript 18