概要
1.JavaScriptとJQueryを読み込ませたい。
2.Gemfileにgem 'jquery-rails'を導入した
3.app/javascript/packs/applicatiion.jsにtoppages.jsファイルを追加
4.views/layouts/application.html.erbに<script src="/packs/toppages.js"></script>を追加
5.JavaScriptは読み込まれなかった
発生している問題・エラーメッセージ
テストサーバーを開いた時のコマンドのエラー文
Built at: 10/18/2022 10:07:41 AM Asset Size Chunks Chunk Names js/application-bed6706000354b1e6448.js 87.8 KiB application [emitted] [immutable] application js/application-bed6706000354b1e6448.js.map 95.6 KiB application [emitted] [dev] application js/toppages-be7e6471e8f51fb81d80.js 4.31 KiB toppages [emitted] [immutable] toppages js/toppages-be7e6471e8f51fb81d80.js.map 4.07 KiB toppages [emitted] [dev] toppages manifest.json 682 bytes [emitted] Entrypoint application = js/application-bed6706000354b1e6448.js js/application-bed6706000354b1e6448.js.map Entrypoint toppages = js/toppages-be7e6471e8f51fb81d80.js js/toppages-be7e6471e8f51fb81d80.js.map [./app/javascript/channels sync recursive _channel\.js$] ./app/javascript/channels sync _channel\.js$ 160 bytes {application} [built] [./app/javascript/channels/index.js] 211 bytes {application} [built] [./app/javascript/packs/application.js] 435 bytes {application} [built] [./app/javascript/packs/toppages.js] 445 bytes {toppages} {application} [built] + 2 hidden modules Rendered layouts/_navbar.html.erb (Duration: 4.0ms | Allocations: 886) Rendered layout layouts/application.html.erb (Duration: 2662.8ms | Allocations: 13124) Completed 200 OK in 2718ms (Views: 2682.8ms | ActiveRecord: 7.4ms | Allocations: 15712) Started GET "/packs/toppages.js" for 113.149.158.1 at 2022-10-18 10:07:41 +0000 Cannot render console from 113.149.158.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1 ActionController::RoutingError (No route matches [GET] "/packs/toppages.js"):
該当のソースコード
views/layouts/application.html.erb
<!DOCTYPE html> <html lang="ja"> <head> <title>テスト</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= favicon_link_tag('icon.png') %> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> <script src="/packs/toppages.js"></script> </head> <body data-turbolinks="false"> <div class ="wrap"> <%= render 'layouts/navbar' %> <div class="container"> <%= yield %> </div> <div class="footer"> </div> </div> </body> </html>
app/javascript/packs/applicatiion.js
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. import Rails from "@rails/ujs" import Turbolinks from "turbolinks" import "channels" import "./toppages" Rails.start() Turbolinks.start()
足りない箇所や、言葉足らずな箇所がありましたら、教えて頂けたら幸いです。
0 コメント