Bootstrapが難しいので、苦し紛れにJavaScript関連用語だけざっくり調べた

注記
この記事の投稿者はRuby on Rails初学者であり、自身の学習の備忘録目的で記事投稿を行なっております。
情報の正確さには最大限注意をしておりますが、もし誤り等がございましたらお知らせいただけますと幸いです。

ご覧いただきありがとうございます！
Ito と申します！
Ruby on Rails初学者です。

調べた動機、経緯

初めてのアプリを作成しようと思いRails new後、Bootstrapを導入しようとしたら数時間ハマりました。
開発環境はRails7系を使用していますが、ChatGPTに質問をしたところWebpackerを薦められました。

JavaScript周りの知識があればChatGPTのアドバイスの矛盾点に気付けたのでしょうが、知識の持ち合わせがなかった私は、なすがままに振り回されてしまいました。

悔しかったのと、「自分と同じように機械に使われる初学者さんを1人でも減らすことができれば」と思い、 「RailsにおけるJavaScript周り、CSS周りの用語と用途」をざっくり押さえる目的でまとめてみます！

ご注意
本記事ではBootstrapの導入方法については言及しておりません。その代わりに、BootstrapをRailsプロジェクトに導入するにあたって頻出のワード に関して、ざっくりと整理しています。

Bootstrapの導入に際しては、以下の記事を大いに参考にさせていただきました。

調べた用語たち

RailsプロジェクトにおいてJavaScriptやBootstrapを導入する際に、目にする単語には以下のようなものがあるかと思います。

• アセットパイプライン
• import map
• Sprockets
• Webpack
• Yarn
• npm

ひとつでも ？が浮かんだ方はぜひご一読ください！
ざっくりとした理解と整理を少しだけお助けできるかもしれません

アセットパイプライン

まずは アセットパイプライン ついて、簡単にご説明します。

• アセットパイプライン：Rails側がアセット(JavaScriptやCSSファイルなど)を閲覧者に効率的に配信するための仕組み

アセットパイプラインを使用することによって、あちこちに配置された複数のJavaScriptファイルやCSSファイルが1つにまとめられ、結果としてアプリをWebブラウザで読み込む速度が速くなります。(他にも恩恵はあります)

そしてimport mapとSprocketsはこのアセットパイプラインの種類 を指します。
さらに、現在のRails7系では、対象とするアセットファイルの種類によって使用されるアセットパイプラインが異なります。

• JavaScriptのアセットパイプライン・・・import map
• CSSのアセットパイプライン・・・Sprockets

上記がそれぞれ標準となっています(デフォルト設定の話なので、設定によって変更することができます)。

プロセッサ	対象ファイル
import map	JavaScript
Sprockets	CSS

ここで、import mapとSprocketsという2つの仕組みが登場しました。

それぞれについてみていきましょう ☝🏼

import map

RailsのデフォルトのJavaScriptプロセッサです。importmap-rails gemをbundle installして使用します。
JavaScriptファイル専用のアセットパイプラインであり、CSSの配信には利用できません。

詳細は書きませんが、config/importmap.rbファイルにpinからはじまる記述方法で、JavaScriptファイルの読み込み(=アセットパイプラインに含める)をします。

config/importmap.rb

pin "application"
pin "react", to: "https://ga.jspm.io/npm:react@17.0.2/index.js"

Sprockets

Railsデフォルトの CSS配信用アセットパイプラインです。
Rails7系のデフォルトではCSSのみの配信に使用されますが、実はJavaScriptも対応しています。

プロセッサ	対象
importmaps	JavaScript
Sprockets	CSS
↑	JavaScript
↑	Sass(scss)

(※表が上手く作れなくてすみません)

Rails5系以前では、JavaScriptファイルもCSSファイルも、アセットパイプラインにSprocketsを用いていました。

しかし、昨今JavaScriptの使用が増加してきた背景から、Rails6系からはJavaScriptの配信はWebpackerを用いるように変更されました。

そして現在のRails7系では、前述の通りJavaScriptの配信はimport mapが担っています。

少し脱線しましたが、現在ではCSSのアセットパイプラインはSprockets と覚えていただいて問題ありません。

Webpackerって？

では先ほど少し登場したWebpackerは何者か？ について。

Webpackerは「Rails用のWebpack」

Railsガイドを読むと以下のように書いてあります。

