rails6で、gemのchart-js-railsを使用してグラフを作成しようとしたが上手くいかなかった。
原因が単なるタイポなのか、それともパスの関係などで上手く呼び出せていないのか判断できなかったので、application.jsやchart.jsが何なのか調べてみた。
application.jsは何をしているのか
マニフェストファイルというもので、ビューのerbファイルがapplication.jsだけを読み込めば済むように、読み込みたいjsファイルをrequireしている。
このファイルに読み込みたいjsファイルをrequireする。
chart.js関係
今回はちゃんとchart.jsを読み込んでいる。
require("chart.js")
しかし、ビューには反映されていない。
ここで二つの、そもそも疑問が出てきた。
①applicatin.jsと同じ階層にchart.jsがないが、ちゃんと反映されているのか。よく見ると、他のrequireしているものも、同じ階層にない。どこのディレクトリを読み込んでいるのか。
→この呼び出しは、node_moduleディレクトリ内にある、該当のディレクトリを呼び出している。
node_module/chart.jsディレクトリはあるので、問題ない。
そのほかに呼び出しているものも同様。
ただし、他のものは.start()を付けているが、理由は分からない。
②chart.jsとは何か。chart-js-railsがあればいいのではないか。
chart.jsは、グラフを簡単に書くことができるjavascriptのライブラリ。
chart-js-railsは、chart.jsをrailsのアセットパイプラインに統合するもの。
そのため、chart-js-railsは、chart.jsがあること前提となっている（ということ？）。
グラフが表示されない原因
rails sのログを見ると、コンパイルは上手くいっているので呼び出しは問題ない。
ではchart.jsを呼び出せているのに、グラフが表示されないのはなぜ？
推測① ビューの記載が間違っている。
試しにネットで上手くいっているソースをコピペしてみる。
→成功。
単に途中の:のうち忘れ。
エラーが表示されないとは……。
蛇足
解決したが、一点気になることが。
gemのchart-js-railsが全然出てこないが、chart.jsをyarn add chart.jsでインストールしていれば、gemは必要ないのか？
新たにrails newして試してみた。
……普通にグラフが表示された。
gemがどのような動作をしているか分からないが、グラフが表示できるなら今回はchart-js-railsは使わない方向で。
参考
Railsのマニフェストファイルを使ったJsとStylesheetの呼び出し
https://qiita.com/samurai_runner/items/da22eddb64e867b4e145
Ruby on Rails で sprockets から Webpacker へ移行し、移行できないものは共存させる方法
https://qiita.com/tatsurou313/items/645cbf0a3af4c673b5df#%E8%87%AA%E8%BA%AB%E3%81%A7%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%9F%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99-1
chart-js-railsのGithub
https://github.com/coderbydesign/chart-js-rails