Reactの開発の勉強をしていく中でwebpackという言葉が出てくることが多く、結構必要な知識なのかなと思い今回改めてまとめていきたいと思います。
また、Webpackに関連するモジュールなどの概要についてもまとめて理解したいと思います。
【初心者用】webpackやモジュールについて
1. そもそもwebpackって何？
webpackとはモジュールバンドラという複数ファイルを１つに束ねる役割のことを言います。
基本的にアプリ開発の際には、複数ファイルに分けて実装していくと思います。
webアプリケーションを構成するリソースは複数あり、Webページを構築するためのHTML・CSSなどを使用しています。
webpackならこれらのファイル(HTML,CSS,JS,JSX,javaScript,画像データ)などを１つに束ねることで、開発する際のリソースを扱いやすくする目的があるようです。
webpackは適切な順序でJavaScriptのファイルのコードを結合することができます。
その場合だとJavaScriptファイルを扱う場合は、指定した順番にファイルが実行されていますが、その際にはファイルの指定は手動で行われます。
上記の場合だとミスが発生しやすくなり、指定の順番を間違えるとプログラムが正しく動作しないということがありました。
そこで、webpackを使用すると結合対象のファイルを自動で検出・追加をし、主王によるミスの発生や順番ミスでファイルが実行されるなどが無くなります。
なお、webpackを使用するにはNode.jsの環境が必要となります。
2. モジュール化Bundleとは
最初にモジュール化について以下にまとめます。
モジュール化とは、別ファイルに機能を分割することを言います。
機能ごとにファイルを分割することにより、コードの保守性・可読性などの管理が試薬すなることで大規模開発に対応しやすくなります。
また、モジュール化により以下のメリットがあります。
・他のコードトの依存関係を少なくし、変更・修正・拡張などが簡単になる
・変数名の競合をさせないことにより、ネームスペースの衝突を防ぐことができる
・機能ごとにモジュール化することができるため再利用ができる
上記をもとにモジュールバンドラーについて以下まとめます。
2-1. モジュールバンドラーとは
モジュールバンドラーとは複数のJavaScriptの依存関係を解析し、１つのファイルとしてまとめる機能である。
バンドルファイルはそのまま読み込みさせて使用することが可能であり、開発者は依存関係を意識することなくJavaScriptファイルを使用することができます。
JavaScriptには元々ファイルをまとめる機能が存在せず、ファイル同士の依存関係の解消がかなり問題となっていました。
元々JavaScriptのモジュールについてはNode.jsの際に使用されていて、モジュールの中にはNode.jsの環境に依存しないものがありました。
その、実行環境に依存しないモジュールについては、ブラウザの方でもCommonJS形式のモジュールを読み込みができるのであれば実行可能となるものが多くありました。
こちらをWebフロントエンド開発で読み込めるようにすればよいのではないかというので生まれたのが、WebPackやBrowserifyなどのモジュールバンドラーとなります。
3. webpackのメリット
webpackメリットとしては以下のようなメリットがあります。
・様々なフレームワークが採用されているのでサンプルが多い
・JavaScriptの依存関係のあるモジュールを解決できる
・プライグイン・ローだなどが豊富
・読み込みの順番を気にせず、リクエストが１回で済むので効率的である
・JavaScriptモジュールを簡単にブラウザで使用できる様に変換できる
WebpackはJavaScriptを１つにまとめることで、ブラウザからのリクエスト数を減少させることができファイル転送の最適化が可能となっています。
上記がWebpack等のモジュールバンドラーを使用する理由となります。
モジュールバンドラーを使用せずJavaScriptが複数存在することで、ファイルに対するリクエスト回数が増えて転送効率がかなり落ちてしまいます。
最初から１つのファイルに全て記載できれば良いのでしょうが、１つのファイルにまとめてしまうと保守性や可読性などの観点から基本的には不可能です。
ですが、機能を分割して複数ファイルに分割した状態ですと、ブラウザからのファイルリクエストが増大してしまいファイルの転送効率がかなり落ちてしまいます。
上記の問題を解決する為にWebPackを使用するとで、機能のファイルを分割した状態で保守性・可読性を維持したまま、ファイルの実行の際には１つのファイルとしてまとめてブラウザに提供することができます。
ですので、ファイル間の依存関係を解析して１つのファイルにまとめてくれるので、ファイル間の依存関係を解決することができます。
WebPackを拡張できるプラグインなども豊富であり、最新のコードを古いブラウザにも適応することも可能となっています。
このように、WebPackは使用できればサーバーへの負担の軽減や開発効率の改善など、メリットになる要素が多数あります。
4. モジュールバンドラーの種類
■Webpack
今回疑問に思ったモジュールバンドラーで自分が知っていたものです。
フロントエンド開発で扱われており、数多くのモジュール（ライブラリ）の依存性を解決し、パッケージングするソフトウェアとなります。
■Browserlfy
npmでブラウザ向けのライブラリなどを配布するようになった頃に、その依存関係を解決するのに使用されていたのがBrowserifyです。
ちょっとしたライブラリであれば単体で、依存関係を解決したJavaScriptのコード生成にも使用することができます。
■Rollup
RollupはJavaScriptのモジュール依存関係を解決するモジュールバンドラーになります。
このモジュールバンドラーは、コードをES6に変換することが特徴となっています。
他のモジュールバンドラーが古いブラウザの互換性のために、ES5に変換するのに対してもモダンなコードを出力します。
■Parcel
ParcelはWebpackより高速に動作をすることを目的としています。
ワーカープロをマルチコアを活用するために、ファイルキャッシュによる高速化を行います。
importを使用してバンドル分割したり、HTML/CSSの変換に対してプラグイン・設定不要で動作をします。
5. まとめ
フロントエンド開発に関して勉強していく中で、経験が浅いということもあるのですが、知らないことや理解できていないことが数多くあるなと感じます。
今回のモジュール化やモジュールバンドラーなどの知識に関してもかなり浅く、改めて調べてみなければ何のために使用するのか意識して開発することができなかったと思います。
モジュールハンドラーの考え方やツールに関しては、フロントエンド開発で欠かせないものなので以降の開発や勉強の際には意識して使用しようかと思います。