ボクココ

少数サービス開発運用に関するテックブログ

Rails7 で jQuery をセットアップ

ども、@kimihom です。

f:id:cevid_cpp:20220215153352p:plain

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

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>

まず importmap で対象のライブラリを読み込むリストを表示しているようだ。

その後、modulepreload の指定で application.js を優先的にロードする指定をしている。

es-module-shims は、Chrome, Edge 以外のブラウザのサポートをさせるためのライブラリのようである。

最後、module として application.jsimport している。

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

終わりに

Rails 7 の初歩の初歩を案内した。

実際にガッツリと開発していくと出てくる問題がたくさんあるだろうけど、ひとまずなんとか jQuery を使える状態にまで持っていけた。

引き続き Rails 7 の調査を進めていこう。