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

このコースではWebpackを使ったフロントエンドの開発環境の構築方法について学んでいきます。また、コースの中ではBabel、Eslint、Sassなどの開発現場でよく使われる機能についても併せてご説明しています。

What you'll learn:

• こちらのコースではフロントエンド開発を効率化するための環境設定を行います。
• Webpackの設定方法について論理立ててご説明します。
• Webpackでなんとなく使っている設定値についてわかりやすく学びます。
• Babel7の実践的な設定について学びます。
• Eslintの実践的な設定について学びます。
• Sass、PostCSSを連携して効率的なスタイルの記述ができる環境を構築します。

/**

* 無料コースについてはUdemyの方針で質問への回答ができなくなりました。

*大変申し訳ございませんが、ご理解の程よろしくお願い致します。

*/

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

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

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

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

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

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

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

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

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

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

Webpack4｜Babel7｜Eslint｜Sass｜PostCSS

- このコースで扱う言語

JavaScript（メイン）｜HTML｜CSS

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