Help us understand the problem. What is going on with this article?

webpackerでRailsにReactを導入するまでの手順書

More than 3 years have passed since last update.

前書き

Rails5.1でwebpackやReactなどフロントエンド周りの開発が簡単に行える様になりました。
(普段Reactをメインで使っている人にとっては素晴らしいニュース)

既存のRailsプロジェクトにReact開発環境を導入するまでの手順をまとめます。

導入までの流れ

webpackerの導入

rails new時にオプションで指定する事もできますがここでは、単純にrails newして、
後からwebpackerを導入する場合とします。

$ rails new my_app

Gemfileにwebpackerを追記します。

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end

...

# webpackerを追加
gem 'webpacker'

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

...

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

bundleを実行

$ bundle

bundle実行後webpackerに対して色々なコマンドが使える様になります。
以下のコマンドでプロジェクトにwebpackerの各種ファイルを生成します。

$ rails webpacker:install

上記実行後、ルートディレクトリに下記の4ファイルが生成されます。

  • .babelrc
  • .postcssrc.yml
  • package.json
  • yarn.lock

また、フロントエンド開発用の各種ディレクトリやファイルが追加されます。

  • app以下にjavascriptディレクトリが生成される。
    • ここでReactのコードを書いていきます。
    • app/javascript/packs/application.jsがエントリーファイルとなります。
  • bin以下に、webpackやwebpack-dev-server実行用のファイルが生成される。
  • configのwebpack以下にloader関連のファイルが生成される。
  • node_modulesが生成される。
    • rails webpacker:install実行すると、yarn installも実行されます。

ここまでで、webpackerの導入は完了です。

Reactの導入

webpackerの導入が終わったので、webpackerでReact開発ができる設定を追加していきます。
とはいっても簡単で、下記のコマンドが用意されているので実行するだけです。

$ rails webpacker:install:react

上記のコマンド実行で、.babelrcへの追記やpackage.jsonの追記が行われ、
React開発に必要な環境が完成します。

ERBへの追記

実際動作を確認する為に、ERBにJSのインクルードを記述します。
これも簡単でwebpacker用にヘルパーが準備されています。
動作確認の為、適当なcontrollerとviewを作成します。

$ rails g controller tests index

index.html.erbを以下の様に修正します。

app/views/tests/index.html.erb
<div id="mountNode"></div>
<%= javascript_pack_tag 'hello_react' %>

javascript_pack_tagヘルパーは、app/javascript/packs以下のエントリーとなるファイル名をインクルードします。
hello_reactrails webpacker:install:react時に生成されたエントリとなります。

サーバーの起動

開発環境ではRail用のWebサーバとwebpack用のサーバの両方の起動が必要です。

$ rails s
$ bin/webpack-dev-server

いちいち2回コマンドを打ち込むのは面倒なので、
package.jsonのスクリプトにコマンドを追記します。

package.json
...

  "scripts": {
    "start": "rails s & bin/webpack-dev-server"
  },

...
$ yarn start

上記で、2つのサーバーが立ち上がります。

動作確認

デフォルトならhttp://localhost:3000にアクセスします。

以下の画面が出ていれば成功です。

スクリーンショット 2017-06-28 13.04.55.png

あとがき

webpackerを使う事でものすごく簡単にReact開発環境を構築できました。
webpackの設定や、loaderの追加なども柔軟にできそうです。
(SSRしたければ、react-on-railsが良さそう)

各環境に合わせてのビルド様コマンドもwebpackerが提供しているので、
ビルドも柔軟に対応できそうです。

次回はwebpackerのビルド周りについてまとめます。

tfrcm
React / ReactNative / Go / TypeScript / AWS / Docker / k8s
https://gemcook.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした