文系学生のプログラミング入門

ウェブプログラミングがメインです

(Rails)Sprocketsってなに?

Sprockets、なんでしょうね。Railsを使う時のCSSとかJSを何かするときの何かですね。 パーフェクトRuby on Railsの第3章で真っ先に解説されているので、そちらを読めば一発で理解できると思いますが、自分のために一度まとめておきます。

パスの管理

assets/stylesheets/hoge.css
assets/javascripts/fuga.js

これをSprocketsのおかげで、

assets/hoge.css
assets/fuga.js

一つのディレクトリにあるかのようにアクセスできる。

コンパイル

coffeeをjsに、scssをcssコンパイルしてくれる。

一度、Sproketsになってみます。

クライアント:「hoge.jsとfuga.cssくれ」
Sprockets:「hoge.js.coffeeとfuga.css.scssならあった。ちょっとまって」
クライアント:「おう」
Sprockets:変換...
Sprockets:「はい。」 => "hoge.js", "fuga.css"

イメージですが、たぶんこんなかんじです。

依存性の管理

Railsでapplication.cssやapplication.jsを開くと、//= require jqueryとか*= require_selfといった、謎の記述がありますよね。これはディレクティブといってアセットファイルの依存性の管理をするためのものだそうです。

たとえば、jQueryの関数を含んだhoge.jsがjQueryを読み込む前に読み込まれてしまったら困ります。マニフェストファイル(application.js)にわかりやすく書かれていれば、そういったミスが無くなります。

さらに、このマニフェストファイルに書かれたファイルはアクセスされた時にがーっと結合されて、一つのファイルとして返してくれるので、アクセスのコストが減ります。こういった部分もSprocketsがいい感じにやってくれてるらしい。

requireなんちゃらみたいな文がディレクティブ、それが書かれたファイルをマニフェストファイルと呼びます。用語だけ初めて聞くとわけがわからないので混乱しやすいところだと思います。

まとめ

とてもざっくりした書き方で、自分でも理解してるのか不安になりますが、さらにざっくりとSprocketsとは何かをまとめると、これは「CSSやJSを効率的に書き、配信するための仕組み(アセットパイプライン)を支えるツール」だと言えそうです。

パーフェクトRailsではRackのシンプルなコードで利用する例が載っているので、それを見るのが一番良いのではないかと。Railsで使う前にRackだけの少ないコードで使ってみるというのは学習の手段として良さげです。

パーフェクト Ruby on Rails

パーフェクト Ruby on Rails