rhanda | 元銀行員Web系エンジニアの日記

実務未経験からWeb系受託開発企業に転職したひよっこエンジニアが覚えたことや日々の感情を残すブログ

Webpackとは?

何度も調べまわっているような気がしたので、関連の用語をまとめてメモしてみました。 修正点・誤っている箇所等あれば、アドバイスを頂けると幸いです。

Webpackとは

JavaScriptのモジュールバンドラー。 ややこしいと思ったのはWebpackerとは別物だということ。 (Webpackerは、モダンなフロントエンド開発を強力にサポートするWebpackをRailsで使うためのgemパッケージ。)



モジュールとは

ひとつのファイル。 関数やコンポーネント等、機能ごとに分割したファイルのこと。

※パッケージとは

複数のモジュールをグループ化したもののこと。

※ライブラリとは

いくつかのパッケージをまとめて、ひとつのライブラリとしてインストールできるようにしたもの。

モジュールバンドラー(module bundler)とは

モジュールをひとまとめにするツール。 まとめることによってHTTPリクエストの数を減らし、表示速度の高速化に繋げるというのが主な理由のよう。 それならば、初めから一つのファイルに記述すれば良いのでは。とつい自分も考えてしまったのですが、

①コード量が増えてきたら、どこに何を書いたのか探すのが大変であること ②名前空間の汚染が起こる可能性(誤って同じ変数を使用して上書きしてしまったり) ③以上よりメンテナンスがしづらい

などの理由から、基本はひとつの処理や機能(関数、コンポーネント)をひとつのファイルに書き、他のファイルでそのモジュールが必要になったら、都度読みこんで利用する。



おわりに

Webpackerが難解に思われるのは、モジュールのバンドル以外の処理の代替を行っていることが大きな理由のひとつとしてあるようです。一歩ずつ理解していきたいと思っています。

参考記事

『Webpackってどんなもの?』 https://qiita.com/kamykn/items/45fb4690ace32216ca25 『webpackとは?』 https://qiita.com/minato-naka/items/0db285f4a3ba5adb6498 『最新版で学ぶwebpack 5入門JavaScriptのモジュールバンドラ』 https://ics.media/entry/12140/ 『【基本】webpackerとは何か学ぼう』 https://it-kyujin.jp/article/detail/1661/ 『はじめてのモジュールバンドラー』 https://blog.mach3.jp/2016/10/01/module-bundler.htmlJavaScriptにおけるモジュールとimport/exportの使い方』 https://analogic.jp/module-summary/ 『モジュールバンドラーはなぜモダンなフロントエンドの開発に必要なのか?』 https://note.com/billion_dollars/n/n596fecfdeb2e