rubyでjavascriptファイルを読み込みたい。

前提・実現したいこと

viewファイルに呼び出し処理を書き、外部からのjavascriptファイルを呼びだしたいです。

発生している問題

https://www.sejuku.net/blog/57790
↑のサイトを参考にしてapp/assets/javascripts/test.jsとファイルを作成し中に処理を記述。
あとはviewからtest.jsファイルを呼び出そうと、viewに<script src="test.js"></script>と記述しました。
ですが何の変化も起こりません。
大変初歩的な質問で申し訳ないのですが、どこが問題なのかアドバイス頂けないでしょうか、、

該当のソースコード

ruby
1edit_mypage.html.erbファイル
2
3<script src="test.js"></script>
4<p>テスト未稼働</p>
5

js
1test.jsファイル
2
3$(document).ready(function() {
4  $("p").text("jQuery稼働テスト(稼働中)");
5});

js
1
2application.jsファイル
3
4// This is a manifest file that'll be compiled into application.js, which will include all the files
5// listed below.
6//
7// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
8// vendor/assets/javascripts directory can be referenced here using a relative path.
9//
10// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
11// compiled file. JavaScript code in this file should be added after the last require_* statement.
12//
13// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
14// about supported directives.
15//
16//= require rails-ujs
17//= require turbolinks
18//= require_tree .
19//= require jquery
20//= require bootstrap
21

原因と思われる箇所

test.jsファイルのコードの左端にエラーマークが出ています。

!△ $(document).ready(function() {
!△ $("p").text("jQuery稼働テスト(稼働中)");
});

試したこと

viewに直接javascriptの処理を記述すると動作は確認できるのですが、外部から呼び出すと反応がありません。

ruby
1<p>jQuery稼働テスト</p>
2<script type="text/javascript">
3  $(document).ready(function() {
4    $("p").text("jQuery稼働テスト(稼働中)");
5  });
6</script>
7
8これは動作します。

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

gem
1source 'https://rubygems.org'
2
3gem 'rails',        '~> 5.1.6'
4gem 'rails-i18n'
5gem 'bootstrap-sass'
6gem 'bcrypt' # 今回追加するgemです
7gem 'faker' # ユーザー作成
8gem 'will_paginate'
9gem 'bootstrap-will_paginate'
10gem 'puma',         '~> 3.7'
11gem 'sass-rails',   '~> 5.0'
12gem 'uglifier',     '>= 1.3.0'
13gem 'coffee-rails', '~> 4.2'
14gem 'jquery-rails'
15gem 'turbolinks',   '~> 5'
16gem 'jbuilder',     '~> 2.5'
17gem 'jp_prefecture'
18gem 'jquery-rails' 
19gem 'rinku'
20gem 'carrierwave'
21gem 'rmagick'
22gem 'roo'
23
24group :development, :test do
25  gem 'sqlite3'
26  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
27end
28
29group :development do
30  gem 'web-console', '>= 3.3.0'
31  gem 'listen', '>= 3.0.5', '< 3.2'
32  gem 'spring'
33  gem 'spring-watcher-listen', '~> 2.0.0'
34end
35
36# Windows環境ではtzinfo-dataというgemを含める必要があります
37# Mac環境でもこのままでOKです
38gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

ここにより詳細な情報を記載してください。

hatsu

2020/02/25 15:13

console.logのエラー文言は何か出ていますでしょうか。macだと「cmd + shift + i」で確認できます。

jun3030

2020/02/25 15:17

夜分遅くに回答して頂きありがとうございます。汗「cmd + shift + i」はどこで押せばいいのでしょうか？汗

hatsu

2020/02/25 15:23

該当のJSが動いているページをChromeでみているときに押すと動作します。参考：https://saruwakakun.com/html-css/basic/chrome-dev-tool

jun3030

2020/02/25 15:35

わざわざすいません。汗特に変わったエラーは出ていないと思います。

hatsu

2020/02/25 15:45

なるほどです。 //= require rails-ujs //= require turbolinks //= require_tree . //= require jquery //= require bootstrap の書き方がRailsのバージョンによって大事だったりしたと思うので、Railsのバージョンも教えていただけると幸いです。この書き方が適切じゃないとjQueryが読み込まれなかったりします。またRailsのバージョンがわからければGemfileなどを添付していただければ嬉しいでs。（jquery-railsやjquery-ui-railsをInstallしているかの確認にもなるので）

jun3030

2020/02/25 16:00 編集

補足へgemfileの情報を載せました。バージョンによって書き方が異なることもあるのですね汗先ほど新しくsample.jsというファイルを作成し、中身を document.write('外部定義したJavaScriptからの書き込み'); としてviewから呼び出したところ稼働しました。汗 test.jsの書き方に原因があったということでしょうか、、

hatsu

2020/02/25 16:03

うーん、document.write('外部定義したJavaScriptからの書き込み');だとjqueryを用いていない？ので動いたのかな、と思いました。sample.jsにtest.jsに書いてあった内容をそのままかくと動きますでしょうか？ $("p").text("jQuery稼働テスト(稼働中)");はJavascriptではなくjqueryの書き方です。これが動くといいな、と。

jun3030

2020/02/25 16:17 編集

すいません、動かなかったです苦笑つまりjqueryが作動していないって事ですね、、いやviewに直接書き込んだら動いてたので、jsファイルから持ってこれてないって事か、、

行動規範の内容に同意します

回答1件

ベストアンサー

Railsのバージョンが5系でありjQueryが動いてない？ので
https://qiita.com/Statham/items/372234e23749ff1f6bf8
が参考になるかもです。
上記リンクを参考に

//= require rails-ujs
//= require turbolinks
//= require_tree .
//= require jquery
//= require bootstrap

を

//= require bootstrap
//= require jquery
//= require rails-ujs
//= require turbolinks
//= require_tree .

と書き直すといかがでしょうか。

投稿2020/02/25 16:08

hatsu

総合スコア1809

jun3030

2020/02/26 09:56

書き直してみましたが原因がそこではなかったみたいです。汗お恥ずかしい話ですが、application.htmlの<head>にjqueryを使うためのコードが抜けていました。 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> まだ問題点はありますがこのように記載したところ作動しました。お忙しい中わざわざ回答して下さり感謝しかありません。本当にありがとうございました！

行動規範の内容に同意します