saitoxu.io

AboutTwitterGitHub

ReactでRailsのassets内のリソースを使う

July 31, 2017

React × Rails の環境で、React から Rails の assets 内のリソースを使う方法について調べました。 Rails 5.1 から導入されたrails/webpackerを使っている前提とします。

環境

  • Rails 5.1.1
  • React 15.5.4

方法

webpacker の README に書いてますが、 assets のリソースを使いたい JS ファイルの拡張子を.erbにしておくと、 erb の記法が使えるようになります（デフォルトで組み込まれているrails-erb-loaderのおかげです）。

<%# app/javascript/my_pack/example.js.erb %>

<% helpers = ActionController::Base.helpers %>
var railsImagePath = "<%= helpers.image_path('rails.png') %>"

というわけで、これを使って次のように assets のリソースを使えます。

// assets.js.erb

<% helpers = ActionController::Base.helpers %>

export const iconPath = "<%= helpers.image_path('icon.png') %>"
// SomeComponent.js

import React from "react"
import { iconPath } from "./assets.js.erb"

export default class SomeComponent extends React.Component {
  // ...

  render() {
    return <img src={iconPath} />
  }
}

プロダクション環境だと各リソースにダイジェストが付与されますが、 それもきちんと対応してくれます。

ただxxx.js.erbを直接あちこちで呼ぶのは気持ち悪いので、次のようにラップして使ってます。

// assets.js

import { iconPath } from "assets.js.erb"
export { iconPath }

これで他のコンポーネントからはimport { iconPath } from './assets'で呼べます。

以上、小ネタでした。

© 2021, Yosuke Saito