0からはじめるJSX Part.1

hello.jsx

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

consoleにHello, worldするだけ。
SyntaxがJavaScriptで映えるのが良いですね。

けどJavaっぽい！
staticとか！voidとか！意味わからん感じが！

hello.js

コンパイルするとこうなる。

var JSX = {};
(function () {

/**
 * copies the implementations from source interface to target
 */
function $__jsx_merge_interface(target, source) {
  for (var k in source.prototype)
    if (source.prototype.hasOwnProperty(k))
      target.prototype[k] = source.prototype[k];
}

/**
 * defers the initialization of the property
 */
function $__jsx_lazy_init(obj, prop, func) {
  function reset(obj, prop, value) {
    Object.defineProperty(obj, prop, {
      value: value, 
      enumerable: true,
      writable: true,
      configurable: true
    });
    return value;
  }

  Object.defineProperty(obj, prop, {
    get: function () {
      return reset(obj, prop, func());
    },
    set: function (v) {
      reset(obj, prop, v);
    },
    enumerable: true,
    configurable: true
  });
}

/*
 * global functions called by JSX as Number.* (renamed so that they do not conflict with local variable names)
 */
var $__jsx_parseInt = parseInt;
var $__jsx_parseFloat = parseFloat;
var $__jsx_isNaN = isNaN;
var $__jsx_isFinite = isFinite;

var $__jsx_ObjectToString = Object.prototype.toString;
var $__jsx_ObjectHasOwnProperty = Object.prototype.hasOwnProperty;

/*
 * public interface to JSX code
 */
JSX.require = function (path) {
  var m = $__jsx_classMap[path];
  return m !== undefined ? m : null;
}
/**
 * class Test extends Object
 * @constructor
 */
function Test() {
}

Test.prototype = new Object;
/**
 * @constructor
 */
function Test$() {
};

Test$.prototype = new Test;

/**
 */
Test.run$ = function () {
  console.log("hello world!");
};

Test$run$ = Test.run$;

var $__jsx_classMap = {
  "t/run/001.hello.jsx": {
    Test: Test,
    Test$: Test$
  }
};


}());
JSX.require('t/run/001.hello.jsx').Test.run$();

多分上の方ほとんどはお決まりのコードで、いわゆるJSXの心臓みたいなとこでしょうか。
下の方の、

Test.run$ = function () {
  console.log("hello world!");
};

Test$run$ = Test.run$;

var $__jsx_classMap = {
  "t/run/001.hello.jsx": {
    Test: Test,
    Test$: Test$
  }
};


}());
JSX.require('t/run/001.hello.jsx').Test.run$();

が、コンパイルされて変換されたメインのコードっぽい。
なんとなく読めるようになってる自分に感動した！ｗ

ただ、なんでそうするのかがわからん・・・！
使わせてもらう分にはそんなん意識する必要ないんやろけども。

どこが簡単なのさ！

試してみるのにNode.jsがいるとかgit cloneせにゃならんとかそもそもコンパイルせなあかんとか、敷居が高すぎます。
JavaScriptはブラウザとメモ帳だけあったら動く！やから勉強しやすかったのになぁ。
速さを求めるって時点で避けては通れないんでしょうけど・・。

オンラインで試せるとこ：JSX - Statically-typed, object-oritented programming lauguageもあるので、オンラインで書いてコンパイルされたソースを保存していつも通り読み込んで・・とかもできるけど、それはなぁ。

検索しても意味わかんないです

まだドキュメントも充実してないってのは仕方ないとしても。
おそらく初学者用のドキュメントなんて出てくるのはまっだまだ先で、今のところは達人プログラマーの方々のスーパーテクニック集ばっかです。
悪魔の罠です。

難しい方のJavaScript

最近勉強してきてわかったのは、JavaScriptにもジャンルがあって、

• ゲーム作ったりサービスのコア部として動いてたり、Webプログラミング言語としてのJavaScript
• ブラウザ専用のデザインの補助としてのJavaScript

だいたいこの2種類に大別されるんじゃないかなーと。
前者は知ってて損はないけど、知らんでも困らないってこと。(もちろん効率の良い書き方すべきってのはもちろんあるとしても。)
↑なんか誤解を招きそうな感じｗ

新しいプログラミング言語

Javaとかやってる人からすると、すらすら書けるんやろなーと思います。
昨日のUstreamでもそうやったし。

ただJavaScriptとPHPを少しかじって、やっと一息といった程度の身としては、まったく別言語に感じます。
これを学習コストって言うんでしょうが、「JSX独特の書式を覚える」のが大変そうやなぁ・・と。
そもそもJavaはおろかいわゆるプログラミング言語がわからんので、

JSX is a statically-typed, object-oriented programming language...

statically-typedにもobject-orientedにも慣れてない身としてはとても大変です。