Rails アプリケーション上で React を使う場合、何が必要なのかを知りたくなりました。
調べた所、最近では webpacker と react-rails の組み合わせで導入するのが簡単そうだったので、そちらを試してみました。
前提
検証環境
- Rails 5.1.6
- ruby 2.4.3
- Mac OS X 10.13.4
利用する Gem について
webpacker
webpacker は、 JavaScript のモジュールバンドラである Webpack を Rails で簡単に利用できるようになる Gem のライブラリです。
GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails
react-rails
react-rails は、React を Rails 上で使いやすくするためのツールを搭載した Gem です。Webpacker や Sprockets の利用もサポートしています。
検証の目標
今回は使い方の確認のため、react-rails の README にあるGet started with Webpacker を試してみようと思います。
検証手順
rails サンプルアプリケーション作成
まずは Rails のサンプルアプリケーションを作成します。
$ rails new react-rails-example
$ cd react-rails-example
Gem インストール
今回利用する webpacker と react-rails を Gemfile に追加し、 bundle install します。
$ vim Gemfile
# 下記2つの Gem 追加
gem 'webpacker'
gem 'react-rails'
$ bundle install
webpacker インストール
webpacker を利用するために必要な config ファイルや JavaScript のモジュールをインストールします。
$ rails webpacker:install
React インストール
webpacker で管理する形で、React.js をインストールします。
$ rails webpacker:install:react
react-rails 初期設定
react-rails を使う前に、React の Component の読み込みパスなどの初期設定を行います。
$ rails generate react:install
React の Component 作成
react-rails のコマンドを使って、React の Component を作成します。
$ rails g react:component HelloWorld greeting:string
このようなファイルが作成されます。
import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
render () {
return (
<React.Fragment>
Greeting: {this.props.greeting}
</React.Fragment>
);
}
}
HelloWorld.propTypes = {
greeting: PropTypes.string
};
export default HelloWorld
React の Component 表示
Controller 作成
上記で作成した Component を画面に表示するために、検証用の Controller を作成します。
$ rails generate controller Welcomes
View 作成
view ファイルを編集します。
$ vim app/views/welcomes/index.html.erb
react-rails をインストールすることで利用できるようになる react_component helper で、先程生成した HelloWorld Componentを指定します。
props も 指定できます。
<%= react_component("HelloWorld", { greeting: "Hello" }) %>
routes 編集
root にアクセスした時の view を React の View になるよう切り替えます。
$ vim config/routes.rb
Rails.application.routes.draw do
root 'welcomes#index'
end
javascript_pack_tag 指定
Rails が webpack によりトランスパイルされた JavaScript のファイルを読み込めるよう、webpacker の javascript_pack_tag helper を指定します。
こちらにより先程の React のサンプル Component ファイルも Rails で読み込めるようになります。
<%= javascript_pack_tag 'application' %>
webpack-dev-server 起動
webpack-dev-server を起動します。
webpack-dev-server とは、webpack の開発用サーバーで、JavaScript ファイルを webpack でトランスパイルしつつ、JavaScript のファイルに変更があるとホットリロードのような形でトランスパイルし直してくれる便利なサーバーです。
webpacker をインストールすると併せて使えるようになります。
$ bin/webpack-dev-server
Rails アプリケーション起動
bin/webpack-dev-server を起動した状態で、Rails アプリケーションを起動します。
$ rails s
画面確認
http://localhost:3000 にアクセスし、画面に 「Greeting: Hello」 が表示されればOKです。
終わりに
今回はチュートリアルをたどった形になりましたが、README や ドキュメントを読んで他にどんな使い方ができるかもっと試してみようと思います。