Webpackerは、汎用的なwebpackビルドシステムのRailsラッパーであり、標準的なwebpackの設定と合理的なデフォルト設定を提供します。

ざっくり読み替えると、「Rails用に特化されたWebpack」 です（ざっくりですみません）。

WebpackerはSprocketsと同じアセットパッケージングツール(パッケージ管理)です。Sprocketsと機能が重複しているのですが、Railsガイドを参照するに、以下のような違いがあるようです。

SprocketsはRailsで使われる前提で設計されているため、統合方法はWebpackerよりもシンプルで、Ruby gemを用いてSprocketsにコードを追加できます。webpackは、より新しいJavaScriptツールやnpmパッケージとの統合に優れており、より多くのものを統合できます。

Sprocketsとの比較を表にまとめると以下のようになります。

	対象	特徴	使いどころ
Sprockets	CSSを管理する	Railsに特化、統合方法がシンプル	移行にコストがかかるレガシーアプリ、gemで統合したい場合、パッケージ化するコードの量が非常に少ない場合
Webpacker	JavaScriptを管理する	最新のJavaScriptツールやnpmパッケージとの統合に優れる	npmパッケージを使いたい場合、最新のJavaScript機能やツールにアクセスしたい場合

じゃあWebpackとは何か？

こちらも、Railsガイドに以下の記載があります。

webpackなどのフロントエンドビルドシステムの目的は、開発者にとって使いやすい方法でフロントエンドのコードを書き、そのコードをブラウザで利用しやすい方法でパッケージ化することです。webpackは「JavaScript」「CSS」「画像やフォント」といった静的アセットを管理できます。webpackを使うと、「JavaScriptコードの記述」「アプリケーション内の他のコードの参照」「コードの変換（トランスパイル）や結合」をダウンロードしやすいpackにまとめられます。

要約するとブラウザで利用しやすいようにJavaScript、CSS、画像などをまとめてパックするものといったところでしょうか。

「Webブラウザで使いやすいようにファイルをpack」する。名前のままですね。

そして、Webpackのようなものをモジュールバンドラといいます。モジュールバンドラとはJavaScriptの依存関係を考慮しながら管理してくれるものを指します。

さらに、WebpackはnpmとYarnに依存しています。
つまり、WebpackはnpmもしくはYarnと一緒に使わないと機能しないということです。

npmとYarn

npmとYarnについては以下の認識で問題ないかと思います。（ざっくりですみません・・・）

名称	用途(Railsガイドより)	要約すると
npm	Node.jsとブラウザランタイムの両方で、主にオープンソースのJavaScriptプロジェクトの公開やダウンロードに用いられるリポジトリ	JavaScript便利ツールをダウンロードしてくれる
Yarn	YarnはJavaScriptの依存関係をインストールおよび管理	JavaScriptが動作するように依存関係のあるものをインストールしてくれる

調べる前は、npmもYarnもWebpackも一緒くたに考えていたのですが用途が違うようです。
この辺りは今後深掘りしていきたいと思います！

まとめ

まとめると以下のようになります。

• アセットパイプライン：Railsがアセット配信を効率化する仕組みのこと
• import map, Sprockets, Webpackerはどれもアセットパイプラインの種類である
• それぞれに対象とするファイルが異なる
• 現行のRails7系でのデフォルトはimport map + Sprocketsである
• Webpacker(Webpack)を管理するためにnpmとYarnを用いる

プロセッサ	対象	特徴	使いどころ
import map	JavaScript	JavaScript の Bundling が不要のため画面表示速度が上がる	画面表示速度を上げたい場合/JSXのようにトランスパイルが必要な言語を使わない場合
Sprockets	CSS/JavaScript	Railsに特化、統合方法がシンプル	移行にコストがかかるレガシーアプリ/gemで統合したい場合/パッケージ化するコードの量が少ない場合
Webpacker	JavaScript	JavaScriptに特化しており、最新ツールにアクセスが可能	最新のJavaScriptツールを使用したい場合

終わりに

ぼんやりとしていたそれぞれのワードに関して、少しでも具体的なイメージは持てましたでしょうか？
私自身、まだまだ理解できていない部分も多いのですが、それぞれの役割をざっくりでも押さえておくことで、ChatGPTの言いなりになることなくRailsでのBootstrap実装を行う自信がつきました！
今後も理解を深めていきます！

参考記事

ありがとうございます！