JavaScript
React

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

More than 3 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 を先っちょだけ触りましたが、 個人的にはとても使いやすくよかったです。

アニメーション演出系のレイヤーやシーン遷移のレイヤーとどうお付き合いするのが良いかは今後も追っていきたいですね。