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

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

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

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

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

[![Image from Gyazo](https://i.gyazo.com/0e9ab7824756f96f76b0bce9dda2370a.png)](https://gyazo.com/0e9ab7824756f96f76b0bce9dda2370a)


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


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


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

https://zenn.dev/haccht/articles/eb22a3fa016f42

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

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

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


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

* アセットパイプライン：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ファイルの読み込み(=アセットパイプラインに含める)をします。
```rb: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 | `pin` |
| 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](https://webpack.js.org/)ビルドシステムのRailsラッパーであり、標準的なwebpackの設定と合理的なデフォルト設定を提供します。

https://railsguides.jp/webpacker.html

ざっくり読み替えると、**「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の依存関係を考慮しながら管理してくれるもの**を指します。

https://qiita.com/suzu12/items/d43a06b42246ef10dde3

さらに、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実装を行う自信がつきました！
今後も理解を深めていきます！ :muscle: 

## 参考記事
ありがとうございます！

https://railsguides.jp/v7.1/asset_pipeline.html

https://qiita.com/chapchon819/items/8b5851a9218a09fbc86a

https://zenn.dev/takeyuwebinc/articles/996adfac0d58fb

https://qiita.com/suzu12/items/d43a06b42246ef10dde3

https://qiita.com/tronicboy/items/b822e40b3a2c43597f33

https://qiita.com/gobtktk/items/75e4eb2b223835da5663