jsdo.it が JSX と CoffeeScript をサポート!!

※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

このエントリーをはてなブックマークに追加
Pocket

なんと jsdo.it が JSX と CoffeeScript をサポートしたらしい!! 詳細はこちら.

ということで私の方でも早速使ってみました.

JavaScript タブのコードの先頭にそれぞれ 『//#!jsx』, 『#!coffeescript』 と書くだけです. するとそれ以降のコードがそれぞれ jsx, coffeescript として解釈されて実行されます.

JSX サンプル

JSX テンプレート

とりあえず jsx を使えるようにしたサンプル

JSX Sample – Vector2

前に作った Vector2 クラスのサンプル. オーバーロードのテストも兼ねてます.

CoffeeScript サンプル

CoffeeScript テンプレート

とりあえず coffeescript を使えるようにしたサンプル.

CoffeeScript の場合 JSX と違い // が付かない点に注意しましょう.

CoffeeScript サンプル – for

for を使ったサンプルです. 文字化けするTT

CoffeeScript サンプル – Canvas

もちろん HTML5 Canvas も使えます.

ちょっとした問題点, 要望点

全角が文字化けする

全角文字列を document.write すると文字化けします.

変換後の文字列が Shift_JIS になってんのかな？？

対応して頂きました! 迅速な対応に感謝!!

インデントがひっちゃかめっちゃか

自動で挿入されるインデントが JS のとき同様タブだったり space*4 だったりとバラバラです.

JSX や CoffeeScript の時は space * 2 で統一して欲しいなぁ～

また, インデントの補間が JavaScript の時と同じ動作なので CoffeeScript のセミコロン省略をすると 意図しない箇所でインデントされちゃいます. お気をつけ下さい.

以前書いた『CoffeeScript 入門! 怒濤の 100 サンプル!!』では coffeescript.js を読み込んだり HTML タブにコード書いたりと無理やり動かしていましたが, 今回紹介した仕組みを使えばキレイに書けますね. 近々全部今回の書き方に置き換えようと思います.

また, JSX も近々怒濤る予定です. ざっと 120 個ぐらいになりそうかな. お楽しみに♪

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT