読者です 読者をやめる 読者になる 読者になる

(個人用メモ) React.jsとRailsを組み合わせる前に周辺技術について調べてみた

はじめに

React.jsとRailsを個別で学習しており、そろそろ二つを合わせてアプリケーションを作成したいなと思っております。
しかし、調べてみるとReact.jsとRailsを一緒にする方法としていくつかあるようでした。
ひと通りネットで調べて情報をまとめたので、以下にその内容を記載します。
自分はReact.js+Railsなアプリを作ったことがないです。各ツールについてもネットで調べただけで実際に使ったことがないので見当違いなことをいっているかもしれないです。ですので、あまり鵜呑みにしないでください。(ただし、参考資料だけはとてもわかりやすいものばかりでした。)

ReactとRailsの組み合わせかた

1.Railsのviewの中にReactを埋め込む

概要

2.Railsプロジェクトの中にReactのフロントエンドアプリを入れる

概要

  • webpackなどを利用する(ツールなどは下記に詳細を記述する)
  • Railsのasset-pipelineの仕組みには頼らない

    メリット

  • 作業としては分かれているがプロジェクトとしては一元管理される
  • npmモジュールを使ったりES6で記述できたりできる
  • npmのpackage managerを使える

    デメリット

  • フロントエンドの開発環境のセットアップが大変

3.Rails APIと Reactで分ける

概要

  • Railsjsonを返すことだけ(=API)に徹する
  • RailsAPIのみを作成するなら、 rails-apiというgemがあるのでrailsではなくそれを利用するほうがいいらしい。
  • サーバーレンダリングとか考える必要がないならこの設計がいいらしい

    メリット

  • 開発を分けることができる(デメリットといえばデメリット)

    デメリット

  • プロジェクトを別で管理しないといけない。サーバーも別で用意する必要がでてくる
  • API認証やCORSなどを考える必要がある
  • フロントとバックエンドを別のプロジェクトで管理されるため、開発のオーバーヘッドが高くなる

ビルドツールのまとめ

react, railsで調べているとwebpackとかbabelとかよくわからないのがたくさん出てくるのである程度体系的にまとめる。

モジュールハンドラー(ファイル生成系)

JSビルドツールのこと。フロントエンドのJSファイルを生成する。JSファイルのコーディングの部分で開発者の手助けをする

Webpack

  • コード分割できる
  • pluginによる拡張できる
  • Loaderという仕組みがあり、ソースコードに適用する処理を柔軟に設定できる
  • babel-loaderを使うことでes2015やJSxで記述したJSファイルを変換することができる。babelはJSXファイルをコンパイルするもの。
  • ビルドやコードの配置まではwebpack, ファイルへのフィンガープリントはSprocketsに任せるという運用
  • 機能がたくさんあるので、gulpなどを使わなくても設定ファイルを変更するだけで大体のことは実現できる。

    Browserify

  • 単一ファイル作成に特化している
  • browserify-railsを利用すると、RailsのSprocketsでbrowserifyを利用できるようになる。ただ、browserify-railsはビルドがすごい遅い。
  • ビルドに時間かかる
  • browserify-railsを導入するとnpmのモジュールとgemとして提供されているライブラリの両方がsprocketsに載せてasset precompileできるようになる。

    スクランナー(実行管理系)

  • gulpとGruntで人気を二分している。
  • JSXやLESSやSCSSなど変換する必要があるファイルをどうゆう処理で変換して、どこに出力するか「タスク」として管理してくれるもの。
  • Webpackなどを呼び出してントリポイント毎にJSファイルを一つにしたりなどする。
  • Railsのassetのコンパイルの仕組みを完全に捨てている。自由度が高いが環境構築に時間がかかる。(タスクランナーを利用せず、Browserifyなどを直接呼ぶのであれば、Rails側と住み分けができる。)
  • 「タスクランナー」の中で「モジュールハンドラー」が呼ばれるの関係性

    gulp

  • 現時点で開発コミュニティの活動が一番活発。シンプルな設定ファイルと、実行速度に定評あり。プラグインをpipeして連続実行できるため、中間ファイルの生成が不要。
  • コーラみたいなアイコン

    Grunt

  • 遅い! 設定ファイルが分かりにくい! とか言われつつもデファクト感のあるのがGrunt。プラグインが最多
  • イノシシみたいなアイコン

    (Sprockets)

  • gemのひとつでJavaScriptCSSコンパイルする仕組みが提供されている。Sprocketsはasset管理を行う。gulpとかとは対立の関係にあるものといってよい(デフォルトのコンパイラーに任せるか、フロントと切り離してフロント側のコンパイラーに作業を委譲するか、みたいな対立。)

    ライブラリ管理系

    バージョン管理などでよく利用される。フロントとバックエンドで管理ツールを分けるとWebpackが取り扱うライブラリを細かく指定できるのでメリットがある

    npm

  • node.js側

    Bower

  • フロントエンド側

おわりに

自分の短期目標としては、「ハッカソンでチームに貢献できるメンバーになる」、「バックエンドエンジニアとして開発と設計ができる」ことなので、色々調べたけれどもRailsAPI作成に専念してもらって、React.jsにフロントを全て任せるというスタンスを中心にプログラミングやっていこうと思います。
とはいえ、せっかく調べたので、react-railsやwebpackについても触りくらいは学習しておこうと思います。

参考資料

ReactとRailsの関係性とサンプルアプリケーションのまとめ - Qiita

モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ

webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ

BrowserifyからWebpackへの移行時の注意点 - Qiita

Ruby on Rails + Reactのベストプラクティスを模索してみる - Qiita

Webpackってどんなもの? - Qiita

ビルドツールまとめ。Gruntとかgulpとか (フロント寄り) - Qiita

RailsでAPI開発する前に知っておくべき4つのこと - Qiita