Zenn
Closed1

Rails 7でJavaScriptファイルを読み込みたい

オクトオクト

STEP 1

app/javascript/application.jsにカスタムJSファイルをインポートする

app/javascript/application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import '@hotwired/turbo-rails';
import 'controllers';

// ===== ここを追加 =====
import './custom/[ 自作JSファイル ]';

STEP 2

config/importmap.rbをいじる

config/importmap.rb
# Pin npm packages by running ./bin/importmap

pin 'application', preload: true
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'

# ===== ここを追加 =====
pin_all_from 'app/javascript/custom', under: 'custom'

STEP 2.5

念の為、app/views/layouts/application.html.erbに<%= javascript_importmap_tags %>があるか確認

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

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

    <%# ===== ここを確認 ===== %>
    <%= javascript_importmap_tags %>
  </head>

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

STEP 3

好きなように自作JSファイルをいじる

app/javascript/custom/***.js
{
  const Btn = document.getElementById('Btn');

  accountBtn.addEventListener('click', () => {
    const dropDownMenu = document.getElementById('dropDownMenu');
    dropDownMenu.classList.toggle('show');
  });
}

参考

How to add custom JS file to new rails 7 project

このスクラップは2022/07/28にクローズされました