5分で始める

jsx プログラミング

by phi　

自己紹介

Name: phi(ファイ)
Language: C/C++, Python, JavaScript
Age: 24
Job: ゲームクリエイタ
Twitter: @phi_jp
Blog: TM Life

JSX とは

JavaScript より速く動作し、

安全かつ効率良く開発でき、

品質の高い成果物を作る事ができる言語

特徴

Java ライクなシンタックス
コンパイルすると JavaScript コードを吐き出す
静的型付き
バリバリ最適化(インライン展開とかチェーン削減とか)
生で書く JavaScript コードよりも早い!!?
オーバーロードがサポートされてる!
デフォルト引数も最近サポートされた!!

jsx 導入

jsx は node module として公開されているので

npm 経由でインストールします.

 $npm install -g jsx

jsx -> js

hoge.jsx というファイルを作って

下記コマンドを実行

 $node --executable web --output hoge.js hoge.jsx

すると, hoge.js というファイルにコンパイルされて

出力されます.

ここで1つ問題が...

毎回コマンド叩くのって

めんどくね？

grunt-jsx 作りました!

@yosuke_furukawa 先輩にお願いして

grunt-jsx 作ってもらいました!!

grunt って何？ってかたはこちらへ

grunt-jsx 導入

gruntfile.js に下記を追加するだけ.

 TODO: 後で書く

あとは grunt コマンドで変換

 $grunt

grunt-contrib-watch と一緒に使えば

jsx 編集するたび自動でビルド

 $grunt watch

また１つ問題が

開発は楽になったけど
セットアップめんどくね？

jsx-template 作りました!

下記コマンドを実行

$git clone https://github.com/phi1618/jsx-template projectname$cd projectname$npm install

これだけで jsx 開発を始められます!!

ついでに

tmlib.jsx 始めました!

tmlib.jsx とは

tmlib.jsx とは tmlib.js を jsx に移植したものです.

ごにょごにょごにょ...

jsx-game-template なんてのもあるよ

tmlib.jsx をデフォルトで使用している

ゲーム開発用テンプレートです.

$git clone https://github.com/phi1618/jsx-game-template
$cd jsx-template
$npm install