Zenn
✨

Webpackとは？

2020/12/06に公開
JavaScript
webpack
tech

Reactを学び始めて早9ヶ月Reactの環境構築をcreate react appに頼りすぎてWebpackを全く学ばずにここまできてしまいました。

Webpackに関して調べてみても最初は全く何を言っているのかが全く分からず、「Webpack難しすぎる。。。。」と挫折しかけたのですが、

一つ一つの単語の意味を調べると少しずつわかるようになり、「Webpackはなんて便利なんだ!?」と感動したので、今回はその感動をWebpackが分からない人でも体験できるようにと思いWebpackについてのまとめを書いてみました。

*この記事はこちらの記事を参考に自分なりにまとめ、自分が難しいと感じた単語を分かりやすく解説、書き直した記事になります。

Webpackとは？

Webpackとは、html,css,jsなどのウェブコンテンツを構成するファイルをまとめるツールで、ReactやVueなどjsのフレームワークはcomponentごとにファイルを細かく分けることが多いためWebpackでは特にjsはファイルをまとめることが多いです。

ただ、まとめることにどのようなメリットがあるのでしょうか？

Webpackでファイルをまとめるメリット

転送時間が短縮される

HTTP/1.1接続ではブラウザとウェブサーバーの同時接続数が限られるため、複数のファイルの転送に時間がかかってしまいます。
しかし、複数のjsファイルを1つにまとめてることで、転送するファイルを減らすことができ、表示する時間を減らすことができます。

HTTP/1.1とは？
HTTP/1.1とはHTTP（WebサーバとWebクライアントの間でデータの送受信を行うために用いられる通信規約）のバージョン1.1のことを指します。
HTTP/1.1の特徴は 「1つのリクエストが完了するまで、原則次のリクエストを送ることができない」　という点です。
例えば、jsファイルが2つあるWEBサイトを、表示するためにはまず初めにHTMLファイルを読み込み、次に1つ目のjsファイルを読み込み、次に2つ目のjsファイルを読み込むと計３回の通信が必要になります。
HTTP/1.1の問題点としては、ファイルの多い複雑なWEBサイトになるとその分通信回数が増える点で、結果的にWEBサイトを表示するのに時間がかかったりします。
通信回数の問題を解決するために、多くのモダンブラウザでは1つのドメインで複数の同時接続をおこない、通信回数を効率化しています。
しかし、それでも同時に送信できるリクエストの数は限られています。（例：choromeは6つまで）

モジュールが使える

複数のjsファイルをまとめることは実は他のツールでも可能です。
しかし、WebpackはES Modulesやnode_modulesなどのモジュールも結合することができるというメリットがあります。

ES Modulesとは？
scriptタグではなく、export importで他のファイルを読み込むことができるようにするためのモジュールのこと。
ES Modulesを利用することで変数の競合を防ぐことができ、開発時の安全性が高まります。
またコードの可読性も上がり、開発作業や分担テストがしやすくなり、再利用性や、保守性が向上します。

モジュールとは？
モジュールとは日本語に直すと「部品」という意味です。
モジュールの特徴は以下の3点です。

  1. 単独でも機能としては成立している
  2. しかし、普通は何かと合体させて動かす
  3. 合体させるのが簡単

jsだけでなくcssや画像もまとめる（バンドル）ことができる

Webpackはjsだけでなく、cssや画像もまとめることができるため、通信回数を効率化することができます。

開発環境が整う

Webpackはjsファイルをまとめたり、コンパイル前とコンパイル後の対応関係を記したファイル（ソースマップ）の対応からローカルサーバーの起動までの全体的な制作環境としての機能が揃っています。
Webpackを使わないとツールを複数組み合わせる必要があるため設定ファイルが煩雑しがちですが、Webpackを使うことで設定ファイルがWebpackだけで済むようになります。
Webpackを導入することでフロントエンジニアに必要な技術が一通り揃うという点がWebpackの最大の利点です。

参考文献

今回はこんな感じで終わりにしたいと思います。

次回は「Webpackの導入方法」を解説します。

自分なりに分かりやすく書いたつもりなのですが、理解できたでしょうか？

プログラミング学習を進めていく中で理解できない言葉と出会ったら、分からない単語を一つずつ調べると言葉の意味がわかるだけでなく、プログラミングに関するいろいろな知識を得ることができるのでオススメです！！

初めてこういう記事を書いてみたのですが、言葉で伝えるって難しいですね。

これからは週一くらいのペースで記事を書いてアウトプットしていきたいと思います。

Discussion