Ruby on Rails: js-routesを使ってフロントエンドでもRoute系のHelperを使用するMEMO

フロントエンド側から非同期でRails側にリクエストを投げたいときとかに今までは以下のような定数を集めたmoduleをフロントエンド側に用意してたりしていたのですが、

export const BLOG_API_ENDPOINT = "/api/blogs";
export const LIKE_API_ENDPOINT = "/api/likes";

js-routesというgemを使うと便利だったので使い方とかをメモしておきます📝

github.com

js-routesを導入してフロントエンド用のroutesを生成する

使い方は簡単でjs-routesをGemfileに追加して

group :development do
  gem "js-routes"
end

bundle installを実行後、以下のコマンドを実行してroutes.jsおよびroutes.d.tsを生成するだけです。TypeScriptを使用しない場合は、JsRoutes.definitions!の実行は不要です。

$ bin/rails c
JsRoutes.generate! # routes.js
JsRoutes.definitions! # routes.d.ts

※READMEを見る限りrake taskも用意されているのですが、なぜかrake -Tで表示されなかった。。。

js-routesで生成したroutesを利用する

あとは簡単でimportして以下のように使用する事ができます。

import { api_blogs_path } from "@js/routes";

import Client from "@js/services/Client";

export async function postBlog(params: object): Promise<PostBlogResponse> {
  const responseData: unknown = (await Client.post(api_blogs_path(), { blog: params })).data;
  return responseData as PostBlogResponse;
}

globalにroutesが使えるようにするにはapplication.js内に以下を追加すれば良いようです。

import * as Routes from 'routes';
window.Routes = Routes;

その他

生成ファイルがGitHub上のdiffで展開されないように.gitattributesに以下のような感じで追加してあげても便利そうかなと思いました。

# Mark the js-routes generated files.
app/javascript/routes.js
app/javascript/routes.d.ts

あとはDangerとかでroutes.rbの変更があったらPRのコメントとかで更新がもれないように通知とかしてあげても良さそう👀

github.com

参考

qiita.com