Railsで生産性を高めてくれる「Asset Pipeline（アセットパイプライン）」を理解する｜【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会第４回

【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会第４回
Ticklecode
Yoshinori Kobayashi 1
Railsで生産性を高めてくれる
「Asset Pipeline（アセットパイプライン）」
を理解する。

2
生まれは奈良県です
小林由憲（こばやしよしのり）
Twitter: @AsbyuKobayashi
ブログ: In Advance Only

・<link>、<script src=”...”>タグの通信コストが大きい
3
フロント（クライアント）側での問題点
・CSS、JavaScriptのデータサイズが肥大化
・CSS、JavaScript、HTMLを直接コーディングしにくい、生産性が悪い
・変更時にブラウザキャッシュがクリアされないため、トラブルが起こる
フレームワークで自動化することで負荷を軽減したい
Asset Pipeline

4
Asset Pipeline（アセットパイプライン）とは
Asset（アセット）
Pipeline（パイプライン）
有用なもの・貴重なものの意
Railsでは、JavaScript・CSS・画像ファイル・ERBなどを示す。
ルート、補給線の意
Railsでは、効率的な方法を提供するための一連の作業

5
①コンパ
イル
②統合 ③圧縮
④ダイジ
ェスト付
与
Asset Pipelineの流れ
コーディン
グ
ブラウジン
グ
Exp.CSS の場合
common.css.scss
buttons.css.scss
responsive.css.scss
common.css
buttons.css
responsive.css
application
.css
application
.css
※空白、改
行の除去
application-
39737udj....css① ③② ④
コーディングしやすい状態から、閲覧時は通信コストが効率化
できるように最適化される。

6
①コンパイル
デフォルトでサポートされている言語は、CSSに代わるSASS、
JavaScriptに代わるCoffeeScript、ERB。
【変換前】 ⇒ 【変換後】
common.css.scss ⇒ common.css
foobar.js.erb.coffee ⇒ foobar.js.erb ⇒ foobar.js
従来のCSS、JavaScriptでは記述が難しく、効率が悪い。
効率的に記述できる、Sass、CoffeeScriptなどの高級言語を使用。
これら高級言語は、らネイティブ言語への変換が必要。
【変換前 Sass】
// Regulation Margin
@for $i from 1 through 10{
$nm:$i * 5;
.mb#{$nm}{
margin-bottom:$nm * 1px !important;
}
}
【変換後 CSS】
.mb5 {
margin-bottom: 5px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
：

7
②統合
１つのファイルにまとめて、通信回数を減らす。
<link>タグの通信コストが大きいため、記述回数を減らす。
【統合前】
common.css
buttons.css
responsive.css
【統合後】
application.css
【統合前】
<link href="common.css" rel="stylesheet" type="text/css">
<link href="buttons.css" rel="stylesheet" type="text/css">
<link href="responsive.css" rel="stylesheet" type="text/css">
【統合後】
<link href="application.css" rel="stylesheet" type="text/css">

8
③圧縮
改行、空行、コメントを取り除いて、サイズを縮小する。
【圧縮前】
$(window).load(function(){
// スライドイメージを表示
$('.bxslider img').css("visibility","visible");
// スライダーの開始とオプション
$('.bxslider').bxSlider({
auto: true,
captions:true
});
});
【圧縮後】
$(window).load(function(){$(".bxslider
img").css("visibility","visible"),$(".bxslider").bxSlider({auto:!0,captions:!0})});

9
④ダイジェスト付与
一度、レンダリング（表示処理）された、CSS・JavaScriptはWeb
ブラウザでキャッシュ（一時保存）される。
アセットを修正後は、Webブラウザで修正後を表示さたいために、
キャッシュを確実に破棄させる仕組みが必要。
ファイル名にダイジェストを付加するという方法。
<script src="/js/application-
908e25f4bf641868d8683022a5b62f54.js" ・・・
Rails3.1以前の仕組み
<script src="/js/application.js?1309495796" ・・・
※上手くキャッシュ破棄されないことがあるらしい。

11
個人的な感想
・フロントツール（Grant、Gulp）よりスッキリしていて統
一感がある。
・Sass、CoffeeScriptのコーディングに集中できて、「あと
はよろしく！」やってくれるイメージ。
・development環境・production環境の違いなどの理解がも
っと必要。

アセットパイプライン | Rails日本語ドキュメント | Ruby STUDIO
http://ruby.studio-kingdom.com/rails/guides/asset_pipeline
http://railsguides.jp/asset_pipeline.html
アセットパイプライン — Rails ガイド
12
Ruby on Rails 4 アプリケーションプログラミング
著者：山田祥寛
参考情報
http://railsguides.jp/asset_pipeline.html
5.2 SassとAsset Pipeline ― Rails チュートリアル

13
ご清聴ありがとうございました。

Railsで生産性を高めてくれる「Asset Pipeline（アセットパイプライン）」を理解する｜【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会第４回

Recommended

Recommended

More Related Content

More from Yoshinori Kobayashi

More from Yoshinori Kobayashi (19)

Recently uploaded

Recently uploaded (8)