モジュールバンドラとは？10

本当は「jsbundling-rails」や「cssbundling-rails」について

まとめようと思ったけれど、それ以外の知識が曖昧だったので

何回かにわけてやっていこうと考え中。

それで今回のテーマは「モジュールバンドラってなーに？」

ということ。

少し調べたら以下の記事がわかりやすかった。

まずモジュールは上記の記事で以下のようにまとめられていた。

モジュールというのはフロントエンドの開発においては「関数」や「コンポーネント」といった機能ごとに分けたファイルになります。

そして「バンドラ」とは「bundle」の事で、意味は「束、包み、一つにまとめた物」などだ。つまりモジュールバンドラは関数やコンポーネントをまとめた物のこと。

まあ、直訳すればその通りなのだがそんなのは誰だってわかる。ようはイメージが曖昧なわけで...

ということで、具体的な開発過程で例えると

cssやjsのプログラムを書くときすべてを一つのファイルにまとめて書かない。

なぜなら、長々としたコードは後々見ずらいし開発途中でもよくわからなくなるし、

共同開発もできない。

そんな時、それぞれの機能や、ブラウザのページにファイルを分けて開発する。

それらのファイルをありえず、モジュールだと思っておけばいいと思う。

そしてそれらはブラウザにファイルを取り込むときに一つにまとめる必要がある。

それはなぜか、それは次に簡単に書くつもり。

とりあえず、まとめる必要がある。それをに担うのが「バンドラ」。

まとめると、

開発で、メンテナンス、開発のしやすさなどの理由でモジュールに分けて開発する。

一方、ブラウザに取り込むときにはそれらのファイルを一つにまとめないといけない。

また、ファイルをまとめるということは依存関係などもあり。超面倒。

そんな時、難しい事をすべてやってまとめてくれるのがモジュールバンドラです！

どうやら、理由は「HTTP」の仕組みにあるよう。

HTTPは一度にできるリクエスト数に限りがある。そして、その回数は表示速度に影響あり。だから、HTTPはできるだけリクエスト数を減らしたい。

そして、scriptファイル（<script src="./sample.js">見たいなやつ）が多いとその分だけリクエストの数が増える。だけど、エンジニアは開発しやすいようscriptファイルをモジュールごとにいっぱい作る。

だから、モジュールバンドラが必要。

エンジニアが量産したファイルがそのままだと、HTTPがリクエスト回数が多くなる。

それをHPPTに渡す前にモジュールバンドラが一つにまとめて渡してくれる。

結果、モジュールが多くなっても通信速度などを考えず開発しやすい環境を維持できる。モジュールバンドラに感謝！