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