【新刊紹介】『速習 webpack』発売、フロントエンド開発には欠かせないwebpackを徹底解説

　CodeZineに寄稿いただいている執筆コミュニティ「WINGSプロジェクト」代表の山田祥寛さんのKindle本『速習 webpack』が4月27日に刊行されました。

　本書は、基本的なJavaScriptの知識がある方を対象に、フロントエンド開発には必須といえる「webpack」の基本を解説。本文を5つのPartに分けて、サンプルコードとともに詳しく紹介しています。

　「そもそもwebpackとは？」といった概念の説明や、よく使うポイントに絞った解説で、webpackを短期間でマスターできる一冊になっています。

担当編集者からのコメント

　WINGSプロジェクト刊行のKindle電子書籍、6冊目です。

　隙間時間にサクッと学べる手軽本をコンセプトとした「速習シリーズ」を、これまで「速習 Vue.js」「速習 ECMAScript 6」「速習 TypeScript」「速習 ASP.NET Core」と4冊送り出してきました。おかげさまで、いずれもご好評いただき、今回はその速習シリーズの第5弾「速習 webpack」となります。

　内容は、フロントエンド開発には欠かせない「webpack」の解説書です。基本的なJavaScriptの知識がある方を対象に、webpackの基本を短時間で学べるように、コンパクトにまとめて構成しています。

　「webpackとは？」といった概念説明から始まり、ES Modules（注）のおさらいやwebpackを利用するための準備を経て、具体的な内容に入っていきます。豊富なローダー／プラグインの中から、特によく利用すると思われるものをピックアップしています。

　「webpackってよく聞くけど、なにもの？」「そもそもホントに必要なの？」と、ちょっと気になる方のために、冒頭部分を少し覗いてみましょう。

　webpackは、近年、JavaScriptによるフロントエンド開発ではほぼ欠かせないツールとして注目を浴びています。本節では、webpackの基本的な使い方を解説する前にまず、webpackが求められるようになった背景について解説していきます。

　…中略…

　従来、JavaScriptを利用したアプリを実行するには、.htmlファイルで以下のような<script>要素を列挙する必要がありました。

<script src="lib.js"></script>
<script src="app.js"></script>

　lib.jsがアプリの実行に必要なライブラリ、app.jsはアプリ本体のコードとします。<script>要素は順番に実行されるので、lib.js→app.jsの順を変えてはいけません（app.js→lib.jsでは、アプリからライブラリを参照できずにエラーとなります）。

　これはごく単純な例ですが、より複雑なアプリでは利用する.jsファイルも増えます。ライブラリ同士が互いに依存関係を持つのはもちろん、アプリ本体のコードが互いに依存関係にあるような状況も出てきます。

　…中略…

　このような状況で、利用者がライブラリ同士の依存関係を意識してページを記述するのは困難ですし、そもそもJavaScriptの依存関係をHTML側で意識しなければならない、という状態そのものが望ましくありません。

　…中略…

　そこで登場するのが、webpackです。webpackを利用することには、以下のようなメリットがあります。

　いかがでしょうか。さわりの部分だけですが、なんとなく興味がわいてきたでしょうか。「もっと知りたいな」と思われた方はぜひ、続きを読んでみてください。

　短時間で読めるように、なるべくコンパクトに情報をまとめ、図やサンプルコードと合わせて解説しています。

　また、本書掲載のサンプルコードは、サポートサイトからダウンロードできるので、ご活用ください。

一般読者からのコメント（こさのぼさん）

　昨今、Web開発において必須項目となっているwebpackについて「速習」したい人のための凝縮テキストです。最初から最後まで順番に、じっくり読みかつ体で体験（試行）しながら学習を進めれば、最速の効果が得られると思います。

　自分でさまざまな情報を探し、取捨選択しながら学習を進めるのは、今の時代風とは言えますが、効率がよいと言えるか疑問です。

　その点、この本は未経験者にとって頭をフル回転させる必要はありますが、著者に的確にナビゲートしてもらいながらゴールまで最短で独学できます。文章量は少ないですが、確実に汗をかきながら身につける「体で覚える派」の私には最適でした。

　内容ですが、そもそもwebpackとは何かから始まり、必要性（意味）の解説を加えながら、具体的なコード例を中心に進んでいきます。

　私はサンプルプログラムをダウンロードせずに全て手入力して試行するタイプです。本書はもちろん著者サイトからのダウンロードも可能ですが、時間があれば、私のように手入力による試行をお勧めします。

　章ごとの内容については、以下になります。

Part 1　イントロダクション：

　　そもそもwebpackとは何か？図解があるので初心者も理解できます。

Part 2　モジュールハンドラーの基本：

　　他のJavaScript本が無くても必要最低限がわかります。

Part 3　設定ファイルの基本：

　　Node.jsも絡みますが、他の本が無くても進められます。

Part 4、5　ローダーとプラグイン：

　　まさに実用的な内容であり、ここぞ「速習」的な内容になります。上級者はここから読めるのでしょう。しかし初心者でもPart 1から読み進めれば大丈夫です。

　最初、各Partをパラパラと見たときに、凝縮されていて難しいように見えましたが、私の場合、最初から少しずつ少しずつ読み進めて行ったら、自然に最後まで辿り着いた感じでした。不思議です。

　私の場合、Part 1～3の基本部分が大変有効だったと思います。また、著者がこれまでの経験則から「一般的です」「利用すべきです」「慣例です」「実質欠かせない」と会社の先輩のように方向性を諭してくれるのがとてもありがたいです。

　他の「速習」シリーズもそうですが、一読後も、簡易的なリファレンスとしても重宝します。サンプルコードもそうですが、オプション一覧等の表も後で意外と重宝します！ 私はこの本でwebpack技術に関してフライトできました！ 今は「お腹一杯」ですが関連応用技術や他のWeb開発技術をもっともっと取り入れたいと思っています。

仕様

• 書名：『速習 webpack』
• 著者：山田祥寛
• 出版社：WINGSプロジェクト
• 頁数：127ページ
• 定価：454円（＋税）
• 色数：4色
• 刊行日：2018年4月27日

目次

Part　1：イントロダクション

• webpackとは？
• 対象読者
• サンプルプログラムについて

Part　2：モジュールバンドラーの基本

• モジュールの基本
• webpackを利用するための準備
• webpackの基本

Part　3：設定ファイルの基本

• 設定ファイルの骨組み
• 開発サーバーの導入
• 本番／開発モードの選択

Part　4：ローダー

• スタイルシートのバンドル - css-loader／style-loader
• 画像ファイルをバンドルする - url-loader
• フォントファイルをバンドルする - file-loader
• JSON、HTML／XML、CSV／TSVなどのデータをインポートする
• 最新のECMAScriptを利用する - babel-loader
• TypeScriptのコードをコンパイルする - ts-loader
• Sassのコードをコンパイルする - sass-loader
• JavaScriptの「べからず」なコードを洗い出す - eslint-loader

Part　5：プラグイン

• 複数のエントリーポイントを処理する
• トップページを自動生成する - html-webpack-plugin
• 出力先フォルダーのクリーンアップ - clean-webpack-plugin
• バンドル時にコードを圧縮する - uglifyjs-webpack-plugin
• スタイルシートを圧縮する - optimize-css-assets-webpack-plugin
• 設定ファイルを分離する - webpack-merge