前提
AWSのcloud9を利用して、Railsを使った簡単なMAP表示アプリを製作していた時の話です。
Rails初心者のため、「アセットパイプラインって何？」レベルの知識しかありません。
そんな時に、思わず嵌ってしまって解決するのに時間が掛かった経験をしたため、同じ様な事象に悩む方々いたら参考になればと思い投稿しました。
概要
①勉強を兼ねて、Google Maps APIを利用したMAP表示アプリを制作。
②「rails g controller maps index」でmapsコントローラを新規に作成。
③index.html.erbにmap表示用の"divタグ"とmap描画用の"scriptタグ"及び”JSコード”を埋め込んで、動作を確認。
④上記の方法で無事動作したため、新規に作成したmap.jsファイルにJSコードを記載し、jsファイルを読み込んでmapを描画させようとした。
⑤map.jsファイルだけが呼び出し出来ず、mapが描画されない事態になった。
<head>
//下記の記述により、jsファイルが自動で読み込まれるはずだが、map.jsファイルだけが呼び出し出来ず
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
//下記の記述により、assets以下のフォルダに保存した自動で読み込まれるはずだが、map.jsファイルだけが呼び出し出来ず
//= require_tree .
//試しにconsole.logで動作を確認したら、application.jsは正常に読み込まれていた。
console.log("hogehoge")
原因と結論
結論を言ってしまうと、assets/javascriptファイルにmap.coffeeが生成されていたことが原因でした。
このcoffeeファイルというのが初心者には曲者で、「rails g controller コントローラー名」で任意のコントローラーを作成した際に、自動で「コントローラー名.coffee」という名前で生成されます。このcoffeeファイルがあると、同じ名前で作ったjsファイルがあっても、coffeeファイルが優先的にRailsから呼び出されるため、jsファイルが呼び出されないという状態になります。
今回の事象では、map.jsをassets/javascriptファイルに作成したが、同じフォルダ内にmap.coffeeファイルが自動で生成されていたため、Railsではmap.coffeeファイルを呼び出ししていたということです。
終わりに
結果だけ見てしまうと、なんて事のない初心者ミスなのですが、特にエラー文などが出るわけではないので解決するのに時間を掛けてしまいました。Railsが自動で、jsファイルやcssファイルを読み込んでくれる仕組みを正しく理解出来ていないと、この様な問題が発生してしまうので、皆さんも注意して下さい。