React + Rails で高速にウェブサービスを開発する

Tweet

Pocket

Webサービスを高速に実装したい、そう誰もが一度は思ったことがあるはずです。
そのためには、1つのフレームワークに慣れるということが大切であり、僕はそのためにRailsを使おうと思っています。
Dr. NumbersはDjangoで動いていますし、他のフレームワークも少しだけ試しましたが、何よりも自動生成による開発のスピード感は他のフレームワークにはないなというのが選定の決め手です。

そして、フロントのライブラリはReactを使おうというのが僕の最近の試みです。
stateとpropsの更新だけでcomponentが再描画されるというのは、初めて触った時に本当に感動しました。
このサイトにはReactは必要ないかも？というようなプロジェクトでも、ちょっとした動きをつけるのに重宝します。

そんな便利なRailsとReactですが、一緒に使う際に様々な問題と発見があったので記事にします。

React をどう使うか

まず、RailsとReactを共存させる方法は二種類あります。
react-railsというgemを使うか、Reactをフロント全般に適用し、Railsをapiサーバーとして使用するかです。

gemを使う方法

react-railsを使う場合は、Railsのviewも使用します。viewにReactのcomponentを埋め込むことができるので、一部分だけにReactを使用したり、巨大なサービスでページのルーティングなどはRailsに任せてページ内の動きをReactで表現するといったことができるのではないかと思います。

とても夢のある話でしたが、僕はこの方法でやっていくとエラーが出てしまい、悪戦苦闘の末に、この方法を一旦諦めました。
エラーが出た原因は、npmで入れた他のjsのライブラリを使おうとしたことでした。
他のライブラリとは、非同期処理に欠かせないaxiosでした。そもそもjsのライブラリをrequireしようとすると出てくるエラーだったので、諦めるしかありませんでした。

ググってもなかなか出てこず、やっと同じ状況のエラーを見つけたと思ったら、解決策が書かれていなくてショックでした。
このリンクの状況とほぼ同じです。↓
http://railspro.net/questions/2985

また、いつかこのエラーにはリベンジしたいと思っています。

プロジェクトを分離する

Reactをフロント全般に適用し、Railsをapiサーバーとして使用する方法です。
この方法の場合、ReactとRailsそれぞれの経験を持っている人はほとんど苦もなく開発できるでしょう。
僕はcreate-react-appでReactアプリの雛形を作りました。（詳細は後述）

VPSでデプロイする際には、npm run buildをして生成されたbuildディレクトリの中身をドキュメントルート以下に置いて、apiへのリクエストはproxy passでRailsが動いているアプリケーションサーバーに渡してあげるという感じです。（詳細は後述）

create-react-appが何をするのか

Reactを動かそうと思うとrequireをブラウザ側でも動くようにするBrowserifyやES2015の内容をES5に変換するBabelifyが必要になります。

create-react-appは開発環境のその辺をすぐに（webpackとかその他諸々使いながら（よくわかっていない））用意してくれるパッケージです。
プロジェクトを作成し、npm startとコマンドを実行するとサーバーが立ち上がり、Reactがもう使用できる状態になっています。
すごく便利です！！

便利すぎて、僕は誤解してしまいました。
デプロイする時に、VPS内でもこのサーバーを立ち上げる必要があるのだと思い込んでいたのでした（フロントエンドサーバーと呼んでいた）。
本当のところは、jsもhtmlやcssと同じく静的ファイルなので、ドキュメントルートに置いてApacheやNginxなどのHTTPサーバーがレスポンスすれば良いのでした。

そして、create-react-appはnpm run buildというコマンドによって、完成品の静的ファイルたちをbuildディレクトリ以下に配置してくれます。
試しにbuildディレクトリに移動して、 PythonでHTTPサーバーを立てると、npm startの時と同じ内容を見ることができました。

Rails側ですること

Railsをapiサーバーとして利用すると決めたら、Rails側ですることは特にありません。三点だけ箇条書きにして述べることとします。

• rails new –api という風にAPIモードでプロジェクトをスタートさせることでscaffoldしてもviewを生成しないように変更してくれます。
• 開発中はリクエストするHTTPサーバーのポートがRailsのアプリケーションサーバーのポートと異なるのでcorsの設定が必要です。
• デプロイの際はunicornで（他のものでも良い）アプリケーションサーバーを立てれば良いです。

高速ウェブアプリ開発

以上がReactとRailsを共存させる方法についての全体像でした。
以上の流れはテンプレートとして自分の中で何度も使うと、開発スピードはとても早くなると思います。

僕はコーディングに時間を取られずに、さっさとウェブサービスをローンチしてしまいたいと思っています。
Railsはこのプロジェクトには大きすぎるかな…とか考えずに、スピード重視で技術を選定していきたいと考えています。
そしてスピードのためにも慣れるのが何よりも大切だと思うので、フロントはReactで書くようにもしています。

ただ、それは「どうしてサービス開発をするのか」「どうしてプログラミングを始めたのか」という根本的な自分の欲望に基づいた判断であり、誰もがそういう開発をした方がいいと主張しているわけではありません。

僕の場合は、サービスで一発当てるための開発であり、思えばそのためにプログラミングを始めたのでした。
流行るサービスを作るためにはやっぱり数を打たなければならないし、スピードがないと自分のやる気を大幅に削いでしまいます。

似たような志で、素早く自分のアイディアを形にしたいという人がいれば、ReactとRailsでの開発はその要望にきっちりと答えてくれるでしょう。

最後に、僕が最近作ったサービス「STUDY WITH」も興味があれば覗いていってください！
勉強相手をランダムにマッチングし、通話で繋ぎながら一緒に自習するサービスです。

Tweet

Pocket