とあるプロジェクトで index.html.erbのviewに、とあるイベントを効かせるためにCoffeeScriptを用いました。
そのときに起こったちょっとした事件です。
前提
今回は元あったアプリケーションの改修作業 & 新しい機能の追加等を行うというプロジェクトでした。
僕自身まだ新人でRailsの経験も浅いところ、新人の中でもRubyがまあまあできるということで入ったのですが、如何せんフロントの知識がほとんどない。
既存のコードを参考にしながら、先輩を質問攻めにして困らせながら何とか進めていました。
フロントが苦手でも以外と何とかなるもんでしたが。
過程
いつものように、指定のviewがロードされたときのイベントを作成しようとしていました。
まあ、簡単ですよね。
$(window).on 'load', 'viewに指定したclassまたはid', ->
行いたい処理
以前にも先輩に質問をし、該当のソースコードを読み漁っていたので、当たり前のように書いて、当たり前のようにページをロードしました。
が、全く動かない。
最初はIDがおかしいものと思って何度も確認し書き換えましたが、それでもうまくいかない。
console.logで確認してみても、そもそもconsole.logの結果が出てこない。なぜだ。
ちなみに冒頭にも書いていますが、該当のviewは index.html.erbです。
ここに書くまでもないかもしれないですが、JSファイルは app/assets/javascriptsに作成してます。ファイル名はviewに合わせてindex.js.coffeeにしていました。
試行錯誤して開発者コンソールを確認したところ、index.js.coffeeこの子が読み込まれていないことが発覚。最初は理由が全くわかりませんでした。。。
原因と結論
結論を言ってしまえば、javascriptディレクトリ内に同じ名前のファイルがあったことが原因でした。
しかも、僕が作成したものとは別にindex.jsというものが先に存在していたのです。
$ cd app/assets/javascripts
$ ls
=> index.js index.js.coffee
こんな感じ。
フロント & Railsの知識が乏しい僕には全くわからなかったのですが、いかに.coffeeと書いてあろうと、同一ファイル名だと読み込めないようです。CoffeeScript自体がコンパイルされてから読み込まれるので
index.js.coffeeをコンパイル
↓
コンパイルされたindex.jsが読み込まれる
↓
元あったindex.jsが読み込まれ上書きされる
結果：せっかく作成したindex.js.coffeeが闇に葬られる
ということになるみたい。そりゃあ読み込まれんわなｗ
終わり
僕が作成したCoffeeScriptは泣く泣く削除して、元あったjsファイルに追記したら何事もなかったかのようにうまくいきました。
泣く泣くと言いつつもブラウザで変換してくれるツールを使いましたがね。
この子です http://js2.coffee/
JSのエラーは非常にわかりにくいです(僕の知識不足なだけかもしれません…)。
万が一console.logが表示されなかったら、上の現象を疑ってください。
同じ名前のファイルがあるかもしれません(設計をしっかりしましょう)。
Railsがんばろ。。。