Rails 5.0までのフロントエンド開発環境
前述の通り、Rails 5.0までのフロントエンド環境は主にアセットパイプラインによって提供されています。以下、主なアセットパイプラインの仕組みについて解説します。
- アセットパイプライン関連のgem
- アセットパイプライン関連の設定ファイル
- モードによるアセットパイプラインの動作の違い
アセットパイプライン関連のgem
アセットパイプラインの機能は、Rails本体の機能として付属するsprockets-railsというgemによって提供されています。sprocketsの機能自体は、sprockets-railsに付属するsprocketsというgemが提供します。このあたりの依存関係は、Gemfile.lockファイルを確認すると分かります。
…（中略）…
rails (5.0.0.1)
…（中略）…
sprockets-rails (>= 2.0.0)
…（中略）…
sprockets (3.7.0)
…（中略）…
sprockets-rails (3.2.0)
…（中略）…
sprockets (>= 3.0.0)
…（中略）…
Railsにおいて、sprocketsはデフォルトでONになっています。sprocketsからは以下の3つのgemを利用しています。
- sass-rails
- uglifier
- coffee-rails
Gemfileを確認すると、3つのgemが記述されていることが確認できます。
…（中略）… # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' …（中略）…
Gemfileのコメントを確認すると分かる通り、sass-railsを使うと、SCSS（Sassy CSS）形式でCSSをインデント構文によって記述することができます。具体的には、拡張子が.scssのファイルがapp/assets/stylesheets/以下に設置されている場合、sass-railsによってSCSSで記述されたファイルをCSS形式に変換することができます。
uglifierは、JavaScriptを最小化／圧縮するためのgemです。
coffee-railsは、CoffeeScriptで記述されたファイルをJavaScriptに変換するためのものです。CoffeeScriptは、JavaScriptの記述方法をより短く効率的に記述するためのプログラミング言語です。CoffeeScriptで記述したプログラムは、JavaScriptにコンパイルされます。拡張子が.coffeeのファイルがapp/assets/javascripts/以下に設置されている場合、coffee-railsによってCoffeeScriptのプログラムをJavaScriptに変換できます。
| gem | 役割 |
|---|---|
| sass-rails | SCSSをCSSに変換する |
| uglifier | JavaScriptを1つにまとめて最小化／圧縮する |
| coffee-rails | CoffeeScriptのプログラムをJavaScriptに変換する |
なお、デフォルトでONとなっているアセットパイプラインの機能ですが、OFFにすることもできます。Railsアプリケーションでアセットパイプラインの機能を無効にするには、rails newして新規プロジェクトを作成する際のオプションに--skip-sprocketsを渡します。
$ bin/rails new rails5_sample --skip-sprockets
アセットパイプライン関連の設定ファイル
アセットパイプラインが提供する一連の設定ファイルを確認します。まずapp/assets/javascripts/application.jsを確認しましょう。
+++スクリプト+++ …（中略）… //= require jquery //= require jquery_ujs //= require turbolinks //= require_tree .
この記法はコメントアウトのように見えますが、Sprocketsが定める記法で、//= requireと記述することで対象のライブラリをロードすることができます。jQuery関連のライブラリのロードする定義の後に、Turbolinksの記述があることが確認できます。なお、最後の行の//= require_tree .という記述は、app/assets/javascripts配下に配置された全てのファイルをインクルード対象とする意味です。
次にアセットの記述をするマニフェストファイルを確認します。Rails 4までは、新しいアセットを追加する場合は以下のようにconfig/initializers/assets.rbに対象のファイルを追加する必要がありました。rails5_sampleプロジェクトではデフォルトのままなのでサンプルコードがコメントアウトされていますが、このサンプルではsearch.jsというファイルを追加する場合に、このコメントアウトを外すことで対応していました。
…（中略）… # Rails.application.config.assets.precompile += %w( search.js ) …（中略）…
Rails 5.0から利用されているSprockets 3から、manifest.jsというマニフェストファイルが導入されています。ただし、Sprockets 3まではファイルが用意されているのみで、プリコンパイル対象とはなっていません。そのため、マニフェストファイルを使う場合は明示的に指定する必要があります。
…（中略）… Rails.application.config.assets.precompile += %w( manifest.js ) …（中略）…
このように指定すると、追加したいアセットをconfig/initializers/assets.rbに指定せず、マニフェストファイルに//= linkの形式（sprocketsライクな記述）でアセットを指定できます。デフォルトで用意されるマニフェストファイルを確認するとapp/assets/javascriptsに存在する全てのJavaScriptファイルとapp/assets/stylesheetsに存在する全てのCSSファイルが自動的に読み込まれる設定となっています。
//= link_tree ../images //= link_directory ../javascripts .js //= link_directory ../stylesheets .css
モードによるアセットパイプラインの動作の違い
Railsには、動作環境によるモードの違いがあります。Railsのモードにはデフォルトで以下の種類があります。
| モードの種類 | 想定される主な用途 |
|---|---|
| development | 開発時の動作環境 |
| test | 開発時にテストコード（※注1）を実行する際の動作環境 |
| production | 開発が完了したものを動かす本番環境 |
テストコードとは
※注1：テストコードとは、Webアプリケーションで実現したい価値を提供するために記述したソースコードを対象として、動作テストを自動化するために記述するコードのことです。Railsでは高速に開発する仕組みをサポートするために、デフォルトでMinitestというテスティングフレームワークが付属しています。その他に有名なテスティングフレームワークにはRpecがあります。
モードにより、それぞれの設定ファイルが存在します。既に確認したデータベースの接続設定が記述されているconfig/database.ymlがその代表例です。その他にも、アセットパイプラインの動作やその他の設定が記述されているファイルがあります。config/environments配下に「モード名.rb」という命名ルールがデフォルトで用意されています。
- config/environments/development.rb
- config/environments/test.rb
- config/environments/production.rb
アセットパイプラインに関する設定は、developmentモードとproductionモードで大きく異なります。これは、開発時に高速な動作を犠牲にしてでもすぐに反映させたい場合や、アセット回りのデバッグのしやすさを優先したい一方で、本番動作時は高速化のためにアセットをまとめたい等、求められる要件が異なるからです。
developmentモードではアセットパイプラインに関するデフォルト設定が以下のように記述されています。
…（中略）… config.assets.debug = true …（中略）… config.assets.quiet = true …（中略）…
config.assets.debugがtrueに設定されると、個別のアセットを動的に結合せず、元のソースを維持したままコンパイルします。config.assets.quietはログにアセット回りの出力をするかしないかの設定です。trueの場合、アセット回りのアクセスがログに出力されなくなります。
次に、productionモードのアセット回りの設定を確認します。
…（中略）… config.assets.js_compressor = :uglifier …（中略）… config.assets.compile = false …（中略）…
config.assets.js_compressorはアセットを圧縮する際に使用するアダプターを指定しています。デフォルトでは、Gemfileに記述されているuglifierが指定されています。config.assets.compileはプリコンパイルを動的に行うかの設定です。デフォルトではfalseなので、前述の通りプリコンパイルコマンドを以下の通り実行する必要があります。
$ RAILS_ENV=production bin/rails assets:precompile
productionモードで実行するために、環境変数RAILS_ENVを明示的に指定します。なお、Railsの場合、デフォルトではRAILS_ENV=developmentで動作します。
