Rails7 で jQuery をセットアップ

ども、@kimihom です。

Rails 7 がリリースされてから暫く経つが、基本的な部分がまだシェアされてないことが多い。本記事では Rails 7 注目のフロントエンドのセットアップについて記す。

追記 jQuery 自体はこれでインポートできたが、jQueryプラグインなどをES6に乗せるのが大変なケースがあった。。 Importmap を使った実装が理想ではあったけども、現状 Rails6 の時と同じように AssetPipeline を使って yarn で管理するで落ち着いている。

importmap

Rails 7 といえば、Node.js を裏で使う必要がなくなった importmap-rails が目玉のリリースだ。 importmap-rails を使うことで、フロントエンドの JavaScript のライブラリを管理してくれるようになる。

github.com

本記事では初歩の初歩として、jQuery をどうやって importmap-rails に載せるかについて記す。

`importmap pin` でのインストール

さっと手順について記しておく。

$ rails -v
Rails 7.0.2.2

$ rails new sample  --skip-hotwire --javascript=importmap
$ cd sample
$ ./bin/importmap pin jquery

$ vim app/javascript/application.js

import jquery from "jquery"
window.$ = jquery

$(function() {
  console.log("Hello Rails7!");
})

Rails 起動

$ bundle exec rails g scaffold tweets title:string body:text
$ bundle exec rails server
http://localhost:3000/tweets

最初に Rails アプリを初期化するときに importmap を指定することにしている。既にある Rails アプリに importmap を導入するには以下で大丈夫だった。

$ vim Gemfile
gem 'importmap-rails'

$ bundle install
$ bundle exec rails importmap:install

これで初期化した Rails アプリにはなんと、package.json, yarn.lock が存在しない！その代わりに、config/importmap.rb にて以下の記載がある。

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js

実際にロードした jQuery を HTML からどう読み込んでいるのか、app/views/layouts/application.html.erb を確認する。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

javascript_importmap_tags が読み込まれている。このシンプルさが素晴らしい。

では実際に HTML でどう展開されるのかを調べよう。

<script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-4e9e57d9f5c0b399b79db55caf83b6c720b9f1e5e0bba00203c4011d3b637fad.js",
    "jquery": "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"
  }
}</script>
<link rel="modulepreload" href="/assets/application-4e9e57d9f5c0b399b79db55caf83b6c720b9f1e5e0bba00203c4011d3b637fad.js">
<script src="/assets/es-module-shims.min-6982885c6ce151b17d1d2841985042ce58e1b94af5dc14ab8268b3d02e7de3d6.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>