Rails 5.1のwebpack (gem無し)を使ってReact, Redux, Material-UIの環境構築

RailsのViewをReactにする場合のお手軽な環境構築としては少し前ならreact-railsやreact_on_railsといったGemを使って統合していた。それもRail 5.1になってGem無しでもカンタンに環境構築が可能になった。もちろんGemを使えばそれらに付随する機能が使えて便利な面もあるが、「無しでもカンタンにできる」というのはありがたい。またRail標準としては「これからJavaScriptフォルダ配下のpackにReact関連コードを置きます」とかやられると、一応Rails標準というものを知っておいた方がよさそう。
ということでRails 5.1のwebpack (gem無し)を使ってReact, Redux, Material-UIの環境構築を書いた。

$ ruby -v
ruby 2.3.3
$ rails -v
Rails 5.1.1
$ npm -v
4.0.5

railsのバージョンが5.1であることを確認した後、rails newを--webpack=react指定で実行する。
実行後の出力結果を見るとwebpacktやらyarnがあることが分かる。

rails new myapp --webpack=react
 :
 :
Using rails 5.1.1
Using sass-rails 5.0.6
Bundle complete! 17 Gemfile dependencies, 71 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
       rails  webpacker:install
Copying webpack core config and loaders
      create  config/webpack
      create  config/webpack/configuration.js
 :
 :
$ brew upgrade yarn
success Saved 562 new dependencies.
├─ abbrev@1.1.0
├─ acorn-dynamic-import@2.0.2
├─ acorn@5.0.3
├─ ajv-keywords@1.5.1
 :
 :
yarn add v0.23.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...

フォルダ構成が以下のようになっている。これからはapp/javascript/packs配下に入れるのが標準とのこと。

app/javascript
└── packs
    ├── application.js
    └── hello_react.js

packsに入っているhello_react.jsはこのように単純なReact component。
単にHello Reactと出力しているだけ。早速これを使って動作を確認してみる。

import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}!</div>
  }
}
document.addEventListener("DOMContentLoaded", e => {
  ReactDOM.render(<Hello name="React" />, document.body.appendChild(document.createElement('div')))
})

サンプルの動作を見るために以下のコマンドでpages controllerを作る。

bundle exec rails g controller pages index

pagesのindex.html.erbに javascript_pack_tag を追記する。

# app/views/pages/index.html.erb

<h1>Pages#index</h1>
<%= javascript_pack_tag 'hello_react' %>

javascript_pack_tag のロードを有効にするため webpack-dev-serverの設定をdevelopment.rbに記載。

# config/environments/development.rb

Rails.application.configure do
 :
 :
  config.x.webpacker[:dev_server_host] = "http://127.0.0.1:8080"
end

サンプルの動作を確認するためrails サーバーを立ち上げる。

bundle exec rails server

別のターミナルから以下のコマンドを実行しwebpack-dev-serverを立ち上げる。つまりrails sserverだけではサンプルを見ることができない。

./bin/webpack-dev-server --host 127.0.0.1
  :
  :
  [164] ./app/javascript/packs/application.js 515 bytes {1} [built]
  [266] multi (webpack)-dev-server/client?http://127.0.0.1:8080 ./app/javascript/packs/application.js 40 bytes {1} [built]
     + 70 hidden modules
webpack: Compiled successfully.

ここでローカルホストの以下のページにアクセスする。Hello Reactが見えたら無事に動いていることになる。
http://localhost:3000/pages/index

この時点ではReactが入っているだけでRedux, Material-UIがまだ入っていない。
以下のコマンドで入れる。

npm install --save redux
npm install --save react-redux
npm install --save-dev redux-devtools
npm install --save material-ui
npm install --save react-tap-event-plugin

コマンド実行後にpackage.jsonを確認すると以下のようにインストールされていることが分かる。

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "autoprefixer": "^7.0.1",
    "babel-core": "^6.24.1",
    "babel-loader": "7.x",
    "babel-preset-env": "^1.4.0",
    "babel-preset-react": "^6.24.1",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.5",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "glob": "^7.1.1",
    "js-yaml": "^3.8.4",
    "material-ui": "^0.18.1",
    "node-sass": "^4.5.2",
    "path-complete-extname": "^0.1.0",
    "postcss-loader": "^2.0.5",
    "postcss-smart-import": "^0.7.0",
    "precss": "^1.4.0",
    "prop-types": "^15.5.10",
    "rails-erb-loader": "^5.0.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.4",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.6.0",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.17.0",
    "webpack": "^2.5.1",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "redux-devtools": "^3.4.0",
    "webpack-dev-server": "^2.4.5"
  }
}

以降はReduxやらMaterial-UIを使ってコードを書く。そこは長くなりそうなので書くとしても別記事にする予定。

結果としてはこんな感じでよくあるMaterial-UI風のページができあがる。個人的にはBootstrapは飽きたのでMaterial-UIがいいと思っている。フォーム押したときの下線がヒューっと出る動作とかが気持ちいい。

tango-ruby.hatenablog.com
tango-ruby.hatenablog.com
tango-ruby.hatenablog.com