React.js、ヤバい。

この記事はSYSKEN Advent Calendar 2017 18日目の記事です。

どうも、進級が危うい〆鯖です。

今回は、私が今年のプロコンで開発に使ったjavascriptの~~激ヤバ~~ライブラリであるReact.js(以降React)の簡単な紹介と、その中でも特にヤバいある機能についてお話していきます。

前日の記事で後輩に煽られてしまったのでがんばります。

Reactは、Facebookが開発、OSSで公開しているフロントエンド向けライブラリで、

Facebookはもちろんinstagramのフロントエンドにも用いられています。すごい。

そんなReactですが、

などなど、たくさんの特徴がありますが、全部紹介する気力がないので、僕が一番衝撃的だったJSXというReactのSyntaxについてお話します。

Reactでは、通常のJSともう一つ、JSXという形式でコードを記述できます。JSXで記述したプログラムをJSにコンパイルして実行するわけです。

では具体的にJSXについて解説していきます。

というわけで、JSXの~~キモい~~すごいところをサンプルコードで見ていきます。

今回はHello,World.

HTMLはこんな感じで、

JSXがこんな感じになります。

HTMLはすごくシンプルです。Reactを読み込んで、コンポーネントを埋め込むためのdivタグを置いてるだけです。

一方JSXですが、render()の中身が表示されると思ってもらえれば大丈夫です。よく見てみると、

見た目からヤバさが滲み出てますね。なんとJSXでは、JSの中にHTMLタグを書けるんです。

初めて見たときはビビりました。「JSの中にタグとか･･･ええ・・・」みたいな。

しかしこれを半年ほど使い続けて、あることに気づきました。

これを実行したときにどんな見た目で表示されるかがイメージしやすいんですよ。JSの中にタグがあるキモさに慣れればの話ですけど。

構成めっちゃくちゃな記事ですいません。

今回解説できなかった部分については、また今度記事を書くつもりです。