🔰

railsのWebpackerを雰囲気だけでも理解する

2023/03/19に公開

結論、Webpackerの雰囲気としてはこんな感じ


これだけではあれなのでざっくり解説していく

イントロ(調べようと思ったきっかけ)

railsの開発をしていると、Webpackerという文字を見つけることがよくあった。
例えば、ターミナルのログで、

[Webpacker] Compiling...
[Webpacker] Compiled all packs in /Users/xxxx/yyyy/zzzz/...
[Webpacker] Hash: xxxxxxxxxxxxxx

みたいな。

よく見かける割に、Webpackerが何者なのか知識ゼロだったので調べてみた。

Railsガイドにも1ページ割かれてるので貼っておく
Webpackerの概要 - Railsガイド

Webpackerとは

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

(Railsガイドより)

「正直言って、webpackもラッパーもよくわかりません」というのが本音。
そんな方いませんか?
数日前の僕もそうでした…

もう少しわかりやすい説明がこちら

Webpackerとは、Webpackを使用してRuby on Rails上でJavaScript開発をするために必要な一連のまとまりを、標準で実装することができるgemパッケージです

(こちらから引用:【基本】webpackerとは何か学ぼう

JavaScriptが関係してくるんだなということがとりあえずわかる。

そもそもWebpackとは

そもそもWebpackとは何かというと、CSSやJavaScript、画像などのプログラムを作成する際の部品であるモジュールを、1つのファイルとしてまとめるためのモジュールバンドラーです。 Node.jsで、サーバーサイドで動きます。
平たく言うと、WebpackはJavaScriptファイルのコーディングにおいて、開発を効率的におこなうことができるよう助けるような役割を担っているということです

(さっきと同じ引用元)

「Webpackとは(中略)モジュールバンドラーです」とのこと。

...ぶっちゃけモジュールバンドラーもよくわかっていない。

モジュールバンドラーとは一言で説明すると複数のモジュールを依存関係を解決して一つにまとめるものになります。

モジュールバンドラーはなぜモダンなフロントエンドの開発に必要なのか?より引用)

「Webpack とは(意訳)複数のモジュールの依存関係を解決して一つにまとめるもの」らしい。そして、CSSやJavaScript、画像などのプログラムを扱っているようだ。

こちらがWebpackのイメージ画像。確かにひとつにまとめてる。

Webpackのイメージ画像

(この記事にあった:リンク


Webpackerの役割とは

なんとなくWebpackのやっていることはわかった。ではWebpackerはなんなのか。

Railsガイドには「Webpackerは、汎用的なwebpackビルドシステムのRailsラッパーであり...」とあった。要はwebpackとRailsをつなげるためのものということ。

イメージにすると。

【Webpackerがないとき】

Webpackでまとめられたもの(真ん中の青い丸)をRailsで使いたくても、そのままでは使えない。

そこでWebpackerの登場。

【Webpackerがあるとき】

Webpackerのおかげで、webpackでまとめられたものがRailsにたどり着けるようになった。

このように、RailsとWebpackの橋渡しをするのがWebpacker。


あとがき

調べていると次から次に情報が出てきたが、あまり深追いするとまとめきれないので扱わなかった。
さらに詳しい内容は、railsガイドや引用元の記事でチェックしてみてください


転職を考えている方へ

「転職ドラフト」というサービスを使って、企業から指名を受けてみませんか?

実務1-2年目でも、うまくいけば転職ドラフトで年収数百万UPできるようです(ググると記事が見つかるはず)

登録時に次の紹介コードを入れて、その後レジュメ審査が通過すると、もれなくAmazonギフト券3000円分などのプレゼントがもらえます。

気になっている方はぜひ使ってみてください!

紹介コード:HJGJ

転職ドラフト

https://job-draft.jp/


引用した記事を再掲

Discussion