| javascript_pack_tag |
|---|
| Webpackerでビルドしたスクリプトを読み込むためにはjavascript_pack_tagを使う。 |
【例】 ERBファイルの中で
<%= javascript_pack_tag 'application' %>
とすると、
app/javascript/packs/application.js
が読み込まれる。
Rails 6 でのアセット管理
Asset Pipeline だ。これで JavaScript, CSS, Font など全てを一元管理してくれていた。
Rails 6 で作ったアプリでは JavaScript の管理 をするために Webpacker が搭載されている。
CSS や Font などは引き続き Asset Pipeline を使い続けるのが、Rails 6 の利用想定である。
| app/assets | 開発中アプリに使用するアセットを保管 |
|---|---|
| lib/assets | Railsの開発チームによって作成されたライブラリ用のアセットを保管 |
| vendor/assets | サードパーティ製のアセットを保管 |
| あなたはapp/assetsを使って、Rails開発者さんはlib/assets、その他の人はvendor/assetsを使っていると考えておいてください。 |
アセットの読み込み
layout/application.html.erb
<%# CSS の読み込み。"application" は、エントリーポイントの名前 %>
<%= stylesheet_pack_tag 'application' %>
<%# JS の読み込み。"application" は、エントリーポイントの名前 %>
<%= javascript_pack_tag 'application' %>
マニフェストファイル
Railsでは、Sprocketsというgemを用いると、ブラウザにアセット（CSS/JavaScript）をひとつにまとめて送れます。なぜひとつにまとめるかというと、1個ずつ２ファイルで送るのは非効率だから。「どのようにひとつにまとめるのか」のまとめ方について書かれているのがマニフェストファイルです。
【例】CSS用のマニフェストファイル
[場所]app/assets/stylesheets/application.css
/*
* This is a manifest file that'll automatically include all the stylesheets
* available in this directory and any sub-directories. You're free to add
* application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style
* scope.
*= require_self
*= require_tree .
*/
*= require_self と *= require_tree .がSprockeに利用されます。
media:'all'
メディアタイプを使えるようにしています
'data-turbolinks-track'オプション
Railsから同梱されるようになったturbolinks gemを使用している場合、'data-turbolinks-track'オプションが利用できます。これはアセットが更新されてページに読み込まれたかどうかをturbolinksがチェックします。
Turbolinksとは
画面遷移を高速化させるライブラリです。「rails new」した時点から、標準で組み込まれています。「asset pipeline」というフレームワークの一部です。Turbolinksはあるページから次のページへのアセット要素のURLを追跡し、変更された場合は自動的にフルリロードをします。これがasset pipelineの働きです。
| 2通りハッシュの書き方 | {media: => "all", "data-turbolinks-track" => true} |
|---|