#はじめに
マニフェストファイルについて学習したので、忘備録として残しておきます。
Q.マニフェストファイルは何をどうしているのか？
A.ブラウザ表示を効率的に行うために、個々のアセットを結合し、アセットパイプラインに伝えている
#アセットパイプラインのなかで役割を担う存在
アセットパイプラインとは、開発者の作成したJavaScript、CSS、画像などのアセットを効率的に扱う仕組みのことです。sprocket-railsというgemのなかのSprocketの機能で、デフォルトで有効になっています。
アセットパイプラインでは、それらのリソースをブラウザで表示するのに最適な状態へと処理します。
具体的には、高級言語のコンパイル、アセットの連結、アセットの最小化、ダイジェストの付与などが処理されます。（ダイジェストの付与が、どのような恩恵をもたらすのかはまだ経験していません、、、）
#アセットの連結されたファイルをlayouts/application.html.erbが読み込む
アセットパイプラインの、アセットの連結、の部分を担うのがマニフェストファイルです。つまり、どのファイルとどのファイルを結合させるべきかを、アセットパイプラインに明示する（manifestする）ファイルが必要になるのです。
まず前提として、ブラウザが読み取れる言語は、ざっくり HTML・CSS・JavaScriptの三種類ですので、、、
Railsは、CSSとJavaScriptを読み込むためのヘルパーメソッドを、app/views/layouts/application.html.erbにデフォルトで<head>タグ内に次のように記述しています。
<%= stylesheet_link_tag 'application', media: 'all' %> *CSSを読み込む
<%= javascript_include_tag 'application' %> *JavaScriptを読み込む
で、この２行はそれぞれ、最適化されたapplication.cssとapplication.jsというファイルを読み込んでいます。この２つを読み込むことでHTMLを装飾したり動きをつけているのです。では、どうやってこれらの連結されたファイルは作成されたのかというと、、、
#マニフェストファイルの登場
app/assets/application.cssとapp/assets/application.jsが個々のアセットの連結を明示（マニフェスト）して、作成するのです。（これはデフォルトのやり方で他にも方法はある）
例えばapp/assets/application.jsに、どこどこのディレクトリにあるJavaScriptを読み込むように！ と指定できます。
どのようにマニフェストファイルを書くかというと、application.jsの場合、、、
//= require rails-ujs
//= require activestorage
//= require_tree .
となります。//=ではじまる行を、アセットパイプラインに伝えるための行として扱います。
・require <path>は、指定したJavascriptを、記述した位置に取り込みます。拡張子は省略可能。
・require_tree <path>は、指定したディレクトリ内のすべてのファイルを読み込みます。この.の場合は、application.jsが配置されているディレクトリが指定されていることになります。
（アセットの探索パスについてはここでは割愛させてもらいます、、、）
application.cssの場合は、、、ではなく、Sassの場合を紹介します。その場合は、、、
*= require_tree .
*= require_self
@import 'hoge'；
となります。
・//=が*=になっています。
・require_selfは自分自身を読み込むという意味です。
・新たにhoge.sassを読み込みたいときは、@importを使います。require_tree .を使うと、すべてのCSSを読み込んでしまい、ファイルの読み込みの順番がわからなくなってしまうからです。
#もう一度
Q.マニフェストファイルは何をどうしているのか？
A.ブラウザ表示を効率的に行うために、個々のアセットを結合し、アセットパイプラインに伝えている
#最後に
解像度が低いかもしれませんが、今回は以上です。
最後まで読んでいただきありがとうございます。
誰かの学習を、前進につながれば、うれしいです。
#参考文献
・現場で使えるRuby on Rails5速修実践ガイド pp266-271
・https://sass-lang.com/documentation/at-rules/import#plain-css-imports