Webデザイナーとフロントエンドエンジニアを分かつキーワードがいくつかありますが、その中の一つ「webpack」について急速に知りたくなり、調べてみた記録。たぶんこれはWebデザイナーが「その次（フロントエンドエンジニア）」に進むための重要なキーワードなのではなかろうか、と感じました。それでは、いきましょう！！
【目次】
フロントエンドエンジニアのスキルセット
以前書いたようにWebデザイナーにはビジネス（Webディレクター）、デザイン（UI/UXデザイナー）、テクノロジー（フロントエンドエンジニア）の三方向のキャリアパスがある。
※参考：Webデザイナーに必要なスキルと代表的な7つのキャリアパス - クモのようにコツコツと
私の目標はフロントエンドエンジニア。フロントエンドエンジニアのスキルセットをWebデザイナー/コーダーと比較するとこのような感じかと思う。
| 分野 | フロントエンドエンジニア | Webデザイナー/コーダー |
|---|---|---|
| 作るもの | SPA | コーポレートサイト、特設ページ |
| 言語 | HTML, CSS, JS | HTML, CSS, JS |
| フレームワーク/ライブラリ | React,Vue.js,Angular など | jQueyなど |
| 更新 | Git | FTP |
| テンプレートエンジン | Pug,EJS など | - |
| AltCSS | SCSS | - |
| AltJS | TypeSctipt | - |
| コンパイル環境 | Node.js | - |
| モジュールバンドラ | WebPack | - |
フロントエンドエンジニアとWebデザイナー/コーダー、使う言語（HTML, CSS, JS）は同じ（ホッ）。
ただし、フロントエンドエンジニアはReact、Vuejs、AngularなどのJSフレームワークを使ってSPAを作る！当ブログをご覧の通り、私はいまVue.js習得中。
※参考：三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた！ - クモのようにコツコツと
そして更新は黒い画面でコマンド叩いてGitでバージョン管理する！FTPで上書きアップは個人開発はまだいいがチーム作業がしにくい。
※参考：GitHubとSourcetreeでGitHub Pagesとローカルファイルを同期させる - クモのようにコツコツと
その次からはフロントエンド エンジニアにしかない分野。
テンプレートエンジン、AltCSS、AltJSなどはHTML, CSS, JSをスリムに書くことができる記法。CodePenではそのまま表示されるが実際にページで表示するにはHTML, CSS, JSにコンパイルする必要がある。
※参考：HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ（3記事） - クモのようにコツコツと
それらのコンパイルの実行環境はNode.js。（このブログではまだハローワールドまで。。）
※参考：初めてのNode.js：インストール確認、REPL、Hello worldまで - クモのようにコツコツと
そして最後が今回のテーマ、webpack。「モジュールバンドラ」といって複数のjsファイルやcssファイルなどを一つにまとめてくれるツール。それだけでなくテンプレートエンジン、AltCSS、AltJSのコンパイルもできる！？
ということで、webPackを習得できればテンプレートエンジン、AltCSS、AltJSをコンパイルできてNode.jsにも触れられる！一石何鳥にもなるキーワードなのであ〜る！*1
※2019/06/30追記：今の段階でwebpackを「全部入り」ツールと考えるには時期尚早なので実際に触りながら掴んでいきたい。
webpackの概要
webpackの全体像をつかむために調べた記事。まずはこのスライドから。
※参考：なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? -
このスライドの「ハァ？」というリアクションはとても共感できるw
わからない言葉の説明の中にわからない言葉が数珠繋ぎになる感覚。前にJSフレームワークを調べているときにもこんな気分になった。
でも、webpackでできること…
webpackの具体的な用途
● pug(Jade)やHAML、EJSといったテンプレートエンジンのコンパイル
● SASSなどのCSSプリプロセッサのプリコンパイル
● TypeScriptなどのAltJSのトランスパイル
● Linterを用いた、Javascriptの構文チェック
● AngularやReact、Vue(Vue-cli)といったJSフレームワークの実行 ...etc
これすごくない！？これ一つであれもこれもそれもできちゃうんです！とジャパネットたかたさんばりに叫びたくなる。
次。
どんなもの？
今回使うライブラリは下記のような構成にしてみます。
・npm : Node.js側のライブラリ（開発ツール）の管理
・Bower : フロントエンド側のライブラリの管理
・Gulp : タスクランナー
・Webpack : モジュールバンドラー。フロントエンドのJSファイル生成。
この記事ではwebpackやNode.jsに関係するキーワードが一望できる。たくさんあるけど、これから一つずつ紐解いて体験していこうと思う。
※2019/06/30追記：
一方で、webpackについては本来のモジュールバンドラとしての機能だけで捉えた方がいいという記事もあった。
※参考：Webpack の考え方について - mizchi's blog
Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。
・ES Modules のエミュレート
・node_modules のリンカ
・拡張子ごとの変形
webpackを「銀の弾丸」のように捉えるのではなく、自分がやりたい機能がwebpackと他の手段、どちらが適切なのかを見極めていきたいと思う。
webpackとその他のツール
webpackに関係するその他のツールについての記事。
パッケージ管理ツール「npm」
Node Package Managerの略。Node.jsのパッケージ管理。
※参考：便利なパッケージ管理ツール！npmとは【初心者向け】 | TechAcademyマガジン
フロントエンド側の管理ツール「Bower」
一方「Bower」は非推奨？npmに統合？え？え？
※参考：bowerが非推奨になったので別れを告げることを決意した - Qiita
タスクランナー「Gulp」
なるほど。これでSassとかをコンパイルするわけか。
※参考：絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順 - ICS MEDIA
テンプレートエンジン「pug」
webpackでpugをコンパイルする！
※参考：webpackだけでpugをビルドする環境を作る - Qiita
もう一つのテンプレートエンジン「EJS」
Codepenになかったので自分はよく知らなかったんだが、記法的にはHTMLとJSが組み合わさった感じで理解がしやすい。
※参考：EJSの使い方！静的なHTMLサイトで「共通パーツ」と「変数」を使おう | HPcode
AltCSSはSCSS、AltJSはTypeScriptとこちらも記法がCSS、JSに似たものが主流になりつつあり、EJSもそうなるのではないかな。
webpackでEJSをコンパイルする！
※参考：webpackで静的サイトジェネレータ(EJS編) - Qiita
AltCSS「SCSS」
webpackでSCSSをコンパイルする！この記事では導入手順の動画付き！
※参考：最新版で学ぶwebpack 4入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
モジュールの図解もイメージできてわかりやすい。
AltJS「TypeSctipt」
webpackでTypeScriptをコンパイルする！
※参考：Webpack・TypeScript入門 - Qiita
ESコンパイル「Babel」
最新のESの記述をJSにコンパイルする「Babel」
※参考：【５分でなんとなく理解！】Babel入門 - Qiita
webpackでBabelを実行！
構文チェッカー「eslint」
カッコ漏れなどデバッグに使える。
webpackでeslintの構文チェック！
※参考：eslint で構文チェック (Webpack) - Qiita
webpackとgitの連携
この方法でコンパイルからgitでのアップまでをシームレスに行える？？
※参考：[備忘録] ソース管理メモ（webpack, SourceTree, git） - Qiita
SPAを作るフレームワーク「Vue.js」
Vue.jsってcdnリンクでもすぐ始められるんだけど、webpackで構築するのが本来の方法かな。
※参考：Webpackで始めるVue.js - log.pocka.io
コンポーネント関係。
※参考：【2018年】Webpack4でVue.js単一ファイルコンポーネントの作り方 - Qiita
最後に
いやー、実にいろんなことができるwebpack。というか、この記事で取り上げたキーワードはフロントエンド 系の記事で腐るほど目にしてきたのだが、あまりにも種類が多くて理解ができていなかった。それらのワードの中央に「webpack」があってマインドマップ状に繋がっているのではないか、というイメージがようやくできたので、まとめてみました。これから実際に触れて体験を重ねていきたく思います。それではまた！！
※2019/06/30追記：
マインドマップのように中心に位置しているとは言い切れないことも知ったので、これから一つ一つの機能や位置付けを実際に手を動かして実感しながら理解していきたく思います。
※参考：Web開発環境の記事まとめ
qiita.com
*1:さらにサーバサイドまで視野を広げるとCMS、ECサイト、会員サイトなどを作るためのサーバサイド言語（PHP、Rubyなど）、フレームワーク（Laravel、Ruby on Railsなど）、DB（SQL）、ローカル環境（Dockerなど）の知識が必要になってくる
