これ行ってきました。

JSXなにそれ

JavaScriptっぽい新言語。本日DeNAが発表。

  • JavaScript風の記述
    • って言ってたけどそうでもないと思った。ActionScriptに近い?
  • 静的型付け →高速
  • クラスベース →高速
  • JavaScriptに変換しても →高速
    • 玄人が書いたJavaScript並
  • クライアントサイドでもサーバーサイドでも動く
    • というかJavaScriptが動く環境なら動く
    • JavaScriptを置き換えるのが目標

リンク

ちなみに

Photoshopの機能拡張JavaScriptもJSXという名称です。

言語仕様について

Hello world!

こんなん。

class Test {
  static function run() : void {
    log "hello world!";
  }
}

前述のオンライン実行環境で実行できます。出力先はconsole。

JavaScript風

  • 後でJavaScriptに変換する(できる)から、移行時のロスを減らしたい
    • だからfunctionは今まで通りfunctionと記述
  • 現在JavaScriptを修めている人が簡単に
  • というか世の中のJavaScriptを ぶっころす 置き換えたい
  • 次世代JavaScript/ECMAScriptは基本的に取り込んでない
  • Syntax HighlightもJavaScriptのやつで良い感じ

静的型付け

  • その方が実行が高速
  • 事前にエラー検出できる
    • Lintも兼ねるイメージかな?
  • 型宣言はしなくても、初期化時の値で固定される(これは便利だ!)
* `MayBeUndefined.` という、「`undefined`になりうる型」がある * `arrai[i]`の型とか * AS3と同じ書式でキャスト * `undefined as string; // => “undefined”` * `undefined as number; // => 0` * `variant`型という、`void*`みたいな何でもない型も * JSとやりとりするため。。できるだけ使わない、型安全を壊すから * キャストが必須 * ちなみに`typeof`は`variant`型専用

関数

  • オーバーロードできるよ! 静的型付けだもん!

クラス

  • あるよ! 静的型付けだもん!
    • 一方プロトタイプはありません
  • 多重継承なし
  • インターフェイスあり
  • mixinもあり(実装を伴うインターフェイス)
  • アクセス制御はない
    • _で開始したらプライベートとして扱う、という規約でGo
    • だって、JSになかったし……
    • どうせやろうと思えばprivateでもI/Oできちゃうし……
  • JSのクラス(HTMLElementとか)をインターフェイスとして利用できる

モジュール

  • importがある
  • python的
    • クラス名が_で開始されてるものは無視する
  • ファイルスコープ(やった!)

その他

  • 日本語は
    • 中の人「試した事ないです」
    • 白石さんのライブコーディングで動きました
  • eval()は
    • ねーよ静的型付けだっつってんだろ
    • あ、でもJS呼び出してむにゃむにゃ。。。
  • JSのライブラリ
    • インターフェイスファイルにしないと駄目
  • JSからJSX使える?
    • え、いらなくね?
    • やりたいなら使ってもいいよ、面倒だけど
  • vim/emacs
    • 中の人「つくったお^^」
    • emacsもどこかにあるらしい
  • MS Windowsで
    • nodeが動けば使える
  • 言語仕様どこ
    • 待ってろ
    • コード内にspecあるからそれでとりあえず我慢
  • jsdoc的なのは
    • 待ってろ
  • e…eclipse…
    • 待ってろ
  • (Chromeの?)SourceMap機能を使うと、JSXのコードをChromeのインスペクターでデバッグできる
  • lessみたいにライブコンパイルがある
  • 名前……
    • JavaScriptという単語を使うとアレかなーって
    • Photoshopのと被ったのは残念
  • 識別子に$は使えません

DOMにアクセスする例

import "js/web.jsx";

class Test {
  static function run () : void {
    log (dom.id("input") as HTMLTextAreaElement).value;
  }
}

導入

Node.jsが必要なので、事前に導入しておいてください。

githubから取ってくる

gitコマンドが使える方はcloneで。ない方はzipやtarを落としてきて展開してください。

$ git clone https://github.com/jsx/JSX.git
$ cd JSX

サンプルJSXをJSに変換

$ bin/jsx --executable --output hello.js example/hello.jsx

これで変換した結果をhello.jsに出力した。

nodeでJSを実行

$ node hello.js
Hello, world!

やたー!

感想

既存のJavaScripterに配慮ってのが嬉しい気がしました。Dartはがっつり変えてきたしね。

個人的にはゆるゆるなプロトタイプベースが好きなんだけど、人数多いとクラスベースの方が楽だなあとは思います。

JSXからJavaScriptへ変換して(素人が書いた)JavaScriptより高速に、というのは素敵。ついでに同じ事をJavaScriptからJavaScriptへの変換で実現してくれると嬉しいです。

もっかい言うけど、JSの知識が使えそうってのが精神障壁低くてナイスです。今後に期待。

変なところあったら

教えてね。