React？聞いたことあるけど興味のわかない人が読んでみる記事①

【座学】React.jsとは

真面目に事説明しだすと拒絶反応でサンシャ○ン池崎みたいなテンションになる人がいるかもしれないのでここはスーパーざっくりハイスピードで流していきます。

最近は様々なJavaScriptフレームワークの名前と一緒に並ぶことも多いReact.jsですが、「JSフレームワークとライブラリがごっちゃになっている話」でも書いた通りReact.jsはフレームワークではなくライブラリだということを再度認識しましょう。
ReactはFacebookが2013年にリリースしたオープンソースJavaScriptライブラリだということだけ一旦覚えましょう。　
Say! Facebook!
Facebook製！

これはReact公式サイトに訪問してみるとわかりますが、「A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES」と書いてあります。

主にUI構築をするためのJavaScriptライブラリなんだなーと思っておいてください。
難しい話をするとM-V-C(M-V-MV)のViewの部分のみしか対応してなかったりします。

ちなみにjQueryのようなアニメーションやマイクロインタラクションをつけたりするのに向いているわけではなく、「入力　→　即時反映」のようなUI設計にむいてます。
jQueryとはだいぶ違うのでここではとりあえずｊQueryとは違うのかー　へーｗ　と思っておけばOKです。

Angular2のことを書くかも悩んだのですが今回はこんな記事もちょっと前に出てたのでReactについて書いていきます。
フレームワーク扱いになってるのが気になりますが・・・

とりあえず簡単にわかるメリット

• とにかく速い（仮想DOMがどうとかそういう話は一旦気にしない！　速いんです。）
• ブラウザで動いちゃう（IE8とかそういう野暮な話は一旦なし！　方法はあるけど）

【入門】とりあえず動かしてみる

座学は良いからとりあえず動く環境を整えてみることにします。

Reactを使うには、facebookのreact.jsファイルを読み込む必要があります。読み込み方は公式サイトからスターターキットをダウンローどしてもよし、CDNサービスから直接指定しちゃうのもよしです。
今回はCDNから読み込んでみます。

• 公式サイト
• Facebook Github ※現時点で最新は15.4.2なのですが実ファイルのURLがわからなかったのでv15.4.0を紹介しています。
• CDNJS – react

まずは外部ファイルとして読み込む

/* これがReactの実ファイル */
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
/* Domを操作するためのライブラリファイル　今回はDOMをいじるので使います　※他にもあるよ */
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>

今からちょっと難しい話をしますよ！ でも解決方法はすぐ下にかいてあるのでここで諦めずに読んでください。

React.jsは同じくFacebookの作ったJSXというJavaScriptの独自拡張構文を組み合わせて使うのがスタンダード（どうやら使わなくてもできそうですが一応覚えて置きたいので使ってみましょう）。
なんとなくXMLみたいな感じのやつで、AltJSのJSXとは別物なのでご注意。　

ちなみにJSXとは、独自拡張構文のためそのまま記述しても動かず、プリコンパイルが必要になります。
本来であればNode.js,npmインストールをしたり　ごにょごにょ　したりしないといけなかったりと・・・ 今回のターゲットはnode.jsってなぁに？って方をメインに考えていたので、今頃「わーん　ちょっとReact調べてみただけなのにどんどんわからなくなるー」となりそうなので、今回は便利なものを読み込んで済ませます。

JSXの記述をJavaScriptに変換してくれるファイルを読み込む

同じくCDNJSから必要なファイルをよみこみましょ！

• CDNJS – babel-standalone

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.22.1/babel.js"></script>

このファイルを読み込むことでJSXの記述を変換してくれるわけですが、はたまたこのままだとやっぱり使えません。
なんかややこしくなってきたわーという方、安心してください。　あとちょっとだけですよ！

下の記述の中に書く or 外部ファイルにするだけです。
<script type="text/javascript">ではなく、<script type="text/babel">という記述を使います。

<script type="text/babel">
/* ここにJSX */
</script>

この書き方にしておくだけで、babel-standaloneくんがJavaScriptに変換してくれてから実行されるわけだ
がっつり処理を書くレベルになってくると、コンパイルに時間がかかったりするみたいなのである程度慣れて来たらnode.jsについても調べましょ

<script type="text/babel">
var title =
    <div className="title">
      <h1>こんにちは世界</h1>
    </div>;
</script>

<script type="text/javascript">
var title = React.createElement(
  "div",
  { className: "title" },
  React.createElement(
    "h1",
    null,
    "こんにちは世界"
  )
);
</script>

コンパイルのイメージはなんとなくついたでしょうか？　この変換が行われてるんだー　ということだけ理解しておくと良いかもです。

もう一つとりあえず覚えたい関数

ReactにてDOMで操作をするための関数でReactDOM.render();というのがあります。
この書き方を覚えておくとjsxの中にhtmlをそのまま書き込める(雰囲気)ようになるのでちょっととっつきやすくなると思います。

See the Pen React-sample1 by うぇぶの人 (@webnohito) on CodePen.

ちなみに私個人としてはある意味htmlタグをそのまま書けるので正直出だしとしては　入りやすかったですね。
ある意味といったのは、htmlでいう「class」とかlabelとかで使われる「for」はｊｓの中での予約語になってるのでちょっぴり変えて「className」「htmlFor」とかにしなければいけないのがちょっぴりめんどくさいところだけど贅沢は言わない！

ちなみにしれっとCODEPENをつかってますが、手っ取り早く記述を試したいのであればCODEPEN上で「最初の２ファイルをファイブファイルとして読み込み」「JavaScript Preprocessor」を「Babel」にすると環境を作らなくてもすぐ試せるのでおすすめです。

ちょっぴり長くなってしまいましたが、なんとなくここまででReact.jsとJSXのイメージがついてきたんじゃないかと思ってみたり・・・興味持ててきたですかね？

【入門】コンポーネントって？

イマイチメリットがわからない！例だけだとjQueryで十分なんじゃないかと私も最初は思ったんですが、もうちょっとだけ特徴をお話します。
ところで、これを読んでる方はコンポーネント指向とかコンポーネントという言葉を聞いたことあるのではないでしょうか？

コンポーネント(Component)とは部品のことです。Reactでは一部を部品(Component)として切り分けることができるのです。
どゆこと？となったところで、例をあげていきます。

先ほど例であげたものをコンポーネント化してみました。

See the Pen React-sample by うぇぶの人 (@webnohito) on CodePen.

先ほどReactDOM.render関数を使えば、ｈｔｍｌをそのままかける！と言いましたがみたことのないタグ()が入ってるのがわかると思います。
まさにこれがコンポーネント化と呼ばれるものでhtmlや一式を独自のタグとして新しく部品化してみたわけです。

なんとなくイメージしていただけでしょうか？
　今回はものすごく簡単なhtmlを書いただけですが、もっと複雑なhtmlや値、中に関数なんかも入れることができるので慣れてくると便利そうな匂いがぷんぷんしませんか？

とりあえず紹介したものは、スーパー一部分だけですがなんとなくそんなことできるのかーというのが見えてくれていたら幸いです。
また時間をみて実践編がかけたらいいなぁ・・・