0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

#アセットパイプラインとは
JavaScript、CSS、画像などのリソース(アセット)を効率的に扱うための仕組み。

次に示すパイプライン処理を行うことで、実行速度を早めている。

1.高級言語のコンパイル
CoffeeScript SCSS,ERB,Slimなどで記述されたコードをコンパイルして、**ブラウザが認識できる(これが重要)**JavaScript,CSSファイルとして扱えるようにする

2.アセットの連結
複数のJavaScript,CSSファイルを一つのファイルに連結することで読み込みに必要なリクエストを減らして、読み込みを高速化させる。

3.アセットの最小化
スペース、改行、コメントを削除してファイルを最小化させ、通信量を節約する。

4.ダイジェストの付与
コードの内容からハッシュ値を算出しファイル名の末尾に付与する。これによりコードが変更されればファイル名が変更されるため、ブラウザのキャッシュの影響で修正が反映されないという問題を防げる。

参照:アセットパイプラインについて

#環境による挙動の違い
アセットパイプラインはdevelopment環境とproduction環境では、それぞれの目的に対して便利にするために挙動が異なる。

参照:本番環境に合わせたアセットパイプライン

#ブラウザにアセットを読み込ませる
CSSやJavaScriptなどのアセットは、Web画面にアクセスしたブラウザが、サーバーから返されたHTML内にあるscriptタグ、linkタグなどのリンク情報を読み取ることによって読み込まれ、利用できるようになる。

ビュー全体にアセットを適用させたいのであれば、共通のビューであるapplication.html(.slim)でアセットを読み込ませる。

app/views/layouts/application.html.slim
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

stylesheet_link_tagjavascript_include_tagはヘルパーメソッドで'application'は読み込ませたいアセットファイル(拡張子のhtml.slimは省略されている)。

#マニフェストファイル
ファイルをどのように連結させたいかを記述するファイルが「マニフェストファイル」
application.cssapplication.jsがそれにあたる。

JavaScriptの例)

app/assets/javascript/application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require _tree .

//=で始まる行を、アセットパイプラインに指示を伝えるための特別な行として扱っている。
requireは指定したJavaScriptファイルの内容を記述した位置に取り込んでいる。
require_treeは指定されたディレクトリ配下の全ファイルの内容を結合し、記述した位置に取り込んでいる。
例では.を指定しているので、application.jsが配置されているディレクトリ配下が対象となる。

ここで、rails-ujsなどのJavaScriptファイルはアセットの「探索パス」をもとにSprocketsが引き当てている。(探索パスは後述)

CSSの例)

app/assets/stylesheet/application.scss
@import "bootstrap";

ここではSassの@importを利用して記述している。

#アセットの探索パス
探索パスにはデフォルトでapp/assets/*,lib/assets/*,vender/assets/*sprockets-railsによって設定されている。

参照:Sprocketsの仕組み

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?