はじめに
Rails 7でrails new app_nameをすると、Gemfileにimportmap-railsが入っています。importmap-railsとは何なのか？
この記事では、importmap-railsとは何かを説明し、それを使うことによる変化を書きます。
importmap-rails
importmap-railsは、import mapsという仕組みをRailsで使いやすくするgemです。
import maps
import mapsとは、JavaScriptモジュールの実体とその論理名のマッピングです。例えば、以下のようにしてマッピングします。
<script type="importmap">
{
"imports": {
"react": "https://ga.jspm.io/npm:react@17.0.2/index.js",
}
}
</script>
"react"が論理名で、URLの方がJavaScriptモジュールの実体です。
このようにマッピングすれば、他のファイルからこのJavaScriptモジュールを論理名を使ってインポートできます。
import React from "react"
importmap-railsを使えば楽
importmap-railsを使えば、上記のようなscriptタグをわざわざ書く必要がなくなります。まず、config/importmap.rbに以下のように書きます。
pin "react", to: "https://ga.jspm.io/npm:react@17.0.2/index.js"
そして、application.html.erb上の<head>タグ内に、<%= javascript_importmap_tags %>を書くだけです。
<!DOCTYPE html>
<html>
<head>
...
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
これだけで、Rails上のJavaScriptファイルで、reactをインポートできます。
importmap-railsを使うことによる変化(参照)
importmap-railsを使うことによる変化に以下があります。
- 複数のJavaScriptファイルを１つのファイルにまとめる必要がなくなる(bundling不要)
- 1モジュール変更したら、そのモジュールのキャッシュだけ期限切れにできる
1つ目に関しては、ブラウザのimport機能が依存しているモジュールをよしなに取得してくれるので、JavaScriptのbundlingが不要になります。
２つ目もbundlingが不要になったことによる効果です。変更があった１モジュールだけブラウザに送信すればいいので、アセットの送信量が削減されます。
まとめ
importmap-railsとは何か、それを使うことによる変化について書きました。
importmap-railsと似たようなものがRails 7以前にはなく、前々から興味があったので、調べて記事にしてみました。調べていくと、importmap-railsを使えばJavaScriptのbundlingをしなくて済むという発見がありました。やらなくていいことが増えるというのはいいことです。
今後は、importmap-railsを使う構成を実際に試して、ノウハウを蓄積していきます。