導入環境

執筆時点のバージョンはRails 5.1.1です。
導入した環境と主なライブラリーのバージョンは次の通りです。

  • OSX 10.12.5（macOS Sierra)
  • Ruby 2.4.1p111
  • Rails 5.1.1
  • webpacker 2.0
  • Node.js 7.9.0
  • Yarn 0.21.3

また、Webpackerのサイトを確認すると https://github.com/rails/webpacker

  • Node.js 6.4.0+
  • Yarn 0.20.1+

との記述がありますので、これらJavaScript関連のライブラリも導入しておく必要があります。

その他、導入しているアプリケーション

データベース：PostgreSQL9.4
Ruby バージョン管理：rbenv

プロジェクトの作成

早速Railsプロジェクトを作成します。
プロジェクト名、およびそのルートディレクトリは適宜読み替えをお願いします。

ディレクトリ作成とRubyのバージョン指定

$ mkdir ~/work/red_caddie5 && cd "$_"
$ rbenv local 2.4.1
$ ruby -v

Gemfileの作成

$ vi Gemfile

Gemfile

source 'https://rubygems.org'

gem 'rails', '~> 5.1.1'

Railsのインストール

$ bundle install --path=vendor/bundle

Railsプロジェクトの作成

弊社ではフロントにはReactを使用することが多いので、Webpackerのreactオプションを指定します。
また、データベースもpostgresqlを指定します。

$ bundle exec rails new . --webpack=react -d=postgresql

インストールが開始され、Gemfileが競合しているとメッセージが表示されますが、yを入力して更新します。
インストール途中で、JavaScriptのライブラリの導入も行われます。

以下、コンソールの一部抜粋です。

Installing all JavaScript dependencies
         run  yarn add webpack webpack-merge js-yaml path-complete-extname
         webpack-manifest-plugin babel-loader@7.x coffee-loader coffee-script
         babel-core babel-preset-env babel-polyfill compression-webpack-plugin
         rails-erb-loader glob extract-text-webpack-plugin node-sass
         file-loader sass-loader css-loader style-loader postcss-loader
         autoprefixer postcss-smart-import precss resolve-url-loader
         babel-plugin-syntax-dynamic-import
         babel-plugin-transform-class-properties from "."

依存関係のあるライブラリも含めるとものすごい量です。
んーーー
JavaScriptのライブラリどんだけ入るの・・・

Webpack dev server

従来、Railsは rails server コマンドで開発用Webサーバーを起動しましたが、5.1のWebpackerにビルドしてもらうJavaScriptのソースコードは app/javascript/packsディレクトリに配置します。（Webpackerのサイトでは pack files と呼んでいる）
Webpack Dev Serverを起動することで、上記ディレクトリのpack filesをリロードしてくれるようです。(development環境で)

Foremanの導入

ここで、Railsの開発サーバーと、Webpack Dev Serverの2つをそれぞれ起動しなければならなくなりますが、Foremanを導入することで１つのコマンドで済むようになります。
小さいことかもしれませんが、生産性を少しでも高くするために、また開発者のストレス軽減には重要かもしれません。

Gemfileにgemを追加します。

group :development do

  ...

  gem 'foreman' # 追加

end

開発時に利用しますので、developmentのグループに追加しています。

次のコマンドでforemanをインストールします。

$ bundle

無事foremanのインストールが完了したら、Procfileを作成します。
作成する場所はRailsのルートディレクトリです。

web: bundle exec rails s
webpacker: ./bin/webpack-dev-server

では、foremanを起動してみます。

$ bundle exec foreman start

起動後次のように起動成功のメッセージが表示されれば環境構築は成功している思います。

 ....
11:52:51 webpacker.1 | webpack: Compiled successfully.

いつものようにlocalhost:3000を指定してもサーバーにつながらなかったので少し焦りました。
コンソールのログを探したところ見つけました。

11:52:51 web.1       | => Rails 5.1.1 application starting in development on http://localhost:5000

Rails5.1のベータ版では、Railsのサーバーのport番号はデフォルトで3000番だったと思うのですが、5.1.1から5000番になったのでしょうか？
どうやら、Foremanで起動した場合は5000番ポートがデフォルトになるようです。

以下のURLにアクセスすると、いつものトップページが表示されると思います。

http://localhost:5000

今回はここまでにしておきます。
次回はReactのあたりを見てみたいと思います。