【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" ・・・ ※上手くキャッシュ破棄されないことがあるらしい。

10

まとめ

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

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