0からはじめるJSX Part.1 - console.lealog();

昨日Ustreamで見てたんですが、DeNA社が開発した「JSX」というものが気になります。

スライド資料にも出てましたが、JavaScriptは現状スマートフォンで動作する唯一無二の言語です。
ただその仕様はかなり独特なもので、保守性や実行スピードなど、気になる点もあり・・。

で、それを一挙に解決しちゃうのが、このJSXだそうです。

参考：JSX - a faster, safer, easier alternative to JavaScript

以下、職業プログラマではないにわか学習者が、JSXを触るとこう感じる、っていう記事です。
達人プログラマの皆さんの記事は山ほどあるので、たまにはこういうのも良いんじゃないかと自己満で。

見当違いな内容や、吹っ飛んだ解釈も多々あると思いますので要注意です。
もちろん読み流していただいて結構ですが、＠leader22宛にご意見いただけると勉強が捗るので助かります。

一応サジを投げたくなるまでは見ていこうと思っているので、とりあえずPart.1ということで。
とは言えアプローチは恐らく一般のやり方とは違います。
0からというかマイナススタートくらいな立ち位置なので・・。

今のところの理解

PrototypeだなんだといってたJavaScriptを、Javaっぽく型付け強く使うための言語拡張。
JavaScriptより早い！安全！簡単！らしい。
JSX書式でコードを書いて、コンパイルするとJavaScriptのソースになる。
あくまでプログラミング言語としてのJavaScriptの拡張。(DOM操作が楽とかブラウザ向けとかではなく)

良くも悪くも無茶苦茶書いても動いてたJavaScriptを、ちゃんと統制していきましょうっていうものなんでしょうか。
コンパイルさせることで、最適な書き方(ベストプラクティスであったり、Minifyだったり)を担保して、速度も確保しちゃうのが狙いかなぁ。
大規模開発で、クオリティが個人にスキルに依存しちゃうところを、1レイヤー介すことで解消する感じかしら。

とりあえずのHello, world

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にも慣れてない身としてはとても大変です。

というわけで

厳密な意味でのスピードも求められず、
保守性なり他人のコードを気にする必要のある規模の開発もせず、
とっつきにくい型付＋オブジェクト指向でのコーディングのメリットを受けるようなコードも書く必要がない。

そんな今の私には、無用の長物という印象を受けたのが正直なところ。

とは言え、プログラミング言語らしいプログラミング言語を勉強するっていうのが最近の目標やったりもするので、良い機会ということで、JSX勉強していこうと思ってます。
今まで勉強してきたJavaScriptの知識も無駄にならなさそうやので。

次回、まずはJSX Tutorialを攻めます。