Railsのjs-routesgemはクライアントサイドでURLヘルパーを使えるようにできるgemで、大変便利です。

Gemfileにgem "js-routes"を書いてインストールしたうえで、asset pipelineのapplication.jsあたりでrequire js-routesとしておきます。すると、Rails側で使えるuser_path(@user.id)みたいなヘルパーメソッドがJSでも使えるようになって、↓なふうに使えます。

Routes.user_path(1)

ハードコーディングしなくてよくなるのでなかなか便利です。

ところでこの導入手順ではJSがSprocketsに乗っています。つまりWebpackerのみを使っているプロジェクトではこの方法での導入ができません。

Webpackerで使うには

js-routesgemにはRubyのクラスJsRoutesというのがいます。これがgenerateメソッドとgenerate!メソッドを持っています。

まずはわかりやすい方のgenerate!から。こちらはuser_pathなどの定義を書いたJavaScriptのコードをファイルに書き出すというものです。

generateは、というとJavaScriptのコードを文字列として返すメソッドです。Webpackerではこちらを使うと良いです。

というのはStack Overflowからの受け売りなのですが、実際に試してみました。

まずはjs-routesgemを普通にインストールします。

続いてerb-loaderを有効にしておきます。erbを使う方法についてはこちら↓の記事でも書いています。

Routes用のファイルを用意

Webpackerのエントリポイントのファイルがapp/javascripts/packs/application.jsだったとして、1つ上の階層にjs-routes.js.erbつまり（app/javascripts/js-routes.js.erb)というファイルを作ります。

中身はerbでgenerateの結果がそのままJSになるように書いておきます。

<%= JsRoutes.generate %>

Ruby側のJsRoutesがJavaScriptコードを書き出してくれるので、それをそのままこのjs-routes.js.erbの内容としておくわけです。

Webpackerでimport

あとはメインのファイル（app/javascripts/packs/application.js）にて、このファイルをインポートします。

import Routes from '../js-routes.js.erb'
// 必要に応じてグローバルに
window.Routes = Routes

Webpackerでも使えるようになりました。