とじる

rails7のimportmapでjavascriptファイルの読み込み

2023年10月17日 2023年10月17日 1 min 142 views

muraoka

pixiv、nanaでプロダクトマネージャーを経験。
現在はマーケティングやwebサービス開発のコンサルティングを行っています。

rails7でimportmap経由でjavascriptファイルを読み込む際の手順をまとめていきます。

流れ

config/importmap.rb

pin "hello", to: "hello.js"

上記でapp/javascriptフォルダのhello.jsを読み込む。

下記でimportmapを読み込み。headにかく。

<%= javascript_importmap_tags %>

下記コードをviewに記載し、helloファイルを読み込む

<script type="module">
      import "hello";
 </script>

app/javascript/hello.js

にコードを書く。