アセットとは？
アプリを構成する3点セット(画像、CSS、JavaScript)の総称です。
Sprockets
Railsで、スタイルシートとJavaScriptを管理するための仕組みで、出力するHTMLへ自動で「マニフェストファイル」に定義した共通のCSS、JavaScriptを埋め込んでくれます。
CSSの拡張仕様である「SCSS」や、JavaScriptをRubyのように記述できる「CoffeeScript」へ変換する仕組みをとりまとめたものです。
Rails6からはwebpackが採用されている。
なお、Sprocketsが採用されているのはRails5までで2019年11月にリリースされたRails6からはSprocketsではなくデフォルトでwebpackによるビルドをする方式になっておりますので注意しましょう。
マニフェストファイル
Railsではアセットパイプラインの中で読み込み時間を減らすためにCSSやJSを連結していますがこれはマニフェストファイルを記述することによって行うことが可能です。マニフェストファイルは特定の記述方法（ディレクティブ）で取り込むソースコードを指定しています。アセットパイプラインについては下記の記事でも解説しています。
(Railsアプリ名)/app/assets/stylesheets/application.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require_tree . *= require_self */ |
「*= require…」と記述してある定義に沿って、ファイルを読み込みます。
| requireの種類 | 説明 |
|---|---|
| require_tree | application.cssがあるフォルダ下の全てのファイル |
| require_self | 自分自身（application.css） |
(Railsアプリ名)/app/assets/javascripts/application.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require rails-ujs //= require activestorage //= require turbolinks //= require_tree . |
| requireの種類 | 説明 |
|---|---|
| require rails-ujs | Railsが提供するJavaScriptヘルパー |
| require activestorage | ファイルアップロードの仕組みを提供してくれます。 |
| require turbolinks | ページ遷移をAjax化して高速に読み込むための仕組み |
| require_tree . | application.js(.のことです。)があるフォルダ下の全てのファイル |
//=
アセットパイプラインに指示を伝えるための特殊記号です。
require
指定したJavaScriptファイル内容を指定した位置に取り込みます。
Webpackerとは？
Rails5.1より追加されておりJavaScriptビルドツールの「Webpack」のラッパーでRailsでWebpackを使ってのJavaScript管理を楽にしてくれるGemです。なお、Webpackerはパッケージ管理にYarnを採用しているためYarnのインストールが必須になります。
Sprocketsとの違い
JavaScript管理を楽にしてくれる仕組みとして「Sprockets」によるアセットパイプラインの仕組みがありました。ただ、WebpackerはSprocketsに比べて下記の点で優れています。
- ES2015以降で記述したJavaScriptを様々なブラウザで利用できる。（トランスコンパイル）
- JavaScriptのビルドプロセスをより柔軟に行える。
役割としては同じなのでSprocketsとWebpackerのどちらを使うかは都度選択するようにしましょう。（併用はお勧めしません。）
Webpackerを導入するデメリット
基本的にはWebpackerがwebpackのラッパーであることで発生するデメリットであり導入判断時は考慮をする必要があります。
- Webpackerが提供する機能では不十分だった場合に、Webpackを直接使う場合では学習することが不要になる「Webpackerが提供する専用API」を学ばなければならなくなる。
- Webpackerが提供する不必要な機能のアップデートの影響でアプリに不具合が発生する可能性がある。
Webpackerの機能
- WebpackコマンドをRakeタスクでラップして提供する。
- BabelによるES2015コードのトランスコンパイル
- React/Vue.js/Angularのサポート
- Railsビューヘルパーの提供
導入
webpackerを導入した場合下記のファイルがポイントになります。（導入方法自体は色々ありますし、Rails6ではwebpackerがデフォルト実装になるので割愛させていただきます。）
エントリポイント
|
1 |
app/javascript/packs/application.js |
上記ディレクトリがエントリポイントとなりコンパイルを開始するファイルのことです。(Sprocketsのマニフェストファイルに似ています。）
エントリポイントからimportしたい別のJavaScriptファイルがある場合
app/javascript配下に配置します。
ビューから読み込むには
ビューからコンパイルしたJavaScriptファイルを読み込む場合は「javascript_pack_tag」ビューヘルパーを使用します。
環境別のコンパイル
環境設定
下記ファイルにて環境別のどのようにコンパイルするかの設定を決めます。
|
1 |
config/webpacker.yml |
開発環境
Webpacker管理下のファイルに更新があればRailsサーバへのリクエスト時に自動コンパイルが行われます。
本番環境
webpacker:compileというRakeタスクにて行います。
この記事へのコメントはありません。