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

はじめに

まずこの話は最近話題だった 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通りの書き方があります(私の知っている範囲)

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