アセットパイプライン

Rails Tutorial二週目に入ってよく理解できてなかった用語が理解できるようなってきた。

#アセットパイプラインについて
Rails 独自のフレームワークであるが、しかし既にrails自体のコア機能ではなくsprokets-rails gemに書き出しされている。
他の言語であるJavaScriptやCSS、画像などの静的ファイルのアセット（資産）を最小化 (minify: スペースや改行を詰めるなど) または圧縮して連結するためのフレームワーク
これらの他のを取り扱う為にGemfileには以下がbundleされている

gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'

Sprocketsはアセット圧縮の際にこれらのgemを使用します。

アセットディレクトリ、マニフェストファイル、プリプロセッサエンジンという、3つの主要な機能が重要。
ここから知っていく

##アセットディレクトリ

app/assets: 現在のアプリケーション固有のアセット
lib/assets: 開発チームによって作成されたライブラリ用のアセット
vendor/assets: サードパーティのアセット

rails　newで立ち上がったアプリには標準的な３つのアセットディレクトリがあり
これらのディレクトリには、それぞれのアセットクラス用のサブディレクトリがあります。例えばapp/assetsの場合、次のような画像用、JavaScript用、CSS用のサブディレクトリが。

##マニュフェストファイル

app/assets/stylesheets/application.css

 /*
 * This is a manifest file that'll be compiled into application.css, which
 * will include all the files listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets,
 * vendor/assets/stylesheets, or vendor/assets/stylesheets of plugins, if any,
 * can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear
 * at the bottom of the compiled file so the styles you add here take
 * precedence over styles defined in any styles defined in the other CSS/SCSS
 * files in this directory. It is generally better to create a new file per
 * style scope.
 *
 *= require_tree .
 *= require_self
 */

静的ファイル (アセット) を上記の場所へそれぞれ配置すれば、マニフェストファイルを使って、それらをどのように1つのファイルにまとめるのかをsproketsがRailsに指示することができます。

マニフェストファイルには ディレクティブ (directive: 命令、指示) を含めます。ディレクティブを使用して必要なファイルを指定し、ファイルを読み込み、必要に応じて処理を行い、連結して単一のファイルを生成し、圧縮します (Rails.application.config.assets.compressがtrueの場合)。

上でいうとこの部分がディレクティブ

/*
 .
 .
 .
 *= require_tree .
 *= require_self
*/

requireは、必要なファイルをSprocketsに指定するのに使用します。
app/assets/stylesheetsディレクトリ (サブディレクトリを含む) 中のすべてのCSSファイルとapplication.css自身もその対象に含めています。

##プリプロセッサエンジン

先ずプリプロセッサエンジンとは一般にある処理を行うソフトウェアに対して、データ入力やデータ整形などの準備的な処理を行うソフトウェアのことである。

この場に置き換えるとアセットであるそれぞれのファイルはそのままではテンプレートに適用は出来ず、適用させるための処理である。

tutorialでは↓

必要なアセットをディレクトリに配置してまとめた後、Railsはさまざまなプリプロセッサエンジンを介してそれらを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備します

ということでここでのエンジンとはGemfileでbundleされている

gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'

である。

#利点は？

本番環境での効率性

Asset Pipelineの最大のメリットの1つは、本番のアプリケーションで効率的になるように最適化されたアセットも自動的に生成されることです。従来は、CSSとJavaScriptを整理するために、機能を個別のファイルに分割し、(インデントを多用して) 読みやすいフォーマットに整えていました。これは、プログラマにとっては便利な方法ですが、本番環境にとっては非効率です。それというのも、最小化されていないCSSやJavaScriptファイルを多数に分割すると、ページの読み込み時間が著しく遅くなるからです (読み込み時間は、ユーザー体験の質に影響を与える重要な指標の1つです)。Asset Pipelineを使うと、この「開発効率と読み込み時間のどちらを重視するか」という問題について悩む必要がなくなります。開発環境ではプログラマにとって読みやすいように整理しておき、本番環境ではAsset Pipelineを使ってファイルを最小化すればよいのです。具体的には、Asset Pipelineがすべてのスタイルシートを1つのCSSファイル (application.css) にまとめ、すべてのJavaScriptファイルを1つのJSファイル (javascripts.js) にまとめてくれます。さらに、それらのファイルすべてに対して 不要な空白やインデントを取り除く処理を行い、ファイルサイズを最小化してくれます。結果として、開発環境と本番環境という、2つの異なった状況に対してそれぞれ最高の環境を提供してくれます。

#ほんならSassってなんやねん

Tutorialの中で、Sassを紹介しておいてファイル名の拡張子には.scssで保存するわけが分からなかったが解決できた

Sass は、スタイルシートを記述するための言語であり、CSSに比べて多くの点が強化されています。

この文が説明不足なのでは？

自分なりに変えてみると。

まずCSS　
（わかりやすく）土台（基本）のプログラミング言語である。
テンプレートのHTMLに影響を与える言語である
もうCSSというソレで完成されたもの。土台だから変な変更は加えたくない訳だ。

次にSass。＝Syntactically Awesome Stylesheetsの略で、CSSファイルを作ってくれるプリプロセッサ。
別の言語（Sassの場合はCSS）を生成する言語、いわゆるメタ言語です。
・・・はい。メタ言語とは。
→メタ言語は、それ自身で直接的な情報を記述するのではなく、そのような情報を記述する言語を作成するために使われる。

ということで言語は言語でも種類が違うということ（？）。

僕が思うにネストであったり、//で１行コメント文が付けれるだったり、変数定義が可能になったりをプラスするという点では拡張言語的働きであり、
上で出た、ある処理を行うソフトウェアに対して、データ入力やデータ整形などの準備的な処理を行う動き（CSSに変換する）をするときがプリプロセッサエンジンなのではないかと思う

最後にSCSS。＝Sassy CSSの略　Sass の　Sassyね
tutorialでは↓

SCSSは厳密な意味で、CSS本体を抽象化したフォーマットです。
つまり、SCSSはCSSに新しい機能を追加しただけで、全く新しい構文を定義したようなものではないということです。

言い換えるとSassの機能をもたせつつなおかつ見た目をCSSに近づけたSassの記法です（言語じゃないんかい）Sassの記法なんです。
話が前後するがさらに、SassのSASS記法（SASSが開発されたときの書き方）もあり、微妙～（初心目には）にScssと違うのである
で、Scssが最新の記法で広く普及している

#まとめると（CSS関連）
一連の流れ～～～～

Railsアプリケーションが立ちあがる（Gemfileには必要なプリプロセッサエンジン搭載済み）
↓
CSSを便利なSassのScssをつかって見易く簡潔に記述。ファイル名.scss
↓
来たリクエストに対しSproketsがマニュフェストファイルに従って簡潔なサイトテンプレート用に準備します。.scssならSassがプリプロセス

#参考
https://yukiyuriweb.com/what-are-haml-markdown-slim-jade-sass-scss-less-stylus-coffeescript-livescript-traceur/
https://railstutorial.jp/chapters/filling_in_the_layout?version=5.1#sec-the_asset_pipeline
https://railsguides.jp/asset_pipeline.html#%E3%83%97%E3%83%AA%E3%83%97%E3%83%AD%E3%82%BB%E3%82%B9