Rails 5.1でReact.js連携アプリを構築してみよう

サンプルコードで学ぶRuby on Rails 5実践入門 番外編

　2017年4月27日に正式リリースされたRuby on Rails 5.1では、フロントエンド回りに大きな変更がありました。新たに採用されたYarnやwebpackなどを用いて、Rails上でReact.js連携アプリを構築する手順を紹介します。また、ReactベースのMaterial-UIを使ったサンプルも紹介します。

対象読者

• Rails5.1より古いRailsを触ったことがある方
• Railsは触ったことがないが、Webフレームワークを触ったことがある方
• Railsは触ったことがないが、Reactを触ったことがある方

本記事で動作確認済みの環境

• OS X Yosemite
• Ruby 2.4.1
• Ruby on Rails 5.1
• Yarn v0.23.4
• webpack 2.5.1
• React 15.5.4

環境構築

　まずは前提となる、以下の環境を構築します。

• Node.js
• Yarn
• Ruby on Rails

　なお、Rubyのインストール手順は省略します。rbenv、ruby-buildによるRubyインストールは事前に済ませるようにしてください。

Node.jsのインストール

　Node.jsは、nodebrew経由でインストールします。nodebrewは、Rubyでいうところのrbenvのような存在で、同一のPC内での複数バージョンを管理しやすくするライブラリです。

　詳細な手順の解説は省略しますが、実行するコマンドを列挙しておきます。

# nodebrewインストール
brew install nodebrew

# Node.jsインストール
nodebrew install-binary latest

# Node.jsバージョン確認
nodebrew list

# インストールしたバージョンを使う
nodebrew use v7.10.0

# nodebrewへのパスを通す
echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bashrc
. ~/.bashrc

# 指定バージョンのNode.jsが使えることを確認
node -v

Yarnのインストール

　Yarnとは、JavaScriptパッケージマネージャーです。RubyでいうところのRubyGemsに該当します。YarnのインストールはHomeBrewで行います。

# Yarnインストール
brew install yarn

# バージョン確認
yarn --version

Rails 5.1環境構築

　Railsのインストール手順については省略します。詳細な手順は以下のRails5連載記事を参照してください。

• Rails 5インストール手順

　Railsプロジェクトを新規作成します。Rails 5.1より新たに--webpackオプションが追加されました。webpackは、モジュールバンドラと呼ばれ、アセットファイルを1つにまとめる役割を担います。--webpackオプションを指定すると、webpackerというwebpackをラップするgemを通してrailsコマンドにwebpackを操作するための拡張タスクが追加されます。追加された拡張タスクは、以下のコマンドで確認することができます。

bin/rails webpacker

Available webpacker tasks are:
webpacker:install             Installs and setup webpack with yarn
webpacker:compile             Compiles webpack bundles based on environment
webpacker:check_node          Verifies if Node.js is installed
webpacker:check_yarn          Verifies if yarn is installed
webpacker:verify_install      Verifies if webpacker is installed
webpacker:yarn_install        Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn
webpacker:install:react       Installs and setup example react component
webpacker:install:vue         Installs and setup example vue component
webpacker:install:angular     Installs and setup example angular2 component

　--webpackオプションを指定せずRailsプロジェクトを作成した後、webpackの環境構築をしたい場合はこれらのタスクコマンドを使用します。

　本記事ではReact.js連携アプリを扱うため、--webpackオプションの引数にJavaScriptのフレームワークであるreactを指定します。このようにRails新規作成時にオプションを指定すると、環境構築時にbin/rails webpacker:install、bin/rails webpacker:install:reactが実行されます。

　以下のコマンドを実行してRailsプロジェクトを新規作成します。実行中にGemfileを更新するか確認を求められるので「Y」を入力します。

bundle exec rails new . --webpack=react

      create  README.md
      create  Rakefile
      create  config.ru
      create  .gitignore
    conflict  Gemfile
Overwrite /codezine/rails51_sample/Gemfile? (enter "h" for help) [Ynaqdh] Y
…（中略）…
* bin/rake: spring inserted
* bin/rails: spring inserted

　ここまでの手順でReact.jsと連携するRailsアプリのベースが整いました。webpack=reactオプションによって追加される主なディレクトリ／ファイルの役割は以下の通りです。

主なディレクトリ／ファイルの役割

追加されたディレクトリ／ファイル	役割
.babelrc	Babelの設定ファイル
.postcssrc.yml	PostCSSの設定ファイル
yarn.lock	Yarnパッケージの依存関係を記述したファイル
config/webpack/	webpackの設定ファイルのディレクトリ
node_modules/	YarnでインストールされるJavaScriptパッケージの格納先
app/javascript/packs/application.js	webpackによるJavaScriptコンパイル対象を記述するファイル（後述）
app/javascript/packs/hello_react.jsx	React.jsのサンプルファイル（後述）
bin/webpack	webpackによってコンパイルするコマンド（後述）
bin/webpack-dev-server	webpackコンパイルを自動化するコマンド（後述）
bin/yarn	YarnでJavaScriptパッケージをインストールするコマンド（後述）