• 58
    Like
  • 0
    Comment

Sprockets 4の概要

今年リリースされる予定のRuby on Rails 5.1にはフロントエンド周りに関する多くの変更が予定されていますが、現在ベータ版のSprockets 4にも大きな機能追加と変更が行われています。

Sprockets 4は、以下のような新しい機能を持っています。

  • ソースマップ
  • BabelによるES6 (ECMAScript6/ES2015)のサポート
  • npm管理下のアセットのサポート

本記事はすでにSprocketsについてある程度知っている、Railsなどで使ったことがある読者を対象としています。

アップグレード

以前のバージョンであるSprockets 3.xは、Sprockets 4.xへの橋渡しとなるバージョンで、それ以前のバージョンで使えていた多くの機能が非推奨となっています。これらの機能は4.xでは削除されて使用できなくなっているので、Rails 4.2などでSprockets 2.xを使用している場合は、先にSprockets 3の最新バージョンにアップグレードを行ない、可能ならRails 5.xへアップグレードを行ってください。

新機能

ソースマップ

ソースマップは、連結・コンパイルされたアセットをデバッグするための仕組みのことです。ソースマップという特別なファイルをブラウザに読み込ませることで、元のソースコードを見ながらのデバッグを可能にします。

これまで、連結・コンパイルされたアセットはブラウザでのデバッグが困難なため、development環境では分割された元のソースファイルをViewテンプレート内で読み込むということが行われていましたが、ソースマップによりproduction環境と同様の連結・コンパイルされたアセットを使用することが可能になります。

ソースマップはGoogle ChromeやFirefoxなど各ブラウザで利用可能です。

ソースマップをファイル内で指定するには、ソースコードの最後に特別なコメントを追加します。

JavaScriptの場合は、

//# sourceMappingURL=application.js.map

CSSの場合は、

/*# sourceMappingURL=application.css.map */

のようになっていて、このコメントを元にブラウザが追加のリクエストを行い、ソースマップファイルを取得します。

その他、詳しい内容に関してはrails/sprocketsのガイドを参照してください。

BabelによるES6 (ECMAScript6/ES2015)のサポート

Sprockets 4にはBabelが同梱されるようになりました。
これにより、CoffeeScriptと同じように、ES6をJavaScriptに変換(トランスパイル)することができます。
ES6のサポートを有効にするには、Gemfileで以下のように指定します。

gem 'babel-transpiler'

これにより、拡張子がes6のアセットは、ES6として扱われ、JavaScriptに変換が行われます。

npm管理下のアセットのサポート

npmでパッケージ管理を行っているアセットを読み込んで使用することが可能になりました。
たとえば、node_modulesフォルダ内にnpmのパッケージを管理している場合、
config/application.rbで以下のように、アセットのパスを追加します。

config.assets.paths << Rails.root.join('node_modules')

これにより、各npmパッケージのpackage.jsonのmainとstyleで指定されたパッケージを読み込むことができます。
application.jsやapplication.cssでパッケージを読み込む際には、パッケージのパスだけを使用することができます。

application.js

//= require jquery

application.css

/*
*= require font-awesome
*/

まとめ

Sprockets 4はソースマップ、ES6のサポートを始めとして、よりモダンなフロントエンド開発を可能とする数多くの新機能を含むバージョンとなるようです。Rails 5.1もjQuery依存の廃止、npm(yarn)の導入が予定されていてフロントエンド周りの変更が大きいだけに、今から準備を行っておいたほうがよさそうです。

参考サイト