ども、@kimihom です。
Rails 7 がリリースされてから暫く経つが、基本的な部分がまだシェアされてないことが多い。本記事では Rails 7 注目のフロントエンドのセットアップについて記す。
追記 jQuery 自体はこれでインポートできたが、jQueryプラグインなどをES6に乗せるのが大変なケースがあった。。 Importmap を使った実装が理想ではあったけども、現状 Rails6 の時と同じように AssetPipeline を使って yarn で管理するで落ち着いている。
importmap
Rails 7 といえば、Node.js を裏で使う必要がなくなった importmap-rails が目玉のリリースだ。
importmap-rails
を使うことで、フロントエンドの JavaScript のライブラリを管理してくれるようになる。
本記事では初歩の初歩として、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.js
を import
している。
終わりに
Rails 7 の初歩の初歩を案内した。
実際にガッツリと開発していくと出てくる問題がたくさんあるだろうけど、ひとまずなんとか jQuery を使える状態にまで持っていけた。
引き続き Rails 7 の調査を進めていこう。