Rails + Reactでサンプルアプリを作ってみたお話

 

Qiitaにも投稿したのですが、Rails + Reactの構成で簡単なアプリを作ってみました。


URLはこちら

qiita.com



構成とか技術的な部分最低限のことはQiitaに書いたので、こちらでは作った動機とか
所感とかについて書きたいと思います。


作った背景

もとからUIとかUXに興味があって、クライアントサイドの開発技術を高めたいという思いがありました。
そんな折にRails APIについて話していたGinza.rbやhtml5部のJSフレームワークの勉強会に参加して思うところがありました。
具体的には下記みたいなこと。

・Rails5でRailsAPIが正式にRailsに導入されるらしいし、サーバーサイドのフレームワークはどんどんAPIとしての役割が求められていくのが世の流れのような気がする。

・JSフレームワークの話聞いたけど、Reactが一番しっくりきた。
 1) 毎回新しくDOM作って差分を上書きすれば各DOMの状態とかいちいち考えなくていいよね!という考えはMVXのモデルに比べてシンプルで共感できた。

 2) あくまでViewのみを担当するライブラリで簡単そう。

 3) 最近流行りなので手を出してみたかった
(Angularの話も聞いたけど、すでに使ってる人向けの講演みたいな感じでついていけなかった)

そんなわけで、習うより慣れろ式で実際に作ってみることにしました。

 


構成

・DBと連携してデータを取ってきたり登録・更新・削除ができるCRUDなアプリケーションとして作りました。
・クライアント側は完全にjsが担当している。Railsのreact-railsとかは使わないこととしました。

最初はreact-railsを使ってrailsのgemからReactを使う方法も考えました。
ただ、RailsはあくまでAPIに徹してもらったほうが、あとあとサーバーサイドのFWだけ変えるとかクライアントサイドだけ変えるとか移植性が高くなるのではと考えたので明確に分離するようにしました。(別にRailsのViewにちょくせつ吐き出させたって実害ないのかもしれませんが・・・・・・。そこらへんはあまり評価できていないです。)


作っててはまったところ

そもそもNode.jsわかんない

Node.jsとかnpmで入れたライブラリに関する根本的な知識がたりていませんでした。というかはじめてnpm使いました。brouserify? 食べ物ですか?

require('./app-routes.jsx'); とかできない!とか1時間以上ハマって、原因が module.exportsしたファイルじゃないとrequireできないってことだと知った時は頭を抱えたくなりました。


ルーティングがわからない

ReactでSPAを作る時のルーティング方法にもいろいろ種類があるらしいと聞き、某所で紹介されていたのでなんとなくreact-routerを採用しました。
よくわかってないまま使っていたので(今もよくわかっていない部分がありそうです)、肝心な時にうごかなかったり、うごかない原因がわからなかったりと難儀しました。

いろいろ調べてたのですが、参考になったのはここらへんのサイトです。
React.jsでserver-side renderingにも対応したRouting

http://qiita.com/koba04/items/737c783f1189355e053f
React初心者のためのreact-routerの使い方

http://beck23.hatenablog.com/entry/2015/02/20/054900#2



作成してみての所感

・巷で言われていますが、Reactは大規模なアプリケーション向けのライブラリである気がしました。特にコードの記述量が減るわけではありませんでした(というかこれぐらいのサンプルアプリだと確実に増えるし)。

・ただ、DOMの状態を考えなくて済むようになるというのは大きな利点だと思います。DOMの状態を変えるロジックをいちいちJQueryで書くのは大変だし、書いたとしてもどのJSに書いたっけ?みたいな状況が減らせるのはサービスが大規模になればなるほど楽になるのではないでしょうか。

・気になったのは使っててちょっと書きづらいな、と思うことが多々あった点です。JSとHTMLを分離させないことの意義は理解しているつもりなのですが、デザイナーさんとの協業とかを考えた時、jsxの中にHTMLのようなものが記述されているあのスタイルはとっつきにくいのではないかなと思います。

・今Reactが流行ってるけど半年か1年後には別のFWが席巻してて、「まだReactで消耗してるの?」ってなりそうという意見を勉強会だったり記事だったりで散見するのですが、このReactのエンジニア以外へのとっつきにくい感からしてありえそうだなーと思いました。

・ただComponent化とかDOMの差分更新とかの考え方はおそらくこれから出てくるライブラリやFWに取り入れられていくと思うので、今のうちにそういった概念を学ぶことができたのはよかったです。

・React以外にも言えることですが、アタラシイギジュツだからって銀の弾丸にはなり得ないんだなということを改めて身をもって体験しました。そこらへんのことはユーザベースさんの技術ブログのこの記事がとても納得できたので最後に紹介したいと思います。

http://tech.uzabase.com/entry/2015/03/02/180612