【初学者向け】Sprocketsの解説!Webpackerとの比較も

Ruby on Rails

はじめに

この記事の概要

Railsで開発をしていて、もちろんCSSを使いたいときってありますよね?
また、Javascriptで簡単なアニメーションであったり、imgタグで画像を載せたい時も頻繁にあると思います。

この記事は、そんな時に使うSprocketsという技術についての概要を説明します。
また、似たような使い方をするWebpackerとの関係も話すので、どちらを使うか悩んでいる人も必見です!

対象読者

  • Railsの初学者
  • Sprocketsについてあまり理解していない人
  • Webpackerとの関係についてあまり理解していない人

Sprocketsとは

Sprocketsについて

簡単に説明すると、CSS拡張言語のSCSS(拡張子が.scssで始めるファイル)をひとまとめにして、cssファイルに変換するものです。
それだけではなく、Javascriptや画像ファイルも圧縮してくれたりと、フロント部分のコーディングに関する色々な機能を行ってくれる優れものです!
つまり、Railsでの開発の際にCSSJavascriptを使う際に無意識に使っているものですね😎

使い方

、、、なんですが、使い方に関する記事はネット上にかなり転がっていますので、僕が厳選して役に立ったものを張っておきます!
Sprocketsを使ってCSSを扱いたい際は以下の記事を参考にしてみて下さい!
参考 content_forを使ってView毎に適用するCSSを切り分ける【Rails・CSS設計】Qiita.com
参考 Rails開発でのviewごとに個別にcssを呼び出す方法についてQiita.com

Sprocketsは使わない方が良い?

ここからが、僕が今回話したかったことです。
ネットで検索していると、「sprockets 削除」「sprockets 外す」のような不審なワードが検索候補に出てくるかと思います🙄
それに対する僕の意見を述べさせてもらいますので、参考にしながら今後使っていくかを考えて貰えれば嬉しいです🙏

Rails6の現状

現在(執筆時点:2021/12/5)のRailsのメジャーバージョン(最初の数字)は“6”です。
Rails6の場合、デフォルトでSprocketsとは別にWebpackerというものもインストールされています。
このWebpackerなんですが、基本的にSprocketsと同じことができてしまいます。
Railsの開発者さん、なぜそんな似たような機能を入れてしまったのですか、、と思ったのですが、やはり後発のWebpackerの方が色々機能として優れています💪

  • Javascriptのライブラリ(例:bootstrap, jQuery)の使用
  • デフォルトでのモダンなJSライブラリ(例:React, Vue)への対応
  • カスタマイズによるシンタックス、Lint機能

上記は一例ですが、Webpackerの元になっているWebpackへの理解があれば、開発の際に自分でカスタマイズして何でもできちゃいます🥳

追記(2022/12/30)

僕の予想は大外れで、逆にWebpackerがデフォルトのインストールから外れて非推奨になってしまいました。

Railsの製作者としては、CSS等はSprocketsで管理する方をオススメしているそうなので、現在は僕もSprocketsを使用しています。

結論

つまり、Railsの開発者的には、現在SprocketsよりもWebpackerを推奨しています。
現在は両方使えるのですが、今後のバージョンアップ次第によってはSprocketsが使えなくなる可能性もあるかもしれないので、Webpackerを使えるようになっておきましょう😎

今回だけの話では無いのですが、エンジニアたるものキャッチアップをこまめに行なって新しいものを使いこなせると良いですね!

終わりに

Sprocketsの概要と、今後はWebpackerを使った方が良いというお話をさせていただきました!
Railsの勉強をしたい方はこの本が参考になるかと思いますので興味がある方は是非読んで見て下さい🙇‍♂️
Webpackerの使い方に関しては、別の記事で説明していますので、ぜひチェックしてみて下さい💪