初心者がwebpackを調べてまとめてみた #Ruby

この記事について

Rails6でポートフォリオを作成していたが、webpackを理解できずに開発を進めていってたから勉強のまとめとして投稿

参考URL

https://qiita.com/kamykn/items/45fb4690ace32216ca25
https://eng-entrance.com/what-is-nodejs
https://note.com/billion_dollars/n/n596fecfdeb2e
https://qiita.com/ashketcham/items/48d64e960d436f8b6f78

webpackとは

一言でまとめるとNode.jsで、サーバーサイドで動かすモジュールバンドラーツールのこと

さて、いきなり知らん単語ばかりが並んで思考が停止しそうになるぜ。

このwebpackの説明文読んだときの頭の中を表現すると、

「Node.jsって美味しいの？？？」
「モジュールとは・・・」

ここは落ち着いて知らん単語を調べるのみ！！！！

Node.jsとは・・・

サーバサイドで動くJavaScriptのこと。Ruby やPHPなどと同じような働きをしてくれる。

このようにサーバサイドで動くJavaScriptをサーバサイドJavaScriptと呼ばれるが、その中でも代表的なのがNode.js。（他にも色々あるみたいだけどマイナーらしい。）Node.js = サーバサイドJavaScriptだと認識しておいてよさげ。

モジュールとは・・・

JavaScriptファイルなどのファイルのことをモジュールと呼ぶ。

ちなみに、webpackではCSSや画像もまとめてくれるので、それらもモジュールと呼ばれている！！

バンドラーとは

複数のモジュールを依存関係を解決して一つにまとめること。

そもそもバンドルとは、まとめられたファイルを意味する。

つまりここまでの用語を噛み砕いてwebpackを説明すると・・・

サーバサイドで動くJavaScriptで、CSS・JavaScript・画像などを１つのファイルとしてまとめるための便利なやつ！！！！（強引）

ここで疑問に感じるよね

なんでまとめる必要があるのか？？？？

それはブラウザ／サーバー間での通信プロトコルであるHTTP/1.1の仕組みにある。
HTTP/1.1では一度に処理できるリクエストの数が限られている。そんな限られている中で、CSSや画像やらJSファイルを一つ一つリクエストしてると、処理速度が遅くなってしまう。
そこで、JSのリクエストをなるべく一つにまとめてリクエストの回数を減らすことが表示速度（パフォーマンス）を上げてやることができる。

ここまででなんとなくwebpackが何なのか薄らわかってきたとこで、webpackの利点をまとめる。

webpackの良いところ

其の１：外部モジュールを簡単に利用できる。

フロントエンドの開発ではjQueryやVue.jsなどを利用することが多く、webpackではこのような外部モジュールを簡単に利用することができる。

其の２：依存関係を解決したファイルを出力できる。

複数のライブラリ等を読み込んで、それに依存しているapplication.jsに読み込むファイルがあった場合は以下のようになる

qiita.rb

<!DOCTYPEhtml>
<html>
    <head>
        <metacharset="utf8"/>
        <title>dependency</title>
    </head>
    <body>
        <scriptsrc="js/extra.js"></script>
        <scriptsrc="js/jquery.js"></script>
        <scriptsrc="js/mymodule.js"></script>
        <scriptsrc="js/main.js"></script>
        <scriptsrc="js/application.js"></script>
    </body>
</html>

上記のようにしてたら、読み込みが増えれば増えるほど管理が大変になってしまtたり、読み込み順を変えると上手く動かなくなったりするかもしれないという懸念がある。

そんな懸念を解決するのがwebpackさん！！！

webpackを使わなかったらjs以下等のファイルを一つ一つ記述していたが、それらをwebpackでギュッと一つにまとめてやると、記述をかなり減らして書くことができる。

qiita.rb

<!DOCTYPEhtml>
<html>
    <head>
        <metacharset="utf8"/>
        <title>dependencyresolved</title>
    </head>
    <body>
        <scriptsrc="js/bundle.js"></script>
    </body>
</html>

他のCSSやJSの読み込みの記述は必要なく、bundle.jsにすべてまとめられている。

まとめ

webpackはフロントエンド開発用のモジュールバンドラーのこと。
モジュールバンドラとは、複数のモジュールをまとめるツールのことであり、モジュールはJavaScriptファイルなどのこと。
つまり、webpackは複数のJavaScriptファイルなどをまとめてくれるツールのことなんやな！！！