【Rails】『Webpacker + React』を導入する手順まとめ

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。本記事では、Ruby on Railsに『Webpacker + React』を導入する手順について解説しています。

WebpackerはRuby on RailsでWebpackを利用できるようにしてくれるgemです（参考Webpackerを使ったRailsでのJavaScript開発 – クックパッド開発者ブログ）。

Railsの開発プロセスに乗っかってWebpackを利用できるようにしたのがWebpacker gem、ということですね。

今回は、導入したWebpackerを利用してReactを導入する手順まで解説しています。

今回の環境はRuby 2.4.1、Ruby on Rails 5.1.3、MacOS（Sierra）を利用しています。

それでは、Ruby on RailsにWebpackerとReactを導入する方法についてみていきましょう。

スポンサーリンク

Webpackerの導入

なにはともあれ、Gemfileを編集しましょう。以下をGemfileに追記します。

gem 'webpacker', git: 'https://github.com/rails/webpacker.git'

bundle install実行。今回は「--path vendor/bundle」をつけてプロジェクト直下に配置しました。

$ bundle install --path vendor/bundle

ちなみに、以下のようにrails newの時点でWebpackerを導入することもできます。Rails5.1以上から利用可能です。

$ rails new myapp --webpack

Webpackerと同時にReactを導入することもできます。同じくRails5.1以上から利用できます。

$ rails new myapp --webpack=react

本記事では、既存のプロジェクトにWebpackerを導入する前提で話を進めていきます。

Webpackerを使うのにyarnが必要なのでインストールします。brewコマンドを使うためにHomebrewが必要です。Homebrewがよく分からない方は「参考MacにHomebrewを導入する方法＆使い方まとめ | vdeep」を参考に。

$ brew install yarn

これでWebpackerを利用する準備が整いました。

Webpackerのセットアップ

以下のコマンドで、Webpackerのセットアップをおこないます。

$ bundle exec rails webpacker:install
      create  config/webpacker.yml
Copying webpack core config and loaders
      create  config/webpack
      create  config/webpack/configuration.js
      create  config/webpack/development.js
      create  config/webpack/production.js
      create  config/webpack/shared.js
      create  config/webpack/test.js
      create  config/webpack/loaders
      create  config/webpack/loaders/assets.js
      create  config/webpack/loaders/babel.js
      create  config/webpack/loaders/coffee.js
      create  config/webpack/loaders/erb.js
      create  config/webpack/loaders/sass.js
Copying .postcssrc.yml to app root directory
      create  .postcssrc.yml
Copying .babelrc to app root directory
      create  .babelrc
Creating javascript app source directory
      create  app/javascript
      create  app/javascript/packs/application.js
Copying binstubs
       exist  bin
      create  bin/webpack-dev-server
      create  bin/webpack
      append  .gitignore
Installing all JavaScript dependencies
... 省略 ...
ebpacker successfully installed ? ?

いろいろとファイルが作成されて、Webpackerのセットアップが完了しました。

Reactの導入

それでは、Reactを導入していきましょう。ちなみに、以下の手順は「$ bundle exec rails webpacker:install」をおこなった上で実行しないと途中でコケてしまうので注意してください。

$ bundle exec rails webpacker:install:react
Webpacker is installed ? ?
Using /Users/okutani/code/myapp/config/webpacker.yml file for setting up webpack paths
Copying react preset to your .babelrc file
Copying react loader to config/webpack/loaders
      create  config/webpack/loaders/react.js
Copying react example entry file to /Users/okutani/code/myapp/app/javascript/packs
      create  app/javascript/packs/hello_react.jsx
Installing all react dependencies
         run  yarn add react react-dom babel-preset-react prop-types from "."
yarn add v0.27.5
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 23 new dependencies.
... 省略 ...
Webpacker now supports react.js ?

これでReactが導入されました。

ファイルをビルドする

Webpacker・React導入時に「app/javascript/packs/application.js」「app/javascript/packs/hello_react.jsx」というファイルが自動で作成されています。

・application.js

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

console.log('Hello World from Webpacker')

・hello_react.jsx

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render 
Hello React
 at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  
Hello {props.name}!
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    ,
    document.body.appendChild(document.createElement('div')),
  )
})

これらをビルドしてブラウザで読み込めるようにしてみましょう。

開発環境でビルドしたファイルを読み込むには、「config/environments/development.rb」に以下を追記しておく必要があります。

Rails.application.configure do
  ...省略...
  config.x.webpacker[:digesting] = true # 追記
end

それでは、以下のコマンドでjsファイルをビルドしましょう。

$ bin/webpack
Hash: f2a61d6e90fbe93a4168
Version: webpack 3.5.5
Time: 1740ms
                              Asset       Size  Chunks                    Chunk Names
hello_react-4c7946272b94829b81d3.js    2.05 MB       0  [emitted]  [big]  hello_react
application-e4364356e10bc883fd8d.js    4.49 kB       1  [emitted]         application
                      manifest.json  134 bytes          [emitted]
  [82] ./app/javascript/packs/application.js 515 bytes {1} [built]
  [83] ./app/javascript/packs/hello_react.jsx 739 bytes {0} [built]
    + 184 hidden modules

無事にビルドが成功しました。

動作確認

Webpacker・Reactがきちんと動作するか確認してみます。

「app/views/layouts/application.html.erb」のhead内に以下を追記します。

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'hello_react', 'data-turbolinks-track': 'reload' %>

動作確認用に、てきとうにTOPページを作成。

$ bundle exec rails g controller top index

「config/routes.rb」を以下のように編集します。

Rails.application.routes.draw do
  root 'top#index'
end

「$ rails s」でサーバーを立ち上げ「http://localhost:3000」にアクセス。Chromeブラウザでjavascript consoleを表示してみます。「Hello World from Webpacker」が表示されてるか確認してみましょう。

同じく、ブラウザ上に「Hello React!」と表示されていれば、Reactも問題なく動作しています。

あとは「app/javascript/packs/application.js」もしくは「app/javascript/packs/hello_react.jsx」を編集していけばOKですね。新しくファイルを追加してもOKです。

ビルドサーバーの利用

ただし、このままだと毎回ビルドしないといけないので、ビルドサーバーという便利なツールを利用します。

先ほどは「$bin/webpack」としてビルドしていましたが、代わりに以下のコマンドを使います。

$ bin/webpack-dev-server

これでビルドサーバーが立ち上がり、.jsファイルを変更・保存するたびにブラウザを自動更新してくれます。

注意点として、「$ bin/webpack-dev-server」とは別に「$ rails s」もおこなっておく必要があります。

foremanなどのgemを利用すると、「$ rails s」「$ bin/webpack-dev-server」を同時に実行してくれて便利です。興味のあるかたは調べてみてください。

まとめ

本記事では、Ruby on Rails5.1.3に『Webpacker + React』を導入する方法について解説しました。

Ruby on RailsでWebpack、Reactを利用する際の参考になれば幸いです。

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

これでRailsで便利にWebpackが利用できますね。Reactもかんたんに導入できて良い感じです！

Web開発のお仕事を募集しています