rails7でjavascriptの扱いが大きく変わりました。今まではwebpackerなどを使ってbuild、つまり一つのファイルにまとめてjsを動かしていたのですが、import mapを使ってbuildなしで部分的につかうことができるようになりました。どう変わったのかとimport mapの使い方についてまとめていきます。
目次
従来のrailsでのjavascript（webpacker
rails5,6の時代はwebpackerを使うのが標準でした。
Webpackerは、Ruby on RailsでのJavaScript開発を助けるためにWebpackを使用することを可能にするgemパッケージです。Webpackerは、WebpackのビルドシステムをRails用にラップし、フロントエンドのコードを効率的に書き、パッケージ化するための標準設定と合理的なデフォルト設定を提供します。Webpackは静的アセット（JavaScript, CSS, 画像など）を管理し、コードをブラウザで利用しやすいパッケージにまとめることができます。（このまとめることをバンドリングと言います。
import mapとは
webpackerの時代ではファイルをまとめたり（バンドリング）、トランスパイル（変換）していましたがimportmapは個々のjavascriptを読み込んできます。
これにより、今までは一箇所変えるとバンドリングしているため全て変更されましたが部分的に変更できるようになりました。
import mapはブラウザから読み込んでいます。昔はIEが対応していないためwebpackerでビルドせざる負えないというのが大きかったですが、IEを考慮しなくなり、import mapが使えるようになりました。
import mapでjavascriptを導入
import map公式ドキュメント
https://github.com/rails/importmap-rails
importmap導入の流れは
- gemの導入（これはrails7ではデフォルト
- config/importmap.rb作成
- app/javascriptディレクトリ作成
- importmap.rbにpinでファイルを指定
- javascript_importmap_tagsをviewに追記
config/importmap.rb
pin "application", preload: true- 第一引数: パッケージ名。app/javascript内のファイル名と同じものを記載。
- to（オプション）: パッケージ名とファイル名が一致しないときに指定する。リモートサーバー上のモジュールを読み込みたい場合ここでURLを指定する。
- preload（オプション）: モジュールとその依存関係を先取りして取得させたいとき true
pin_all_from(dir, under: nil, to: nil, preload: false)- 第一引数: ローカル上の特定のディレクトリ
- to（オプション）カスタマイズされたアセットパスを使いたいとき指定
- preload（オプション）: モジュールとその依存関係を先取りして取得させたいとき true
上記でまとめて引っ張ることも可能。
rails7でjavascriptをbuildしたい場合
rails7でjsをbuildしないといけない場合はjsbundling-railsというgemをいれます。
gem "jsbundling-rails"