importmap で特定のページでだけ使う js を作る #rails

概要

importmap-rails を使っている場合に、特定のページだけで使う js ファイルを作る方法をまとめる。

github.com

js ファイルを用意する

任意のファイル名と実装内容で良いが、ここでは下記のようにする。

  • app/javascript/foo/special.js

import 可能にする

ディレクトリ配下を pin していれば、ファイルを追加しても自動で importable になる(もちろんファイル単体で pin してもよい)。

pin_all_from "app/javascript/foo", under: "foo", to: "foo"

view ファイルで読み込む

呼び込みたいページの view ファイルで読み込む。

head タグ内等、レイアウト側で読み込むことを想定して content_for を使う。

<% content_for :javascripts do %>  
  <%= javascript_import_module_tag "foo/special" %>  
<% end %>

レイアウトファイルで読み込む

head タグ等で yield して、読み込むようにする。

この時、 javascript_importmap_tags より後に読み込む必要があることに注意。

<%= javascript_importmap_tags %>
<%= yield(:javascripts) if content_for?(:javascripts) %>

参考

importmap-rails の README で、 Selectively importing modules あたりを見るとよい。