新人エンジニアの私が、入って1ヶ月ほどの時にハマった落とし穴。
「RailsでJavaScriptファイルを新しく作ったけど動かない。うまく繋げられない。」
一人で解決するのに相当な時間をかけてしまいましたので、同じ状況で困っている方のお力になれれば幸いです。
状況
Ruby on Railsで、JavaScriptファイル sample.js を新しく作りました。
class Sample {}
この sample.js に書いたクラスを、html.erb で呼び出します。
<script>
$(function () {
new Sample();
});
</script>
しかし、、、ページを読み込むとコンソールに以下のエラーが出てしまいました。
Uncaught ReferenceError: Sample is not defined
ReferenceError、、、Sampleなんてのは見つからないと、、、
完全にJavaScriptファイルが読み込まれていません。
そこで気付きました。
「あ！！ファイルのパス指定してない！！」
ということで以下のコードを追加します。
<%= javascript_include_tag 'sample' %>
しかし、、、またまたエラー。
今度はコンソールエラーではなく画面ごと表示できなくなってしまいました。
Sprockets::Rails::Helper::AssetNotPrecompiledError
そして私は沼にハマりました。今思えばきちんとエラーの内容を見れば済む話だったのですが、当時はなかなか原因がわからず、、、
格闘すること１時間後、、、
ようやく見つけたのが、、、
config/initializers/assets.rb
このファイルでした。こいつへの記述が足りていなかったのです。
個別でJavaScriptファイルを使用したい場合は、assets.precompileの指定を行う必要があります。そこで以下をassets.rbに追記します。
Rails.application.config.assets.precompile += %w (sample.js )
これでOK！！！ではありません。
このコードを足しただけでは、ページをリロードしてもまた同じエラーが出てしまいます。
最後に重要なのは、docker-composeによるコンテナの再構成。今回のようにファイルを新規追加した場合などには読み込み直す必要があります。
docker-composeをRunして、ようやくJavaScriptファイルが読み込まれました。
まとめ
この経験から、いろんなファイルへの関心を持つ習慣がつきましたし、エラーの内容をきちんと読解することの大切さも学びました。
今回の内容も、一度知ってしまえばもう二度と繰り返すことはない過ちだとは思いますが、、、
初めてで、かつ初心者だと、「どこのコードが間違っているんだろう？」と、コードの内容ばかりに思考が傾き、assets.rbファイルの存在へ辿り着くのに時間がかかることも多いと思います。
少しでも同じ状況で困っている方のお力になれれば幸いです。