Railsが5.1になることでフロントエンドの開発が本当に楽しくなりました

Ruby on Rails の 5.1.0.beta1がリリースされましたね！

weblog.rubyonrails.org

仕事でRailsを使うものとしてちゃんと触っておかねばと思い、まずは自分の好きなJavaScript周りがどれぐらい良くなったのか見てみたところかなりびっくりしました。JavaScriptすごく開発しやすいです。 webpack があって yarn がありますし、ReactやVue、angular まで rake タスクでセットアップできます。ちょっと前までRailsでJavaScriptやるのが辛いなんて言っていたのが嘘みたいです・・・。

今回はRails 5.1.0 で Vue.js を使って新しくプロジェクトを作るところまでやってみました。

rails new

まずは rails new します。ここはまぁおなじみです。今回は webpack を使うのでオプションで --wepack を追加しています。

$ bundle exec rails new rails5.1-practice --webpack

webpack を導入するだけならこれでいいのですが、Vue.js を最初からセットアップされた状態でプロジェクトを作るには、

rails new myapp --webpack=vue

をすれば良いとやったあとで気づきました。ちなみに React も angular も同じように出来ます。

作られたプロジェクトの ./config/webpack ディレクトリに development.jsとproduction.jsとshared.jsが入っています。これらはwebpack の設定で、今までは webpack.config.js でやっていたやつです。shared.jsには共通の設定が書かれており、development.jsとproduction.jsで読み込まれています。それぞれに各環境に特化した設定を書いていくことになります。プロジェクトを作るとき最初からいつも webpack.config.js ファイルを作っていたのでこれはとても楽です。Railsは本当に開発するのが楽に楽しくできるように作られていると改めて思いました。

rails webpacker:install:vue

railsのプロジェクトを作れたら Vue.js をセットアップします。これもちゃんとrakeタスクがあってとても楽にはじめることが出来ました。

$ bundle exec rails webpacker:install:vue

これをするだけで、 ./app/javascript/pack に app.vue と hello_vue.js と application.js が作成されます。まさか .vue ファイルまで自動で作ってくれるとは思いませんでした。出力されたファイルを読み込むだけで Hello Vue! と表示するコンポーネントを使って描画するように設定されています。便利・・・。

また vue-loader も同時にインストールされており、その設定は webpack で使用する共通の設定の ./config/webpack/sharard.js に自動的に挿入されています。ここまで自動でやってくれるのかと・・・。

作ったファイルは <%= javascript_pack_tag 'hello_vue' %> で erb ファイルで読み込むようにすればOKです。

Webpackでのビルド

rakeタスクでコードは自動生成されましたが、まだビルドは行っていませんでした。ビルドを行うには bin ディレクトリにある webpack を実行すると webpackを使用してビルドを行ってくれます。また、ファイルの変更を監視してビルドするための webpack-watcher も用意されています。

2017/05/09 追記

webpacker が 1.2 になってwebpackでwatchする方法が変わっています。

開発時は foreman 等を使って rails s とwebpack-watcher を同時に動かすと開発しやすいです。以下のように Procfile を使って実行するとやりやすいと思います。

web: bundle exec rails s
webpack-watcher: ./bin/webpack-watcher

生成されたものをビルドし読み込ませるだけだと以下のように表示されます。

ほとんどコードや設定を書かずに vue.js でコンポーネントが描画されるところまで出来ました。楽の一言です。

Hot Module Replacement

Rails 5.1.0 では Hot Module Replacementまで簡単にできるようになっています。

まずは ./config/environments/development.rb の

# Make javascript_pack_tag load assets from webpack-dev-server.
# config.x.webpacker[:dev_server_host] = "http://localhost:8080"

でコメントアウトされている config.x.webpacker[:dev_server_host] の設定のコメントを解除します。

解除したら ./bin/webpack-dev-server を実行します。実行すると webpack が Hot Module Replacement 仕様で立ち上がります。この状態で .vue ファイルを編集するとちゃんと変更できることが確認できます。

まとめ

すごく簡単にモダンなJavaScript開発がRailsで出来るようになることに感動を覚えました。

単純な文字列を出力するコンポーネントを使ってみることしかしていませんが、自分でコードを書いたところがほとんどないと言うところが凄いと思います。普通に npm でインストールして設定書いてといろいろやっているとかなりの時間をかけてしまい、本質的なアプリケーション開発になかなか進まないというのはJavaScriptを書いていると良くあることでした。

それがRailsを使うとこんなに簡単にできる。RailsがWebの変化に対応し、JavaScriptのモダンな開発を取り入れてくれたのは本当にうれしいことですね。

まだbeta1ということもあり変化することもあるかも知れませし、正式にリリースされて使ってみて、大規模な開発になってくるとしんどさが出てくる事もあると思いますが、少なくともRailsとJavaScriptの連携は難しいと言われていたあの頃よりは、だいぶ楽しくフロントエンドの開発が出来るようになっていると思いました。

これからもRailsについていこうと思った次第です。

github.com

おまけ：プロダクションデプロイ

まだ試していないのですがプロダクションにデプロイするには rails webpacker:compile を実行すれば良さそうです。これを実行するとダイジェスト付きのJSがはき出されます。プリコンパイル時に実行される感じになるのでしょう。

2017/05/09 追記 webpacker 1.2 での webpack での変更監視方法

webpacker が 1.2 にバージョンアップして差分の変更監視も変わっています。

webpack-watcher が削除され、 ./bin/webpack --watch --progress で watch するのが推奨されています。

https://githttps://github.com/rails/webpacker/pull/295hub.com/rails/webpacker/pull/295githttps:

なので Prodfile も、

web: bundle exec rails s
webpack-watcher: ./bin/webpack --watch --progress

になります。