けい
概要
RailsでJavascriptやCSSのファイルがどのように読み込まれるのか解説していきます。またRails 5と Rails 6での読み込み方の違いについても解説していきます。
用語の解説（アセットとマニフェスト）
RailsでJavascriptやCSSのファイルがどのように読み込まれるのか知るために、まずは必要な用語について解説します。
アセットとは？
『アセット』とは、JavascriptやCSS、画像データをまとめたものを指します。
Railsで用意されている『Sprocket（スプロケット）』というライブラリが、アセットを読み込むことでJavascriptが動いたり、画像が読み込まれます。
マニフェストとは？
Sprocketがデフォルトで読み込むファイル（下記2つのファイル）を『マニフェスト』と呼びます。
- /app / assets / javascripts / application.js
- /app / assets / stylesheets / application.js
＊1 Javascript / CSSのバンドル（まとめる）はSprocketを使用
＊2 画像は / app /assets /imagesに格納
この2つのファイルの中身に基づいて、Sprocketはアセットを読み込んでくれます。またSprocketはassetsフォルダ配下のJavascriptとCSSファイルを1つにまとめたもの＆assets / images配下の画像を / publicフォルダ配下にコピーします。
Railsでアセットファイルを読み込む方法 (Javascript編)
Rails 6ではマニフェストファイルの場所やアセットファイルの取り扱いがSprocketからWebpackerに切り替わっています。特にJavascriptを読み込む方法やマニフェストの書き方は、Rails5とRails6で大きく違うので注意です！
Rails5でJSファイルを読み込む書き方
Rails5の場合、application.jsに読み込みたいJSファイルを下記のように記述します。
- JavascriptのバンドルはSprocketが行います。
- そのためSprocketがJSファイルを読み込む書き方（//= require）を使います。
■ /app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .Rails6でJSファイルを読み込む書き方
Rails6の場合、application.jsに読み込みたいJSファイルを下記のように記述します。
- JavascriptのバンドルはWebpackerが行います。
- そのためWebpackerがJSファイルを読み込むための書き方「import」や「= require」を使います。
■ /app/javascripts/packs/application.js
[ importで読み込むパターン ]
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
// rails-ujsの読み込み
import Rails from "@rails/ujs"
// turbolinksの読み込み
import Turbolinks from "turbolinks"
// activestorageの読み込み
import * as ActiveStorage from "@rails/activestorage"
// actioncableの読み込み
import "channels"
// 上で読み込んだものを起動
Rails.start()
Turbolinks.start()
ActiveStorage.start()
[ requireで読み込むパターン ]
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")Railsでアセットファイルを読み込む方法 (CSS編)
CSSファイルのバンドルはSprocketが行います。そのためSprocketがCSSファイルを読み込む書き方（//= require）を使います。
- 「=require_tree .」は/ app / assets / stylesheets以下のスタイルシートフォルダを読み込むという意味になります。
- 「=require_self」は自分自身(application.css)を読み込むという意味になります。
*= require_tree .
*= require_selfViewファイルでjavascriptとCSSを読み込む方法
ViewファイルでJavascriptファイルやCSSファイルを読み込む場合は、基本的にapplication.html.erbで下記のように記載します。
■ app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
# application.cssを読み込む
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
# application.jsを読み込む
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>Javascriptファイルを読み込む方法
■ / app /assets / javascripts / packs / ファイル名.jsの場合
/ app /assets / javascriptsフォルダ配下にJavascriptファイルを置いた場合、Webpackerによりバンドルされます。この場合は下記のように記載する必要があります。
<%= javascript_pack_tag 'ファイル名' %>
# 上記タグはHTMLの形に変換される
=> <script src="XXXX"></script>
■ / app / assets / javascripts / ファイル名.jsの場合
/ app / assets / javascriptsフォルダにjavascriptファイルを置いた場合、Sprocketによりバンドルされます。この場合は下記のように記載する必要があります。
<%= javascript_include_tag 'ファイル名' %>
# 上記タグはHTMLの形に変換される
=> <script src="XXXX"></script>CSSファイルを読み込む方法
■ /app / assets / stylesheets / ファイル名.cssの場合 (Rails5)
CSSのフォルダは/app / assets / stylesheets配下に置いた場合、Sprocketによりバンドルされることになります。この場合は下記のように記載する必要があります。
<%= stylesheet_link_tag 'ファイル名' %>
# 上記タグはHTMLの形に変換される
=> <link rel="stylesheet" href="XXX">
■ / app / assets / javascripts / ファイル名.cssの場合 (Rails6)
/ app / assets / javascriptsフォルダ配下にCSSファイルを置いた場合、Webpackerによりバンドルされます。この場合は下記のように記載する必要があります。
<%= stylesheet_pack_tag 'ファイル名' %>
# 上記タグはHTMLの形に変換される
=> <link rel="stylesheet" href="XXX">
解説は以上です！
