JavaScriptみたいな最近噂の新言語、JSXのお話を聞いてきたよ！

これ行ってきました。

• Web先端技術味見部#4 （仮テーマはJSX！） : ATND

JSXなにそれ

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

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

リンク

• DeNA開発、高速なJavascriptコードを生成できる新言語「jsx」への反応まとめ – Togetter
• JSX – a faster, safer, easier alternative to JavaScript
  • 公式サイト
• JSX – Statically-typed, object-oritented programming lauguage
  • 公式サイト内、オンラインの実行環境。左側からサンプルコードを読み込める
• JSX
  • スライド（英語）

ちなみに

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

• PhotoshopでのWeb制作効率を向上させる「JSX」とは | Stocker.jp / diary

言語仕様について

Hello world!

こんなん。

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

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

JavaScript風

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

静的型付け

• その方が実行が高速
• 事前にエラー検出できる
  • Lintも兼ねるイメージかな？
• 型宣言はしなくても、初期化時の値で固定される（これは便利だ！）

関数

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

クラス

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

モジュール

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

その他

• 日本語は
  • 中の人「試した事ないです」
  • 白石さんのライブコーディングで動きました
• eval()は
  • ねーよ静的型付けだっつってんだろ
  • あ、でもJS呼び出してむにゃむにゃ。。。
• JSのライブラリ
  • インターフェイスファイルにしないと駄目
• JSからJSX使える？
  • え、いらなくね？
  • やりたいなら使ってもいいよ、面倒だけど
• vim/emacs
  • 中の人「つくったお＾＾」
    • これかな？→jsx/jsx.vim
  • 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の知識が使えそうってのが精神障壁低くてナイスです。今後に期待。

変なところあったら

教えてね。