質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

2188閲覧

rails6 でjavascriptが動かない

tetsuya7724

総合スコア67

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/05/24 08:23

前提・実現したいこと

rails6でサイトを作成しています。javascriptを導入しようとしたのですが、読み込んでくれません。
コンソールで確認したところエラーが発生していました。

<script src="/packs/js/application-bbe9c4a129ab949e0636.js" data-turbolinks-track="reload"></script>をhtmlに追記するとうまくいくという記事(https://qiita.com/keiy121/items/d1880ff2d0de444458c7)を見つけ追記してみましたが、記事通り追記するとrails-ujs has already been loaded!というエラーが発生しました。

発生している問題・エラーメッセージ

turbolinks.js:1034 You are loading Turbolinks from a <script> element inside the <body> element. This is probably not what you meant to do! Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change. For more information, see: https://github.com/turbolinks/turbolinks#working-with-script-elements —— Suppress this warning by adding a `data-turbolinks-suppress-warning` attribute to: <script src="/packs/js/application-bbe9c4a129ab949e0636.js" data-turbolinks-track="reload"></script>

該当のソースコード

html

1<!DOCTYPE html> 2<html> 3<div class="container"> 4 <head> 5 <meta charset="utf-8"> 6 <title>Yakubutu</title> 7 <%= csrf_meta_tags %> 8 <%= csp_meta_tag %> 9 10 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 11 12 <script src="/packs/js/application-bbe9c4a129ab949e0636.js" data-turbolinks-track="reload"></script> 13 14 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 15 </head> 16 17 <body> 18 <div class="wrapper"> 19 20 <header> 21 <div class="container header-title"> 22 <div class="navbar navbar-expand-sm"> 23 <a class="eden" href="/">Hazard Drug</a> 24 <div class="collapse navbar-collaps" id="navbarNav"> 25    <% if user_signed_in? %> 26 <!-- ユーザーがログインしているか調べる --> 27 <!-- <ul class="navbar-nav ml-auto"> --> 28 <!-- ユーザーがログインしていた時の処理 --> 29 <li class="nav-item"> 30 <%= link_to "ABOUT", "/posts/about" %> 31 </li> 32 <li class="nav-item"> 33 <%= link_to "DASHBOARD", "/posts/dashboard" %> 34 </li> 35 <li class="nav-item"> 36 <%= link_to "LESSONS", "/posts/lessons" %> 37 </li> 38 <li class="nav-item"> 39 <%= link_to "PROFILE", "/posts/profile" %> 40 </li> 41 <li class="nav-item"> 42 <%= link_to "SETTING", edit_user_registration_path %> 43 <!-- ログアウトをする --> 44 </li> 45 <li class="nav-item"> 46 <%= link_to "LOGOUT", destroy_user_session_path, method: :delete %> 47 <!-- ログアウトをする --> 48 </li> 49 <!-- </ul> --> 50 <% else %> 51 <!-- <ul> --> 52 <!-- ユーザーがログインしていなかった時の処理 --> 53 <li class="nav-item"> 54 <%= link_to "LOGIN", new_user_session_path, class: 'post' %> 55 <!-- ログイン画面に移行する --> 56 </li> 57 <li class="nav-item"> 58 <%= link_to "SIGNUP", new_user_registration_path, class: 'post' %> 59 <!-- 新規登録画面に移行する --> 60 </li> 61 <li class="nav-item"> 62 <%= link_to "ABOUT", "/posts/about" %> 63 </li> 64 65 <!-- </ul> --> 66 <% end %> 67 </div> 68 </div> 69 </div> 70 71 </header> 72 <div class="container"> 73 <%= yield %> 74 </div> 75 76 <footer> 77 <p> @2020 tetsuya</p> 78 </footer> 79 80 </div> 81 82 </body> 83</html> 84

Gemfile

1source 'https://rubygems.org' 2git_source(:github) { |repo| "https://github.com/#{repo}.git" } 3 4ruby '2.6.3' 5 6# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 7gem 'rails', '~> 6.0.2', '>= 6.0.2.2' 8# Use sqlite3 as the database for Active Record 9gem 'sqlite3', '~> 1.4' 10# Use Puma as the app server 11gem 'puma', '~> 4.1' 12# Use SCSS for stylesheets 13gem 'sass-rails', '>= 6' 14# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker 15gem 'webpacker', '~> 4.0' 16# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks 17gem 'turbolinks', '~> 5' 18# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 19gem 'jbuilder', '~> 2.7' 20# Use Redis adapter to run Action Cable in production 21# gem 'redis', '~> 4.0' 22# Use Active Model has_secure_password 23# gem 'bcrypt', '~> 3.1.7' 24 25# Use Active Storage variant 26# gem 'image_processing', '~> 1.2' 27 28# Reduces boot times through caching; required in config/boot.rb 29gem 'bootsnap', '>= 1.4.2', require: false 30 31group :development, :test do 32 # Call 'byebug' anywhere in the code to stop execution and get a debugger console 33 gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] 34end 35 36group :development do 37 # Access an interactive console on exception pages or by calling 'console' anywhere in the code. 38 gem 'web-console', '>= 3.3.0' 39 gem 'listen', '>= 3.0.5', '< 3.2' 40 # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring 41 gem 'spring' 42 gem 'spring-watcher-listen', '~> 2.0.0' 43end 44 45group :test do 46 # Adds support for Capybara system testing and selenium driver 47 gem 'capybara', '>= 2.15' 48 gem 'selenium-webdriver' 49 # Easy installation and use of web drivers to run system tests with browsers 50 gem 'webdrivers' 51end 52 53# Windows does not include zoneinfo files, so bundle the tzinfo-data gem 54gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 55 56gem 'devise' 57 58gem 'bootstrap', '~> 4.3.1' 59gem 'jquery-rails' 60

補足情報(FW/ツールのバージョンなど)

jQueryは導入しています。(rails だったら特に使わなくてもjavascriptで動かせると聞きましたが、導入したほうが後々使うかなとおもって入れました。)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問