5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

本番環境に合わせたアセットパイプライン

Last updated at Posted at 2019-07-27

##アセットパイプラインとは

JavaScriptやCSSのアセットを最小化 (minify: スペースや改行を詰めるなど) または圧縮して連結するためのフレームワークです。
Railsガイドより

 Railsではassets/以下にそれぞれimageやjavascript, stylesheetsのフォルダが分けられている。(以下javascriptを例に)
 しかし開発環境だと、javascript/application.js、stylesheets/application.cssこの一つのファイルにまとめて記述をすれば、規模が大きくなるほどどのviewに対しての記述があるのかが分からない。また一つのファイルにまとめて記述すれば、変数名が重複してしまう。
 そのためassets/javascript/users, assets/javascript/notes/などフォルダごとに分けられているのが好ましい。最終的にはこのフォルダごとに分けられたjavascriptのファイルを、最終的に一つのファイルにまとめてviewを表示する(コンパイル)。この仕組みを アセットパイプライン という。

##本番環境では
 しかし本番環境(heroku, AWSなど)にデプロイすると処理速度に対する影響を防ぐために
自動でコンパイルが行われない。なので
①自動でコンパイルを行うよう設定を変える
②アセットプリコンパイル(あらかじめコンパイルするファイルを指定する)を行う
どちらか2つの方法を設定する必要がある。

##①の方法

config/production.rb
config.assets.compile = true #=> falseをtrueに

##②の方法

assets/javascripts/application.jsで

//= require jquery_ujs
// require_tree . => '='を削除
//= require common

まずはこれでjavascripts/以下のjsファイルを読み込めなくする。
##なぜ?
= require_tree.の状態だと、フォルダごとに分けていたjsファイルをapplication.jsにまとめて記述するので、変数名が重複してしまうから。

##続いて
assets/javascripts/users/form.jsを作成したとする。
そして、そのform.jsを適用したいviewファイルに以下の追記をする。

views/users/form.html.slim

~ここにviewのコードが入る~

= javascript_include_tag 'users/form' <= form.jsを適用するよう指定する。

そしていざ、本番環境で実装する際にあらかじめjsファイルをコンパイルするよう指定する(プリコンパイル)。

config/initializers/assets.rb

Rails.application.config.assets.precompile += %w(users/form.js)

以上!

##参考
Railsガイド

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?