弥生開発者ブログ弥生開発者ブログ2017-05-19React・Reduxはじめましたこんにちは!Misoca開発チームのめろたん(@renyamizuno_)です!暖かくなってきて眠いですね。最近は、「0.8秒と衝撃。」というバンドが活動を終了するってことを聞いて、まじかーとなってます。今回はMisocaでReactを使い始めたことについて書きたいと思います。React詳しく書かないですが、ReactはFacebookで作られたユーザインタフェースを構築するためのライブラリです。github.com仮想DOMでJS界隈を賑わせていましたね。document.getElementById('container'));JSのなかにXMLみたいな感じでタグを書けるJSXっていうのも特徴的かなと思います。jQueryとかでそこらじゅうでDOM操作してわけがわからなくなる。いうことがなくなってとても良いですね。どこにつかっているのかtech.misoca.jpここで紹介されている、受発注機能の画面でReactを使っております。当時から機能も足されて画面もリニューアルされてだいぶ変わってますね。この画面は上の「Misocaへ戻る」以外はすべてReactで作ってます。Application)として作られており、見積書とかを開くとナウい感じで開きます。stateの管理はReduxを使っています。github.comReduxにした理由は一番使われてるのでは?という感じですかね...。DevToolsはとても助かりました。よかったこと大きい利点はUIをコンポーネントで管理できるようになったことですね。今までのUIの実装はなんかジェンガをやっている感じでなんとか崩さないように、みたいな印象でしたがコンポーネントで管理できるようになったので、他のコンポーネントに気を使うことが殆どなくなってよかったですね。JSXのお陰でそのコンポーネントがどういう見た目・DOMで、何を行うものなのかがわかりやすくなったのでよかったです。つらかったことReactはまだわかりやすいかと思うのですが、Reduxが関わってきた瞬間にわけがわからなくなってしまいつらかったです。最初はよくわからず、connectを大量に行ってしまいそのまま進めてしまっていて、再描画があらゆるところで発生してパフォーマンスが相当悪くなっていたりしてました。アニメーションを行おうとすると簡単にはできず厳しいことが多々ありました。github.comこれを使うといい感じにアニメーションさせることができるのですが、CSSの命名規則にBEMとかをつかっていると上手くマッチせずこのためにそこだけ特例で命名規則を捻じ曲げる必要があったりしてちょっと気持ち悪い感じがあります。まとめReactをつかうことで、jQuery等でやってたDOM操作地獄が無くなるのはとてもいい感じでした。いえ天国かというとそういうわけではないので、世の中難しいなぁという感じです。