Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win)

2020年1月17日 Webpack 5 に対応しました。

Webpackという名前を聞いたことがあるでしょうか。
Webpackは、Javascriptを結合するためのツールなのですが、それ以外の目的で広くウェブサイト制作の現場で使用されています。
それは「作業の効率化」です。

Webサイトを構成する要素はHTML / CSS / Javascript / 画像 など様々ですが、それぞれの作成に便利なツールがオープンソースの世界には沢山あります。
そういったツールをうまく組み合わせると驚くほど生産性が上がるだけでなく、コードのメンテナンス性も格段に向上します。

各ツールを個別に使っても問題はないですが、最終的なアウトプットを出力する手順が煩雑になりますし、個別のツールに関しての知識が前提となるのでチーム開発に向いていません。

複数のツールを取り込みつつ、それらを一箇所で管理することで、プロジェクト全体の見通しが良くなり、自分自身もチームのメンバーも素早くミスなく行動することが可能となります。そのための管理ツールがWebpackです。

ただ、Webpackの基本はJavascriptであり、すべてのファイルがJavascriptのモジュールとして扱われます。そうです。HTMLもCSSも画像ファイルもすべてがJavascript。あまり馴染みのない概念ですよね。

この壁を乗り越えてWebpackが使えるようになれば、SassやPug、ES6やReact / Vue / Typescriptなどの強力なツールを自由に取り込むことができます。

残念ながらWebpackの公式サイトだけを見ると、このツールがウェブデザイナーの私にとってどんなメリットがあるのかが伝わってきません。Webpackは非常に柔軟で、ウェブサイト制作以外にも様々なケースで利用されるため、ウェブサイト制作者だけを対象としてはいないからです。

この講座では、Webpackを使うことでWebサイト制作にどのようなメリットがあるのか詳しく解説していきます。単にWebpackの使い方を説明するのではなく、ウェブ制作の現場で実際に使えるメソッドの提供を目指しています。具体的には下記の内容が含まれます。

• HTMLの管理を楽にする

• CSSを効率的に書く

• 画像の軽量化を自動化

• 新しいJavascriptで楽をする

• 最新の技術を取り込む (React / Vue / Typescript など)

• 本番に近いテスト方法

また、制作現場で必須になるであろうGitと、Webサイトの公開方法についても解説しています。

• Gitの使い方とGithubとの連携

• Netlifyを使ったウェブサイトの公開方法

便利なWebpackですが、正直なところWebpack自体は楽しくありません...。
退屈な繰り返し作業を無くすための退屈な作業だとお考えください。

ただし、一度覚えてしまえば、一度設定してしまえば、その後の作業効率とメンテナンス効率には圧倒的な差が出ます。
ウェブデザイナーがクリエイティブに専念し、ウェブサイト管理者は安心して仕事ができるよう、作業はできるだけ自動化してしまいましょう！