何を実現してくれるか
sprocketsはapp/assets 配下にある jsファイルとcssファイルをそれぞれ 1 つのファイルにまとめる。JavaScript と CSS をまとめる理由は、Rails アプリケーションにブラウザでアクセスした時にサーバへのアクセス回数を減らすため。
関連する用語
アセットパイプライン
Sprocketsがcssファイルとjavascriptファイルをまとめるまでの工程はアセットパイプラインと呼ばれている。
コンパイル
特定のプログラミング言語を用いて記述されたコンピュータープログラムを他の言語 を用いて記述された同じプログラムに形を変えることである。Sprocketsではアセットパイプラインの処理を実行することをコンパイルという。
ディレクティブ
ディレクティブとはSprocketsで外部ファイルを読み込むための記述のことである。
ここでいう外部ファイルとはjsの場合app/assets/javascripts配下、cssの場合app/assets/stylesheets配下にあるファイルのことである。
以下の例でははapplication.jsにtop.jsという別のjsファイルを読み込んでいる。（以下のようにコメント化して書く必要がある。）
//= require top
Sprocketsで外部のjs・cssファイルを読み込むときにはこのディレクティブを使う。
利用法
Sprocketsがコンパイルしたスタイルシートをerbで読み込むにはinclude_tagというヘルパーメソッドをerbファイルに記載すれば良い。このヘルパーメソッドはsprockets-railsというgemに記載されている。
application.cssを読み込む場合
<%= stylesheet_link_tag 'application' %>
application.jsを読み込む場合
<%= javascript_include_tag 'application' %>
よくapplication.html.erbで見るやつ。
参考にした記事
Ruby on Rails で sprockets から Webpacker へ移行し、移行できないものは共存させる方法 - Qiita