Rails6からWebpackの使用がデフォルトとなりました。
Webpackを導入すると、メインとなる application.html.erb に次のようなタグが追加されています。
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>この２つの、javascript_pack_tag 'application'やstylesheet_link_tag 'application'の意味や、引数で指定している、'data-turbolinks-track': 'reload'やmedia: 'all'の意味について解説しています。
<%= >とは？
はじめに、<%= >についてです。ご存知の方は飛ばしてください。
<%= 処理 >は、拡張子.erbというファイルの中で使う表記です。rubyの処理内容をHTMLとして出力します。
例えば、<%= p "hello" %> とすれば、helloという文字列をブラウザに表示します。
erbというのは、Embedded Ruby の略で、HTMLの中にRubyを埋め込む（embedする）技術です。つまり、HTMLとRubyの処理を合わせて記述できるファイルが拡張子、.erbです。
erbはeRubyとも呼びます。どのように処理したいかによって<%= >以外にも書き方があります。
| 記述 | 内容 |
|---|---|
| <% 処理 %> | 処理のみ。出力しない |
| <%= 処理 %> | 処理結果を出力する |
| <%== 処理 %> | 処理結果をエスケープしないで出力する。 |
| <%# コメント %> | コメントアウト |
| <% 処理 -%> | 後ろの改行を取り除く |
| <%- 処理 %> | 行頭までの空白を削除 |
javascript_pack_tag
基本的な使い方
javascript_pack_tagの一番基本的な使い方は、JavaScriptのファイルパスのみ指定する方法です。
<%= javascript_pack_tag 'ファイルパス' %>- 指定するのはapp/javascript/packs配下のJavaScriptファイル。（変更可能）
- 拡張子 .js は不要。
例１ application
<%= javascript_pack_tag 'application' %>
デフォルトで表示される、applicationを指定している場合は、
app/javascript/packs/application.js を開きます。
※正確には、app/javascript/packs/application.jsをコンパイルしたファイル（例: public/packs/js/application-14139e3a84530853743f.js）。
例2 application
<%= javascript_pack_tag 'article/show' %>
article/showを指定している場合は、
app/javascript/packs/article/show.js を開きます。
引数を渡す
javascript_pack_tagは呼び出すファイルの指定の他に、カンマで区切って引数を渡すことができます。
この引数が、HTMLタグの属性名と値になります。
<%= javascript_pack_tag 'ファイルパス', 属性名: '値' %>例１ id名の指定
<%= javascript_pack_tag 'application', id: 'test' %>id: 'test' を指定すれば、ブラウザに表示されるHTMLタグに、id="test" が入ります。
▼ブラウザに表示されるソースコード
<script src="/packs/js/application-3a3df6d6fdd87a73d6a1.js" id="test"></script>例2 複数指定する（id, class, data属性）
<%= javascript_packs_with_chunks_tag 'main', id: 'top', class: 'wrapper', 'data-test': 'active' %>id: 'top', class: 'wrapper', 'data-test': 'active' を指定すれば、ブラウザに表示されるHTMLタグに、id="top" class="wrapper" data-test="active" が入ります。
▼ブラウザに表示されるソースコード
<script src="/packs/js/application-3a3df6d6fdd87a73d6a1.js" id="top" class="wrapper" data-test="active"></script>data属性のように、複数の単語を繋ぐときはハイフンを使って指定します。（class属性の命名規則）
その際は、属性名をクオテーションで囲みます。（ハイフンで繋がない場合はクオテーションは不要です）
‘data-turbolinks-track’: ‘reload’とは？
属性と値への変換
デフォルトでjavascript_pack_tagに記載されている’data-turbolinks-track’: ‘reload’の意味についてです。
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
カンマ以降は属性と値になるので変換後は、scriptタグの中にdata-turbolinks-trackt="reload"が入ります。
<script src="/packs/js/application-xxxx.js" data-turbolinks-trackt="reload"></script>何をしているか？
そもそも、data-turbolinks-trackt、Turolinksというライブラリ（gem）の動作を指定するために記述しています。
Turbolinks（ターボリンクス）とは？画面遷移を非同期通信（ajax）で行うことでページ表示を高速化する機能です。
Rails newをしたときに自動で組み込まれているデフォルトの機能です。
data-turbolinks-trackt="reload" を指定することで、ファイルが変更された場合は、フィル全体をリロードする設定にします。
Turbolinksはページの一部に変更があったときは変更点のみ読み込むので高速になります。
一方で、JSやCSSなどの外部ファイルの中身に変更があると、ページがリロードされないため変更内容が反映されず、ページがうまく表示できなくなります。これを防ぐために全体をリロードする指定にしています。
stylesheet_link_tag
stylesheet_link_tagの使い方は基本的に、javascript_pack_tagと同じです。
変更点は読み込みの対象となるファイルのパスが異なることです。
基本的な使い方
<%= stylesheet_link_tag 'ファイルパス' %>- 指定するのはapp/assets/stylesheets配下のscss, cssファイル。（変更可能）
- SASSファイルも読み込み可能
- 拡張子 .scss や .css は不要。
- 変換後は、linkタグに rel=”stylesheet” 属性がつき、href属性で対象のファイルを指定したタグが生成されます。
例 application
<%= stylesheet_pack_tag 'application' %>デフォルトで指定しているapplicationの場合、app/assets/stylesheets/application.css ファイルを読み込んでいます。
※正確には、app/assets/stylesheets/application.cssをコンパイルしたファイル（public/assets/application-xxx.css）を読み込んでいます。
▼ブラウザのソースコード例
<link rel="stylesheet" href="/assets/application.debug-710debf94b8a30762351f20d1483de3e170462f2ff67ab7e1a41ae38854ac480.css">引数を渡す
stylesheet_pack_tagは呼び出すファイルの指定の他に、カンマで区切って引数を渡すことができます。
この引数が、HTMLタグの属性名と値になります。
<%= stylesheet_pack_tag 'ファイルパス', 属性名: '値' %>例 type属性の指定
<%= stylesheet_pack_tag 'application', type: 'text/css' %>type: 'text/css' を指定すれば、ブラウザに表示されるHTMLタグに、type="text/css" が入ります。
▼ブラウザに表示されるソースコードの例
<link rel="stylesheet" href="/assets/application.debug-e9b5eb0d339803c727b547b6ab3342955f6d7df3d60c4039dd4223c7443712bf.css" type="text/css">media: ‘all’ とは？
デフォルトで生成された、stylesheet_pack_tagに記載されている media: ‘all’ は、linkタグの中に media="all" を記載する処理になります。
media属性は、外部リソースを適用するメディアやデバイスを指定するものです。主には画面幅によって指定します。
適用する画面幅を指定してレスポンシブに使うこともできます。allは全てのメディア（全ての画面幅）であることを示しています。
主なmedia属性の値と内容
| 値 | 内容 |
|---|---|
| all | 全てのデバイス。（デフォルト） |
| screen | スクリーン全般。PCやディスプレイなど |
| プリント用デバイス | |
| handheld | 携帯用デバイス |
画面幅の指定
適用する画面幅を指定する場合は、以下のメディア特性の部分で、min-widthやmax-widthを指定します。
<link rel="stylesheet" href="読み込むファイルのパス" media="メディアタイプ and (メディア特性)">
▼600px以下の場合のみCSSを適用する。
<%= stylesheet_pack_tag 'application', media: 'screen and (max-width: 600px)' %>
▼340px以上の場合のみCSSを適用する。
<%= stylesheet_pack_tag 'application', media: 'screen and (min-width: 340px)' %>
▼340px~600pxの場合のみCSSを適用する。
<%= stylesheet_pack_tag 'application', media: 'screen and (min-width: 340px) and (max-width: 600px)' %>‘data-turbolinks-track’: ‘reload’とは？
属性と値への変換
デフォルトでstylesheet_pack_tagに記載されている’data-turbolinks-track’: ‘reload’の意味についてです。
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
カンマ以降は属性と値になるので変換後は、linkタグの中にdata-turbolinks-trackt="reload"が入ります。
<link rel="stylesheet" href="/assets/application.xxxxxx.css" data-turbolinks-track="reload">何をしているか？
そもそも、data-turbolinks-trackt、Turolinksというライブラリ（gem）の動作を指定するために記述しています。
Turbolinks（ターボリンクス）とは？画面遷移を非同期通信（ajax）で行うことでページ表示を高速化する機能です。
Rails newをしたときに自動で組み込まれているデフォルトの機能です。
data-turbolinks-trackt="reload" を指定することで、ファイルが変更された場合は、フィル全体をリロードする設定にします。
Turbolinksはページの一部に変更があったときは変更点のみ読み込むので高速になります。
一方で、JSやCSSなどの外部ファイルの中身に変更があると、ページがリロードされないため変更内容が反映されず、ページがうまく表示できなくなります。これを防ぐために全体をリロードする指定にしています。
