Zenn
👻

【Rails】マニフェストファイルの読み込みについて

2023/05/10に公開
Rails
tech

はじめに

「app/assets/javascripts/application.js」
「app/assets/javascripts/application.css」
の読み込みについて、いまいち理解が足りていないと思ったため整理。

アセットパイプライン

JavaScript、CSS、画像などのリソース(アセット)を効率的に扱うための仕組み。
「sprockets-rails gem」にて提供されるSprocketsの機能で、デフォルトで有効になっている。
アセットパイプラインの処理内容として「高級言語のコンパイル」「アセットの連結」「アセットの最小化」「ダイジェストの付与」がある。

マニフェストファイル

アセットパイプラインのアセットの結合で、ファイルをどんなふうに結合して出力するかを記述するためのファイル。Railsでは新規にアプリケーションを作成した時点で、JavaScript、CSSのそれぞれについて
「app/assets/javascripts/application.js」「app/assets/javascripts/application.css」
が生成される。

マニフェストファイルの記述方法

app/assets/javascripts/application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

のようにJavaScriptのマニフェストファイルでは、「//=」で始まる行を、アセットパイプラインに指示を伝えるための特別な行として扱う。
1.「require」は、指定したJavaScriptファイルの内容を、記述した位置に取り込む。上記の場合だと「rails-ujs」「activestorage」「turbolinks」といったJavaScriptを指定している。拡張子は省略できるため省略している。
2.「require_tree」は、指定されたディレクトリ配下の全ファイルの内容を結合し、記述した位置に取り込む。上記のように「.」を指定している場合は、「application.js」が配置されているディレクトリ配下が対象になる。

JavaScriptの読み込み

Railsでは新規にアプリケーションを作成した時点で、「app/veiws/layouts/application.html.erb」のheadタグ内に「app/assets/javascripts/application.js」を読み込む記述がされている。

app/veiws/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>
  </head>

  <body>
  </body>
</html>

のように「<%= javascript_include_tag 'application' %>」の部分で「app/veiws/layouts/application.html.erb」を読み込む指示を出している。
管理画面のような個別のjavascriptを読み込ませたいときなどは、管理画面専用の「app/veiws/admin/layouts/application.html.erb」と「app/assets/javascripts/admin.js」などを作って、管理画面でのみ使うファイルを指定する。

app/veiws/admin/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'admin' %>
  </head>

  <body>
  </body>
</html>

のように「<%= javascript_include_tag 'admin' %>」部分で「app/assets/javascripts/admin.js」を指定している。
ただこのままだと管理画面でのみ適用したい「app/assets/javascripts/admin.js」が、「app/assets/javascripts/application.js」の「//= require_tree .」によって他のレイアウトにも影響を与えてしまうので「//= require_tree .」を削除しておく必要がある。

Discussion