超初心者がwebpackerについて調べてみたぞ

Ruby on Rails を使って開発を始めた今日この頃。
サーバーサイドはそれとなく出来てきたからそろそろフロントも固めて行こうかしら。なんて思っていた僕はBootstrapをRailsで使おうと考えた。Bootstrapを使うのはいたって簡単。htmlのhead内に以下のリンクをぶち込めばいいだけ。

application.html.erb

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

なんて便利だこと。
しかし、Bootstrapを使うには他にも方法はある。それは以下のリンクにある通りだ。
https://qiita.com/rhistoba/items/f724dae231d7e28bf477
つまり、railsにBootstrapをインストールしてしまう方法である。
基本的には、リンクの記事通りに手順を踏めばインストールできるのであるが、超初心者の僕はいくつかのワカラナイ点があったので自分用のメモとして残すことにした。

##前提
####僕のスペック

• プログラミング学習を始めて1ヶ月
• HTML/CSS/Javascript/Ruby/Railsをprogateで一応学習済
• Ruby on rails でポートフォリオを作成中

####開発環境

• 端末 : LENOVO ideapad 530S-14ARR
• OS : Windows 10 Home ver.1809
• シェル : PowerShell 5.1.17763.771
• Ruby : 2.6.4
• rails : 5.2.4.1

そもそもwebpackerってなんだ？

webpackerとはwebpackをRubyで使えるようにしたものらしい。
僕「webpackかぁ～…聞いたことあるよ。…でもよく知らない。」

webpackとは？

調べたところ、webpack というのは

Webpackとは、CSS、JavaScript、画像などを１つのファイルとしてまとめるためのモジュールバンドラーで、node.jsのモジュールの1つです。

とのこと。（引用元：https://www.sejuku.net/blog/68146）
僕「モジュールバンドラーってなんだよぉ(´;ω;｀)」
僕「node.jsもよく分かんねーよぉ(´;ω;｀)」
調べても分からないが続く。まさに分からないリレー状態。

###モジュールバンドラーとは？
次にモジュールバンドラーについて知らべてみた。
モジュールバンドラーとはその名の通り、モジュール（部品）をまとめたものをいうらしい。ここでモジュールとはあるプログラムと考えるのが良さげ。

例えば、現在時刻を表示するプログラムを作るとしよう。ここで、現在時刻を取得するコードと、それを表示するコードと分けて作ったとする。これらのコードを合体させたいのだが、その方法として、表示するためのコードに現在時刻を取得するコードをインポートすることにしよう。この時、インポートされる側のコードをモジュールと呼ぶ。

このような便利なコード集をモジュールバンドラーというみたい。
（参考：https://note.com/billion_dollars/n/n596fecfdeb2e）

###node.jsとは？
node.jsとはサーバーサイドJavascriptである。
Javascriptは本来、ブラウザで動き見た目を作る（フロントで活躍する）言語なのだが、「この言語でサーバーサイドも作れたら嬉しくね？」という発想から作られたJavaScript 環境なんだとか。

僕「なるほどぉ。すごいじゃんnode.js」

（参考：https://eng-entrance.com/what-is-nodejs#Nodejs-2）

改めてwebpackって何ぞや？

ここまで調べたことをまとめて、もう一度考えるとwebpackとは、

CSS、JavaScript、画像などの部品を上手にまとめて1つにするnode.js（Javascript環境の１つ）のモジュールだ！

ということですね。要するにまとめ上手なお兄さんみたいな（雑）

とはいえ、なんでそんなにまとめたがるのか？

なんとなくwebpackについて分かったけど、まとめることにどんなメリットがあるのかしら？調べてみると通信との関係があるみたいだ。
僕たちがwebサイトを閲覧する時は、自分のPCからサーバーにリクエストを送り、そのレスポンスとしてあるwebページ（htmlファイルとか）を返してくれる。
しかし、そのhtmlが様々なコード（モジュール）や画像、css、javascriptなどを引用してきている時には、それらも同時に送ってやらないと不完全なwebページしか閲覧できない。だからそういう関係するファイルも一緒に送ってやるのだが、これらがバラバラだとサーバーがPCに送るのに時間が掛かってしまうみたい。
ここでそれらのファイルが1つにまとまっていることで素早く通信できるようだ。

まとめ

webpackerのことを調べて、本来の目的であるBootstrapのインストール忘れてた(/ω＼)