こんにちは。今時のフロントエンドがよくわかってない人です。jQueryの次にbackbone.jsをかじり、そこで僕は止まってました。時代に取り残されています。今時のフロントエンドを学ぼうとすると、webpackって言葉がよく出てくる印象です。そして、だいたいわかってる前提で話が進むんですが、僕はわかってないので何言ってるかよくわかんなくて辛くなります。そして、僕と同じような人はいるんじゃないかな、と思ってます。というわけでwebpackについて調べた話を書いておきます。
webpackとは何かを理解する
まずは、webpackとはなんなのか、について調べて理解していきます。
webpackは複数のファイルをまとめる
webpackは複数のファイルをまとめる技術だ！という話を見かけたことがあります。
はい。まあ、検索したら一番最初に出てきますよね。それはわかってるし、知りたいのはそこじゃない、、と思いました。僕の場合は、以下のような疑問が出て困っていました。
- なんで複数のファイルをまとめるの？
- どうやって複数のファイルをまとめるの？何を指定して、何が出てくるの？
- webpackってライブラリ？圧縮形式？解凍ツールは別であるの？どういう状況？
はい。
これを一つずつ調べていこうと思います。
webpackはなぜ必要か
はい。まず、最初は、「webpackはなぜ必要か」について調べてみました。すると、およそ以下の理由があってwebpackを使っているということがわかってきました。
- 昔のjs開発では、依存ファイルの数は少なかったが、最近は多い。
- 依存ファイルの数が多いと、読み込み順序で問題が発生したりする。管理が辛い。
- 依存ファイルをどうやって読み込むかは考えることが多い。（非同期で読み込もうとして、ネットワークのせいで一つ失敗するとか、同期で読み込もうとして、詰まるとか）
- jsのファイルだけ読み込めばいいわけじゃなくて、jsではcssや画像を処理するので、その辺りの読み込み順序によって、モゴモゴして辛い。
- ES6でモジュールのインポートが改善したらしいけど、ブラウザが追いついてなくて辛い。
ふむふむ。なるほどなるほど。確かに辛そうだ。
そして、これを解決するためにwebpackで一つのファイルにして、サーバーからブラウザに送ってる、と。
ふむふむ。ブラウザに一回のHTTP通信で送れるからきちんとファイルを渡せるって話ですかね。なんで一つのファイルにまとめてるのか、に納得しました。
そりゃ非同期でいっぱい送ってるファイルの依存とか考えるのは辛いですし、まとめて送ったほうが楽だろってことですよね。ふむふむ。わかる。
どうやって一つのファイルにするか
「ファイルが複数に分かれているから辛い。だから一つのファイルにまとめたい」というのはわかりました。ふむふむ。
とりあえず、雑なイメージとしては、複数のjsファイルを読み込み順に一つのファイルにコピペした統合jsファイルのようなものを作れば取り急ぎ、jsは一つにまとめられそうな気がします。
あと、cssはなんだろう。あんまりやったことないですが、DOMを制御して、bodyにstyleを書き込むjsを作ったら、一つのファイルにまとめられたりするのかな？と思ったりします。わからんですが。
というわけで調べて見ました。すると以下のようなことがわかりました。
- webpackは、複数のファイルをまとめて一つのjsファイルを吐き出す。
- webpackは、loaderという仕組みを利用して、cssや画像ファイルなどをjsの形式に変換する。
- loaderには種類があって、cssの場合は、ファイルをそのまま読み込むタイプと、styleにjs で書き込むように変換するタイプがある。
- webpackは複数のファイルから構成されたjsファイルを一つのjsファイルに結合する。
ふむふむ。なるほどなるほど。
じゃあ出来上がったjsファイルの中には、画像ファイルのバイナリがjsの変数にそのまま書き込まれている、みたいな状況になるんですかね。なるほど。
あ、そういえば、今時のwebサイトをあまり高速ではないネットで見ると、初期ロードがやたらと遅い時がありますが、そういうサイトは、いろんなファイルをwebpackで一つまとめてるから初期ダウンロードが重くて、一つのファイルがダウンロードできるまで何も表示できないから、初期ロードが重いように感じてたんですかね。なるほどー。
webpackは、複数ファイルを一つのjsファイルに結合するツール
結局のところ、webpackは、複数のファイルを一つのjsファイルに結合するツールなんだな。というのがわかってきました。
ここから、webpackというのは、ファイルの依存関係を定義した設定ファイルと、結合するファイル群を読み込んで、一つのjsファイルを出力するコマンドラインツールを想像しました。出力するのは、jsファイルだし、解凍する必要もないですね。
なるほど。はい。
で、どういうツールかがわかったら次に興味が出てきたのは、次のようなことです。
- どうやってまとめるファイルを指定するのか。（ファイル形式はjsonな気がする）
- 依存関係はどうやって定義するのか（順序だけ？ファイルの依存関係も指定できる？）
- ページによって読み込みたいcssや画像、jsファイルが違うと思うけど、それはどういう風に定義するの？（個別の設定ファイルを使うのか、アプリケーションとして指定できるのか）
次は、これらの疑問を一つずつ調べていきます。
webpackを使ってみよう。
さて、仕組みがなんとなくわかってきたのでwebpackを使ってみましょう。と思ったのですが、実際にwebpackのチュートリアルを触ってみたところ、以下のような疑問も出てきました。
- node.jsってバージョンで結構違うの？
- npmって、どういう仕組みなの？
- node.jsを使ったフロントエンドの開発ってどういう流れなの？
- Djangoみたいなサーバーサイドフレームワークとどうやって繋ぐの？
というわけで、サクッと使得る話を説明するのは難しそうなので、これらの疑問を追々調べていきたいと思います。
今回はここまでにします。
参考URL
ちなみに、僕はこのあたりを拝見しました。
