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');
});
}
参考
このスクラップは2022/07/28にクローズされました