Help us understand the problem. What is going on with this article?

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

まずアセット(asset)とは

JavaScriptコードやスタイルシート、画像などアプリで扱うソース一式の総称

アセットパイプラインとは

自分達が書いたCSSやJavaScript、画像などのリソース(asset)を効率的に扱うための仕組み。
sprockets-railsというgemにて提供されているSprockets機能を使い、ブラウザが読み取れる形式で、実行速度が速く、ブラウザキャッシュ(データを取り出しやすい状態にしておくこと)に対して最適化すること。

アセットパイプラインの処理の流れ

1. 高級言語のコンパイル

CoffeeScript(JavaScriptコードを書くのが楽になる高級言語)、SCSS(cssを書くのが楽になるsassの記法の一つ。)、ERB、Slim(ERBよりスッキリした記述のテンプレートエンジン)等で記述されたコードをコンパイルして、ブラウザが認識できるJavaScript、CSSファイルにする。

2. アセットの連結

複数のJavaScript、CSSファイルを一つのファイル(application.jsやapplication.css)に連結することで、読み込みに必要となるリクエスト数を減らし、読み込みの時間を短縮する。

3. アセットの最小化

スペーズ、改行、コメントを削除して、ファイルを最小化し、通信量を節約する。

4. ダイジェストの付与

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

Railsでcssとjavascriptを読み込ませる

Railsで読み込む方法としてヘルパーメソッド(stylesheet_link_tag, javascript_include_tag)を使う。

= stylesheet_link_tag 'application', media: 'all', 'data-turbolink': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

マニフェストファイルを作成し、各ファイルを連結する

マニフェストファイルとは読み込みたいアセットのリスト一覧のこと。具体的にどのソースコード同士を連結するのかをマニフェストファイルにあらかじめ記述しておくしておく必要がある。
Railsにはデフォルトで下記のマニフェストが用意されています。

・/app/assets/javascripts/applications.js
・/app/assets/stylesheets/applications.css

マニフェストを定義する

Sprocketsを利用するにはまずマニフェストを記述しておく必要がある。マニフェストファイルに連結したいファイルを記述する。

applications.js
//= require jquery
//= require_tree.
applications.css
/*
*= require_tree
*= require responsive.css
*/

マニフェストの定義はそれぞれコメントの配下にJavaScriptは「//= require」、
cssは「/* *= require */」の形式で表す。
・require... 指定したファイルを記述した位置に取り込む。
・require_tree... 指定されたディレクトリ配下の全ファイルの内容を統合し、記述した位置に取り込む。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした