現役エンジニアのためのWebpack環境構築入門 with Babel｜Sass｜Eslint

プログラムの開発を行う上で、一番最初のハードルとなるのが開発環境の設定です。

このコースではフロントエンドのWebpack環境設定方法についてご説明します。

Webpackは一般的に比較的大規模なプロジェクト（Webアプリケーション、主にシングルページアプリケーション）のビルドを行う際に使用します。

Webpack開発環境の設定方法を知っていると以下のメリットがあります。

新しいプロジェクトに触れる際に、そのプロジェクトの特性を理解できる。

新しいプロジェクト（ソースコード）を理解する上で有用なのが、開発環境の設定ファイル（webpack.config.js、postcss.config.js、.babelrc、.eslintrc、package.jsonなど）です。大規模なプロジェクトになってくるとソースコードを端々まで読むことは不可能です。そんな時でも設定ファイルの読み方がわかると、そのプロジェクトがどのような仕組み（フレームワーク）で動いているのか、どのように修正・記述を行うべきなのかという手掛かりを設定ファイルから読み取ることができます。また、Githubなどで新しいプロジェクトに触れる際にも設定ファイルを読むと、どのようなライブラリを使っているのか等を知るうえで大変有用です。

プロジェクトのビルドの自動化を進めることで開発の効率化を行えます。

一度設定ファイルを記述しておけば、後はPCが自動で行ってくれます。また、後のプロジェクトでも同様のファイルを再利用することができるので、そのプロジェクトの自動化だけでなく、あなたの開発人生を効率化することができます。　また、基礎知識があれば他人が書いた設定の修正も容易に行えるようになります。

※また、ビルドツールの記述方法はある程度パターン化されているため、メジャーなものを学んでおくだけで、まったく知らない状態とは理解する速度が大きく異なってきます。

– このコースで出てくるツール

Webpack4｜Babel7｜Eslint｜Sass｜PostCSS

– このコースで扱う言語

JavaScript（メイン）｜HTML｜CSS

※このコースは完全な初心者の方には難しいです。他の方が出している入門編レベルの講座を受けてからこのコースにトライしてみてください。