CSSのコンポーネントの流儀を理解したので、次はwebフロントエンドのフレームワークを軽く眺めよう、と思った。

メジャーなのがあるなら本買ってしっかり読んでも良いと思うが、いろんなフレームワークの名前を見かけるので、まずそれぞれのチュートリアルを眺めて、それぞれが何なのかを軽く知ろうと思う。

何から見よっか？
とりあえずreactから見る事にする。

https://reactjs.org/tutorial/tutorial.html

突然開幕のShoppingListの例のタグがなんなのか理解出来ない。 なんかテンプレート文字列っぽいが、開始のトークンが小なりなの？それはさすがに無さそうだが。

とりあえずES2015のスペックでテンプレートリテラルとclass Definitionのあたりを軽く読んだが良く分からないなぁ。

ただrenderはメソッド定義っぽく見える。

JSX

チュートリアルを進めると、これはJSXという拡張構文らしい。

ググって以下にたどり着く。

https://facebook.github.io/jsx/

なるほど、で、これをどうパースして実行しているかはまた別の話で、それがチュートリアルにあるcreateElementの羅列なのか。

この結果が何かはおいといて、こういうコードを吐くコード内のDSLと思っておけば良さそう。

実行環境について

チュートリアルを見ると、create-react-appというコマンドを作って吐かれたフォルダ上でnpm startを実行するとlocalhostでアクセス出来る、とある。

つまりこれはnodeのサーバーを前提としたシステムなのか。

JSのクライアントサイドのライブラリとかじゃないのね。

renderSquareのあたりからStarter Codeを読まないと良く分からない書き方になってるので、まずStarter Codeを眺める事にする。

calculateWinnerの所で、配列のunwrapみたいなのをやってる。 へー、ES6ってそんなのあるんだ。 そろそろES6も勉強するかなぁ。

今Gameクラスが登場するくらいまで読んだが、なかなかいい感じにインクリメンタルに進めていけるな。

JSXのおかげでマークアップとコードが一箇所に書ける。

DOMではなくてstateに対して処理を書く事で、stateの持ち主の移動を簡単に出来る、で、stateとviewの間はdata bind的な仕組み（詳細は知らんが）で切れてる。

observableはPOJOでその代わりimmutableな流儀で変更を知る。 MVVMっぽいコードに自然になりつつ、observableを作る面倒さをうまい事回避している。

なるほど、これは新しいね。

こういう書き方の出来るような拡張可能な機能を入れるんじゃなくて、「ようするにやりたのはこれだけなんだよ」と割り切って拡張を入れるあたりにFBらしさを感じる。

最後まで読んでの雑感

なかなかGUI中心な作り方でいいね。 UIのプログラミングこそが大変なんだよ、という昨今のサービス事情を良く分かってらっしゃる。

マークアップとコードが混ぜて書けるのはやっぱりいいよな。aspxの手軽さが戻ってきた感じがする。
気をつけないと読みにくさも戻って来そうだが…^^;

カスタムなコンポーネントが自然と出来ていくのも良いね。 世の中のGUIフレームワークは既存のコントロールぽとぺたしてる分には楽だが、Customコントロール作ると途端に面倒になる、とかありがち。
reactはrender書くだけから始められて、しかもこれがJSXのおかげでhtmlのマークアップ片を書くのと近い感覚で作れて良さそう。

最終的なJSとhtmlとhttpリクエストがどうなるかはチュートリアルレベルでは良く分からなかった。
多分ちゃんと勉強すると理解出来るようになってるんだろうが。

GUI回りで久しぶりに「お、これは新しい」って感じのする物を見た気がした。