RailsがJavaScriptやスタイルシートを読み込む仕組み

【結論】
・Assetとは、javascript/スタイルシート/画像ファイルといった
　 HTML に付随したファイルの総称

・Asset Pipelineとは、Assetを圧縮・連結することで、
　ブラウザ上で読み込める様にする仕組み

・Asset Pipelineの機能は、Sprocketsという
　Rails 3.1 以降で追加された標準ライブラリによって提供されている
　

【目次】

【本題】

JavaScriptやスタイルシートを読み込む仕組み

Railsでは、app/assets/javascriptsディレクトリ以下の
全てのJavaScriptを自動で読み込む様に、設定がされています。

但し、使用したいページ以外でも読み込まれることで、
エラーが生じることが最近多々ありました。

その都度、読み込まれてもエラーが出ない様に記述してきましたが、
コードがDRYで無くなったりと、色々不都合がありました。
なので、使用したいページだけで読み込まれる方法が無いか調べていたのですが、
その中で、こういったファイルを読み込む為の仕組みを学んだので、それをまとめます。

Asset Pipelineとは

まず、javascript/スタイルシート/画像ファイルといった
HTML に付随したファイルは「Asset」と呼ばれています。

そして、そのAssetをブラウザ上で読み込める様にする機能を
「Asset Pipeline」と呼ばれています。

Asset Pipelineは、Rails 3.1 以降で追加された、
Sprocketsというgemによって提供されている機能です。

JavaScriptのコードやスタイルシートといった
アセットを読み込む為に、「Sprockets」というgemが利用されています。

「Asset Pipeline」は、下記の様な流れで、
Assetをブラウザ上で読み込める様にします。

１：コンパイル
js.coffee形式のファイルを.js形式に変換
css.scss形式のファイルを.css形式に変換
↓
２：統合
.js形式のファイルをapplication.jsに集約
.css形式のファイルをapplication.cssに集約
↓
３：圧縮
改行、コメント、空白を取り除く
↓
４：ダイジェスト付与
ファイルに固有の値を付与する。これによって、ファイルを編集しても
全く別のファイルだと認識され、古いキャッシュの適用を防ぐ。

Asset Pipelineの恩恵

Asset Pipelineによって下記の様な恩恵を得られます。

・アセットの連結
Webブラウザが同時に処理できるリクエスト数には限りがあるため、
リクエスト数を減らすことができればその分読み込みが早くなります。
その為、「Asset Pipeline」は、複数のアセットを連結し、一つのファイルとすることで、
ブラウザがWebページをレンダリングするためのリクエスト数を減らすことができます。

・アセットの最小化 (圧縮)
ファイルの最小化は、ホワイトスペースとコメントを削除することによって行われます。

・より高級な言語の使用
Railsでは、Javascript・CSSの代わりにSASS・CoffeeScript・ERBが
利用できますが、これらのコードをプリコンパイルし、アセットとして利用できる状態にしています。

読み込む対象のファイル

Asset Pipelineでは、「rails new」をした際に自動生成された
「application.css」「application.js」の記述内容を元に、
ファイルの読み込みを行います。

「application.css」「application.js」の様な、
どのアセットを読み込むか指定するファイルの事を
「マニフェストファイル」と呼びます。

「application.js」ではデフォルトでは、
下記の様にアセットの読み込みが設定されています。

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

「require　パス名」とすることで、そのファイルを読み込みます。
「require_tree .」については、カレントディレクトリ（assets）内の
全てのファイルを読み込む記述になっています。

必要なjsファイルだけ読み込ませる方法

デフォルトだとカレントディレクトリ内の全てのファイルを読み込んでしまうので、
特定のページだけで読み込む様にしたい場合は、記述を変更する必要があります。

手順は下記の通りです。

１：ツリーの読み込みを停止する
まず、treeで表しているファイル読み込みの記述を消します。

「= require_tree .」の記述を削除する方法もありますが、
「＝」だけ削除して、コメントアウトされた状態にする方が、
後々に修正が必要になった際に便利です。

//= require jquery
//= require jquery_ujs
//= require turbolinks
// require_tree .

２：アセット用の定義ファイルに読み込みたいスタイルシートとJavaScriptのファイルを記述する

個別のスタイルシート/JavaScriptファイルを読み込みたい場合は、
『config/initializers/assets.rb』に下記の記述を追加します。

Rails.application.config.assets.precompile += %w( user.js )

今回は「user.js」ファイルが読み込む記述にしています。

３：ビューにファイルを読み込む記述を追加する

最後に、読み込みを行いたいビューに、下記の記述を追加します。

= javascript_include_tag "user.js"

これにより、上記を記述したビューだけ
「user.js」ファイルが読み込み可能な状態になりました。

所感

このあたりの知識は普段意識しなくとも、問題なくアプリ制作ができるのですが、
後々それがトラブル解決の妨げになることが多々あるので、
気になった内容は掘り下げる事を習慣にしていきたいと考えています。

《今日の学習進捗》

チーム開発：２５日目
ほぼ全ての必須機能が実装できたので、
最終のスプリントレビューに向けて、細部の修正中。
LGTMを通す事を最優先にしてきたので、
細かい所の粗が目立つ・・・
自信を持って紹介できる様に、完成度を高めていきたい。

学習開始からの期間 ：74日
今日までの合計時間：754h
一日あたりの平均学習時間：10.2h
今日までに到達すべき目標時間：676h
目標との解離：78h
「10,000時間」まで、

残り・・・「9246時間！」