React.js に初めて触れた。1日目の所感など。

React Nativeで作られたハイブリッドアプリに関わる事になりそうなので、だいぶ周回遅れだが、まずはReact.jsとはどんなものなのか?触ってみる事にした。さて何からやろうか、、とネットで良い教材を探していたらすごく良さそうなのがあった。

fukatsu.tech

まずはこのチュートリアルの通りに○×ゲームを写経してみた。

一応完成したものは下記の通り。

 

個人的フロントエンドの技術経験は、Pure JavaScriptjQueryを2009年〜、backbone.jsとcoffeescriptあたりを2011年に書いて以来、時が止まっている。

そんなわけでフロントエンドの新しい技術に触れるのは、実に7年ぶりくらいである。

今日は1時間くらいこの写経をやっただけであるが色々と気づきはあった。それを以下に述べていこうと思う。

第一印象としてはC#のようなオブジェクト指向を踏襲しつつも、Json ライクなところは2011年に触ったbackbone.jsを彷彿とさせるような気もする、といったところである。

グチャッとしがちなJavaScriptC#のような重量級言語の程良い規律が加えられ、誰が書いても再利用性が高いコードにある程度なる、っていうのは何というか、とても安心感がある。

ただ明らかに今までと違うと感じたのはバーチャルDOMの要素名にオブジェクト指向のクラス名をそのまま当てられて、それをUnityのPrefabのように再利用可能なこと。

これによりクラスの役割がDOM単位で分離でき、役割の明確化と、コードの簡潔化につながっていると感じた。

もう一つ、バーチャルDOMは、SEOはどうなんだろう?というのは気になる。

イベント発火時の振る舞いの表記方法は、これまた2011年に触ったcoffeescriptに近いと感じた。

こうして見るとbackboneとcoffeeのいいとこ取りみたいな印象ということはあると思う。

またそれはつまり、 私が最後にマスターした2011年当時の最先端のフロントエンドと、記述方法だけを見ると、そんなに大きな変化はないということも言えるのかもしれない。

ところでcoffeescriptラムダ式C#の影響を感じるが、C#にもJavaScriptの影響を感じるとことがある。

それはこないだUnityのC#を触っていて

button.onClick.AddListener (ShowLog);

なんて書き方ができるようになっていて気づいたこと。

C#のデリゲートが結局うまく理解出来なかった自分にとっては、

「なんて簡単になったんだ!これなら僕にもわかる!書ける!」

と感動したと同時に、

「なんてJavaScript的な書き方なんだ!」

という、JSからプログラミングに入った自分にとっては感動にも似た驚き。

そんな風にダブルで衝撃を受けた。

今回のC#とJSなど、自分の扱える技術は限定的だがそれらの間でも相互に影響を与えあっている事をしり、言葉は生き物なんだな、コンピュータの世界でも、と興味深く思っている。

話がだいぶ逸れたが、React.jsの初日、事始めということで、一旦この辺までにします。

もう少しいじればまた印象も変わってくるのだろうと思うので、もう少し正確な印象やもう少し深い気付きはおいおいということで。

ただ、個人的にはすごくとっつきやすい技術だなと感じました。

このコードでiOSAndroid、Webのハイブリッドアプリが作れるのなら、むしろ学習コスト低くていいなと思うくらい。

次回はReact Nativeの方で簡単なiOS,Android アプリをビルドしてみようかなと思っています。