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

はじめに

この記事の概要

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

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

対象読者

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

Sprocketsとは

Sprocketsについて

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

使い方

、、、なんですが、使い方に関する記事はネット上にかなり転がっていますので、僕が厳選して役に立ったものを張っておきます！
Sprocketsを使ってCSSを扱いたい際は以下の記事を参考にしてみてください！

content_forを使ってView毎に適用するCSSを切り分ける【Rails・CSS設計】 - Qiita

目的 デフォルトの設定のままだと、application.cssとかapplication.scssとかでプロジェクトの全ページが全てのCSSを読み込むというような状態になっています。 しかし、それだと複数人にデザインも兼ねた実装をお願いしている時に、命名とかが重なり競合...

qiita.com

Rails開発でのviewごとに個別にcssを呼び出す方法について - Qiita

概要 Railsでwebアプリケーション作成時にフロント部分で 「Viewごとに読み込ませるScssを分けたら開発しやすくなるのにな」と思い、 いろいろ調べてうまくいったのでメモ程度ですが残します。 1.app/assets/stylesheets/applicatio...

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への理解があれば、開発の際に自分でカスタマイズして何でもできちゃいます🥳

結論

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

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

終わりに

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

【Rails6】Webpackerの使用方法！【コピペでOK】

Rails 6でWebpackerを使ってJavaScript、CSS、画像を読み込む方法を初心者向けに解説。導入手順から具体的なコード例まで、コピペですぐに使える実践的な内容をまとめました。