Rails5.2.1で任意のJavaScriptを読み込む方法が分かりません。

Rails5.2.1でWebアプリケーションの学習を行なっています。現在、google maps apiを使って、マップを表示させるだけの簡単なプログラムを作っています。そこで、マップを描画させる命令をJavaScript（以下、JS）で記述したのですが、ページを表示させた時に、別ファイル(google_map.js)に記述したJSが読み込まれないため困っています。

また、環境についてはAWSのCloud9を使用しています。

ソースコード

index.html.erb

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Google Map</title>
  <style>
    #google_map {
      width: 700px;
      height: 350px;
    }
  </style>
</head>
<body>
  <div id="google_map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=****"></script>

</body>
</html>

google_map.js

(function() {
  'use strict';
  console.log("hoge.js")//jsが読み込まれているか確認するため

  var target = document.getElementById('google_map');
  var map;
  var tokyo = {lat: 35.681167, lng: 139.767052};

　　　window.addEventListener('load', function() {  
       map = new google.maps.Map(target, {
       center: tokyo,
       zoom: 15
       });
　　　});
})();

試したこと

①index.html.erbに<script>タグを埋め込んで、google_map.jsの中身を直書きした場合には、マップが問題なく表示されました。

②application.jsには以下の記述をしています。

//= require rails-ujs
//= require activestorage
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

console.log("application.js")

ページを読み込んだ際にconsole.logの中身は表示されました。

③gemfileには以下の記述を追加して、bundle installとrailsサーバーの再起動をしています。

gem 'jquery-rails'

④google_map/jsの保存場所は、/google_map/app/assets/javascripts/です。

application.jsに "//= require_tree ."を記述したので、assets以下のファイルに保存したJSファイルが自動的に読み込まれると思ったのですが、Railsの「アセットパイプライン」の仕組みが理解しきれず悩んでいます。JSを読み込ませる方法は多々あるかと思いますが、Railsの仕組みを理解するため、任意のJSを読み込む方法を勉強しています。初学者の質問で読みづらい点が多々あるかと思いますが、解決策等ご教授頂けると幸いです。よろしくお願いします。

ryochin

2018/09/23 03:11

お手元の development 環境において、表示される html の中に <script src="/assets/google_map.self-85c50dffdc3b57a924a75001c17cb4401f80994bf675348ffe996b0582b416df.js?body=1"></script> のような script タグは存在しますか？

kenkenbbb

2018/09/25 04:12

連絡が遅くなり申し訳ありません。手元の環境ですと、/environment/google_map/app/views/layouts/application.html.erbにscriptタグを埋め込んでいます。application.jsは読み込まれているみたいのですが、google_map.jsは読み込まれないという状況です、、、。

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

回答1件

ベストアンサー

一般的には、app/views/layouts/application.html.erb に

html
1    <%= javascript_include_tag 'application' %>

を記述すると自動的に読み込まれます。

ですが、上記の index.html.erb の書き方からすると、layout 機能を使用されていないように見受けられますので、その場合は index.html.erb の <head></head> 内に javascript_include_tag を直接記述することになります（が、素直に layout を使用しヘッダ部分を共通化するのをお勧めします）。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <%= javascript_include_tag 'application' %>
6    <title>...</title>
7  </head>
8  ...

参考: https://ruby-rails.hatenadiary.com/entry/20140810/1407603600

投稿2018/09/25 04:39

ryochin

総合スコア280

kenkenbbb

2018/09/27 07:11

回答ありがとうございます！自分のcloud9環境で、頂いたアドバイスをもとに修正した結果、無事にJSファイルを読み込むことができました。 application.jsに「//= require_tree .」という記述をしていたのですが、上手く動作しなかったため、「//　require_tree .」とし、自動読み込みを無効にした上で、「プリコンパイルの追加」と「 index.html.erb の <head></head> 内に javascript_include_tag を直接記述」をしたことで、無事に動作することが確認できました。 Railsの動作を改めて勉強・理解することができました！ありがとうございます！

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