【Rails7+esbuild】必要なJavaScriptのみ個別に読み込みたい時

必要なJavaScriptのみ個別に読み込みたい

方法が分からず、とりあえず動きゃいい精神でapplication.jsに全部読み込ませてたら、パフォーマンス診断で怒られてしまった（あたり前田のクラッカー）

不必要なjsを読み込んでいるページでブラウザエラーも出ていたので、これを機に直すことに。

そもそも、なぜapplication.jsに詰め込んだ？

Sprockets::Rails::Helper::AssetNotFound in ○○　のエラーになる。

ここでは、top_bubble.jsというファイルを読み込ませようとしていますが、上記エラーでうまくいかず。

The asset "top_bubble.js" is not present in the asset pipeline.

「 "top_bubble.js "がアセット・パイプラインに存在しません。」
とあることから、asset周りなのはわかるのですが、どうしたら良いのやら。。。

初学者のため、間違いやまずいやり方があればぜひコメントでご指摘ください🙏

確認したこと

1.パスが間違っていないか

2.app/assets/javascriptsの設定

3.app/assets/buildsに個別に読み込みたいjsがbuildされているか

1. と 2.は結果的には関係がなかったのですが、忘備録に簡単に記載しておきます。

上記記事によるとRails６まではapp/assets/javascripts以下の全てのファイルを自動で読み込んでいたそうです。その設定ファイルがconfig/initializers/assets.rbとのこと。

ただし、今回はRails7を使用していることから、そもそもapp/javascriptにあるのでファイル構成が違います。ものは試しなので下記のように設定を記載してみましたが、結果として3.だけで動いたため関係ありませんでした。

config/initializers/assets.rb

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )


Rails.application.config.assets.precompile += %w( custom/*.js ) 
#追加してみたけど関係なかった
#今回個別に読み込みたいjsファイルは全てapp/javascript/custom以下に置いているためcustom/*.jsとなっている

config/initializers/assets.rbはいつ使うのか誰か教えてください😇
assets.rbについてはプリコンパイルするファイルを指定する時に必要でした。デプロイ時にエラーが出たので、こちらをご覧ください。

3.app/assets/buildsに個別に読み込みたいjsがbuildされているか

esbuildではapp/javascript以下のファイルが自動でapp/assets/builds
にコンパイルされます。
※コンパイル：人間が書いたコードをコンピュータの処理装置であるCPUが解釈して実行できる形に変換すること。俺たちにとってのDeepleみたいなもんだろ（違）。

app/javascript

app/assets/builds

ブラウザは、このapp/assets/buildsにコンパイルされたコードを読み取るので、そもそもここにファイルがないとThe asset "top_bubble.js" is not present in the asset pipeline.と言われるわけです。

esbuildの場合、どこにコンパイルのためのコマンドがあるかというと、package.json

package.json

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.2.1",
    "esbuild": "^0.17.19",
         省略
    "tailwindcss": "^3.3.2",
    "trix": "^2.0.5"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
// ↑ここでapp/javascript/*.* をassets/builds にコンパイルするよう要求している
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  }
}

ということでコードを追加。

package.json

"scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify",
    "build:custom": "esbuild app/javascript/custom/*.js --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
// ↑これを追加
  }
}

$ bin/devコマンドで再起動したのですが、yarnコマンド(npm使ってる人はnpm)を打たないと自動ではbuildされないようです。
$ yarn build:custom

boozefolio % yarn build:custom       
yarn run v1.22.19
$ esbuild app/javascript/custom/*.js --bundle --sourcemap --outdir=app/assets/builds --public-path=assets

  app/assets/builds/bubble.js          254.5kb
  app/assets/builds/top_bubble.js      254.4kb
  app/assets/builds/tourguide.js         2.4kb
  app/assets/builds/search.js            945b 
  app/assets/builds/default_values.js    927b 
  app/assets/builds/preview.js           610b 
  app/assets/builds/number-input.js      390b 
  app/assets/builds/bubble.js.map      466.1kb
  app/assets/builds/top_bubble.js.map  466.1kb
  app/assets/builds/tourguide.js.map     3.1kb
  ...and 4 more output files...

✨  Done in 0.23s.

app/assets/buildsに無事コンパイルされました。

これを読み込みたいviewファイルで読み込んでやればOK
例　：<%= javascript_include_tag "top_bubble" %>

その他詰まったところ

jQueryなどを使用している際は、個別にimportする必要があります。

app/javascript/custom/top_bubble.js

import "../add_jquery" //コードを追加

var items = 30; 

for (var i = 0; i <= items; i++) {
  var moveVal = Math.ceil(Math.random() * 50); 
  var posVal = Math.ceil(Math.random() * 50);

ただ、なぜかjQueryをCDNで読み込まないとimportできず。。。application.jsでは大丈夫だったのになぜなんでしょうか？　むむむ。

<%= javascript_include_tag "top_bubble" %>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
// CDNを追加

このままではデプロイ時にエラーが出ました。

詳しくは別記事にまとめたので下記をご覧ください。