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

今回でチュートリアルの個人的メモ解説は終わりです。
あと一回、JSXについて書き溜めたいことがあるのでそれで一区切りかな？

Interface to Web Browsers

ブラウザとの連携についてです。

The js/web.jsx module provides the interface to web browser APIs, e.g. the window object and DOM APIs. The example below shows how to insert a text node into an HTML.

js/web.jsモジュールをインポートすることで、ブラウザの各APIを利用することができます。
windowオブジェクトや、DOMのAPIなどです。
下の例では、HTMLにテキストノードを追加しています。

JSX

import "js/web.jsx";

class _Main {

    static function say() : void {
        var text = dom.window.document.createTextNode("Hello, world!");
        dom.getElementById("hello").appendChild(text);
    }

}

domなるオブジェクトを利用できるようになるんですね。

Html

 <!DOCTYPE html>
<html>
  <head>
    <title>Hello, world!</title>
    <script src="hello.jsx.js"></script>
    <script>
        window.addEventListener("load", function(e) {
            JSX.require("hello.jsx")._Main.say$();
        });
    </script>
  </head>
  <body>
  <p id="hello"></p>
  </body>
</html>

Once you compile hello.jsx by the following command, then you can access the HTML and you will see it saying "Hello, world!."

下のコマンドでコンパイルすると、hello.jsx.jsが出力され利用できるようになります。

 $ bin/jsx --output hello.jsx.js hello.jsx

もうここまで見てくると、なんてことないですね。←ちょっと嬉しい

ブラウザとの連携のために

window.addEventListener("load", function(e) {

  // メインの実行部
  JSX.require("hello.jsx")._Main.say$();

});

この１行さえ抑えれば良いっぽい。
別にonloadじゃなくてclickでもなんでも良さそう。

まぁ、ブラウザ向け既存JavaScriptのパイを奪うものではないような気もしますが。

Further Learning

To learn more, please refer to the examples on this web site, or look into the example directory of the distribution.

チュートリアルを終えたあとは、Exampleのページか、配布されているソースのexampleディレクトリ以下を見ていくことで、もっと理解を深めることができます。

チュートリアル回はこれで終わりです。
後は個人的まとめを１つ書こうと思ってるので、そちらもよろしければ！