はじめに
最近Rails5.1のwebpackオプションを用いてReactを勉強をしていました。
とても便利なオプションなのですが、記事が少なくて困ったことがあったのでReact環境構築周りを記事にしておこうと思います。
動作環境
ruby 2.4.1
rails 5.1.0
node 8.4.0
※nodeが入っていないとrails new のwebpackオプションでこけるので注意
Railsアプリ作成
Rails5.1ではwebpackオプションが入り、
rails new hoge --webpack
みたいにすれば、アプリ内にwebpackの環境が構築でき、さらにデフォルトでGemfileにwebpackerが入るのでrailsでwebpackerコマンドが使用できるようになります。また、
--webpack=react
とオプションをすることで、reactの環境も一緒に作ってくれます。
まずはこのwebpackオプションを用いてRailsアプリを作成しましょう。
ここまでで、app/javascript/packsと言うディレクトリが作成されていると思います。jsxファイルはpacks以下に置くようにしましょう。そうしないとwebpackによるビルド時にファイルを認識してくれなくなります。
ここから下では、packs以下にデフォルトで作成されるhello_react.jsxをページに出力する作業を行っていきます。
コントローラーの作成
railsの仕様上、rootのページを設定しないといけないので、WelcomeControllerを作り、indexアクションを作っておきます。そして、routes.rbは以下のようにしましょう。
Rails.application.routes.draw do
root 'welcome#index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
この後、welcome/index.html.erbにpacks以下のhello_react.jsxを読み込ませるための処理を記述します。
welcome/index.html.erbを以下のようにしましょう。（すみません、今回はhamlで記述します。書き方は同じです）
= javascript_pack_tag 'hello_react'
以下のようにjavascript_pack_tagに実行させたいjsxファイルを読み込ませれば、そのファイルのrenderメソッドが実行されます。
Foremanの準備
Rails内でReactを動作させるには、Railsサーバーとnodeサーバーを立ち上げる必要があります。これはめんどくさいのでForemanを用いてコマンド一つでどちらも実行できるようにしましょう。
ますはgemのforemanをインストールしましょうgem 'foreman'をGemfileに追加しbundle installを行えばインストールされます。その後、以下のようなProcfileを一番上の階層(Gemfileと同じ階層)に作成しましょう。
rails: PORT=3000 rails s
webpack: bin/webpack-dev-server
これにより、bundle exec foreman startでアプリを立ち上げることができるようになりました。
アプリを立ち上げた後にhttp://localhost:3000 に飛んでHello React!が出力されていたら成功です。
終わりに
このように、Rails5.1では簡単にreactを導入できるようになりました。とても便利な機能なので、ぜひ活用してください。また、僕自身がwebpackオプションを用いて作成したRailsアプリのサンプルもあるので、もしよろしければ参考にしてみてください。