Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

はじめに

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

uniba
ユニバ株式会社は、"さわれるインターネット(Embodied Virtuality)"の会社です。
http://uniba.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした