rails7でのjavascript bundlingとimport mapでのjavascriptの扱い

目次

マーケター、エンジニアを月1時間からジョインできるプラットフォーム

airteamは月1時間からマーケターやエンジニアに相談できるプラットフォーム。 雇うのはハードル高いけどプロをチームに入れたい。そんな経営者のためのサービスです。 相談にのる方も募集しています。

タスクなしだから月一時間からジョイン可能

作業はなくオンライン相談メイン。 月1時間からさっと経験者に継続的に相談できます。

多様な経験者を雇用するより何倍も早くチームに

あらゆるジャンルの経験者がいるので あなたのチームのノウハウの選択肢が広がります。

NDAはすでに締結済み、契約もスムーズ

契約の煩雑なやりとりはなく、NDAはすでに締結済み、書面のやりとりはありません。

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"

https://qiita.com/kazutosato/items/1ae1cf0ec380a75d4dc4