3, 4 日で React を案件に導入(先っちょだけ)した話


## はじめに

まずこの話は 最近話題だった `React` を案件に **とりあえず** 使ってみたという話をダラダラと書いた記事です。
React について深く書くという記事ではないでの悪しからず。

## 状況と経緯

まず状況を整理します。

#### 私の話

* フロントエンジニアといして有りたい存在
* javascript も少し書くが、そこまで自信を持てるコードではない。という感じ。
* 最近 BEM にハマっていた。

#### 案件の状況

* 前々から続く案件。
* そのターム毎に、やること自体は変わるが、根本は同じ。デザインレベルで全く違うものだよ。
* 今回は量としては実質 3 ページ程度のスマホ用サイト。 ajax で通信して 情報を元にシーンを展開していくもの。
* フロントの環境は全て私が決めてよい環境(というか一人でつくる)
* 以前の構築には grunt, assenmble を用いたスタティックなサイトを用いた。
* 納期がまじで短い、日曜に考え出して、翌週の木曜には大体上げとかなければいけない状況だった。
* タームは　3ヶ月程度のイベント系サイト。

#### 私のモチベーション

* 回を重ねることに構築を少しずつ良いものしていっていたが、大きな変革が欲しかった。
* シーン遷移を柔軟に管理したい。
* 状況毎に、jquery で要素を入れたり消したり追加したりという作業をやめにしたい。
* 可読性の高いコードにしたい。

## 参考と御礼

以下参考サイト。圧倒的感謝

公式サイト：
https://facebook.github.io/react/

一人React： 圧倒的感謝 x 4 くらいの感謝。頭の整理とか、根本の話とかまだまだお勉強させていただきます！
	http://qiita.com/advent-calendar/2014/reactjs

## なぜ React だったのか

そもそもなんで React ? という話から入ります。
と書きつつ。理由は単純

* 新しいもの触れたい！

という点がほぼ 90% 
あとは、こじつけ的な理由を言えば

* assemble で parts を書いて、 template に render していたが読みにくい
* 結局、動的な出しわけは javascript ベースで対応するしかない

とかありますね。でも一番はやっぱりやりたいから！ですかね。

#### リスクと決断

とはいえ実装期間が短い中で、React なんていうものに手をだしてよいものか、という点で不安はありました。
ので、日曜の 16:00 からこそこそ初めて、無理そうなら今まで通りに屈する！という行動をとりました。

## React の環境を構築する

React には大きく分けて 2通りの書き方があります(私の知っている範囲)

1. javascript でそのまま書く。
2. jsx からコンパイルする

ですね。これが勿論 jsx を用いて書きました。生コードは情弱の僕には辛いですね。

さてそうすると、grunt? gulp? browserify とかをつかってコンパイルするか(webpackもあるなぁ)、とか、どうせなら ECMA6 とかも使いたいぞ！ とか挙句の果てには、 テンプレートは jade 使えるらしいな。 とか良からぬ妄想がマッハなわけです。

で最終的には以下のようにまとまりました。

* grunt
* browserify
* babel

といった感じです。
react-jade というのもあったんですが、初心者としては テンプレートとロジックの部分を一緒に書いたほうが良いと感じました。

設定の抜粋

``` pacage.json
"browserify": {
   "transform": [
     "babelify"
   ]
 },

```

reactify は要らないんですね。

template の構築で注意だったのが、 es6 風に class 構文を使う react.createClass しようとするとエラー吐くんですね。
多分僕のやり方が悪いんですね。
main ファイルの app.js だといいんですが。
結局こう書きました。

```templage-ex.jsx
var React = require('react');

import OtherComponent from './hogehoge.jsx';

var Hoge = React.createClass({
  render() {
    return (
      <div className="hoge">
      	 <OtherComponent />
        
        contents
      
      </div>
    );
  }

});

module.exports = Hoge;
```

とかいう感じですね。

## React で実装

### 使用した機能

* props を利用したテンプレートの出しわけ

だけです。えーこれだけかよ！！！と思うでしょう。すみません。。。

でも この案件、はじめに通信はしるだけなんで、 あんまし state でどうこうするやつとかではないし。
シーン遷移と state の管理は、 どうせ古いAndroid で問題起こるだろうと思って、切り離しました。

ということでやったことは react の初歩の初歩なんです！どや！！
なので他のライブラリ使っても実装できます。

### それでも気づいた React のいいところ

#### コンポーネントの構造が、サイトの構造をみやすくする。

これはやっていて思いました。
今自分がいじっている構造が抽象化した名前で並んでいると、理解しやすいですね。

#### コンポーネントの変化をコンポーネント内で解消できる。

まぁありがちなことですが。

```template-if.jsx
var React = require('react');

var Iftest = React.createClass({
  onLinkClick( e ) {
    location.hash = 'sceneB';
    return false;
  },

  render() {
    if(this.props.flag) {
      return (
        <div className="sceneA">
          <a href="#" >
            sceneA
          </a>
        </div>
      )
    } else {
      return (
        <div className="sceneA">
          <a href="#" >
            sceneA
          </a>
        </div>
        <div className="sceneB">
          <a href="#" >
            sceneA
          </a>
        </div>
      );
    }
  }
});

module.exports = Iftest;
```

少し汚い書き方ですが、Render の時に変数をあげるだけで出力が変更されるというのが、
このファイルから分かるのがいいですね
しかもクリックした挙動もここに収められるのがスマートですね。
マウントしたときに、バインドするとか、そういう世界観でないのが魅力です。
jquery とかそういうものから脱出できるのも魅力ですね！

#### BEM とか書く気が失せる

これも個人的な感想なのですが、
こういう風に書いていると、 className って重要なものにしか使いたくないという気分になります。
転じて、 BEM みたいな長いクラスネームとかつけたくないって気分になりました。

最近だと、スタイルさえ、コンポーネントの中に埋め込めば？みたいな話もありますし。
BEMの概念からの構造設計とはまたちょっと違う視点が生まれました。

## 結果

無事納品。
基本的なことをしていないので当たり前ですが、
React を使ったからコーディング量が増えたとかそういうのは全くありませんでした。

React のお作法を　1,2日で学んだ後はどんどんコーディングできました。
そういう意味では、全体の構造に関わりあうことがないので、今まで通りのことをしながらも、
部分的に導入できているイメージですね。

props や state を用いた手法を用いることで
管理もしやすく、余分な jQuery コードとかしないで済んで、むしろ記述する量は減ったと感じます。

## 注意点

android 2.3 だと ポリフィルが幾つか必要です(es5構文を使用するにも必要です)
でも普通に動きます。

## 総括・感想

さて、もう少し時系列を置いて話しても良かったですが、ちょっと長くなるので割愛しつつも、
なんとか React を案件に使用することが出来ました。

まぁ自分でいうのもなんですが、導入するときはメリットや、今後の保守の話も考えながら使用しましょうね。

React を先っちょだけ触りましたが、 個人的にはとても使いやすくよかったです。
アニメーション演出系のレイヤーやシーン遷移のレイヤーとどうお付き合いするのが良いかは今後も追っていきたいですね。