もふもふ技術部

IT技術系mofmofメディア

【Rails7】任意のviewsからJSファイルを個別に読み込む

このviewsだけにこのJSを読み込みたい・・・!
という時があると思います。
今回はそんな時のためにJSファイルを個別に読み込む方法を紹介します。
(esbuildを使用している前提で進めていきます)

手順

1. package.json に記載されているビルドスクリプトのビルド対象に app/javascript/*.* が入っていることを確認する。

入っていない場合は以下を参考に書き換えてみてください。

"build:js": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"
2. JSファイルを作る

app/javascripts/mofmof.js

console.log("mofmof")
3. 読み込みたいviewsファイルに以下を追記する
<%= javascript_include_tag "mofmof", "data-turbo-track": "reload", type: "module" %>

app/javascripts/ 直下にJSファイルを置く場合は意外とこれだけで終わります。

JSファイルの階層を深くしたい場合

app/javascripts/mofmof/index.js のように app/javascripts/ 直下にJSファイルを置かない場合は少し工夫が必要です。

1. package.json に記載されているビルドスクリプトを修正する
"build:js": "esbuild app/javascript/*.* app/javascript/**/*.* --bundle --sourcemap --outdir=app/assets/builds",
2. 読み込みたいviewsファイルに以下を追記する
<%= javascript_include_tag "mofmof/index", "data-turbo-track": "reload", type: "module" %>

ビルドされたファイルも階層が深くなっているので、注意しましょう。

終わり

package.json を修正するのを忘れて、「JSファイルが見つからないってエラーになるなぁ」ということもあると思います。
Rails5や6に慣れてる人は気を付けましょう!