webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜

webpack(v4.43.0)の基礎から応用までをサクッと学べるコースです。実用に足るフロントエンド開発環境をハンズオン形式で構築していくため、このコースで身につけた知識を実務でも活用できます。コース内で利用しているコードはすべて公開。

4.70 (254 reviews)
Udemy
platform
日本語
language
Web Development
category
webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜
1,134
students
3.5 hours
content
Aug 2020
last update
$19.99
regular price

What you will learn

webpackを利用したフロントエンド開発環境の構築方法

webpackの基礎(webpackが何をするツールなのか、webpackの主要な機能や用語に関して)

webpack の様々な機能やプラグインなどを利用して開発環境を整える方法

webpackを利用して最適化したファイルを出力する方法

Babelとwebpackを連携して、JavaScriptのコードを様々なブラウザで動作するコードに変換する方法

コードの品質を保つためにESLintとPrettierとwebpackを連携して、JavaScriptのコードを検証、整形する方法

webpackでCSS(SassやPostCSSなど)を扱う方法

webpackで画像を扱う方法

Why take this course?

webpack(v4.43.0)の基礎から応用までを学習し、実用に足るフロントエンド開発環境を構築できるようになるコースです。


## コースの特徴

  • webpack の基礎から応用までを短時間でしっかり学べます

  • 実用に足るフロントエンド開発環境をハンズオン形式で構築していくため、このコースで身につけた知識を実務でそのまま活用できます

  • 1つのレクチャーの時間は約5~6分(最長でも10分程度)です。そのため、学習の集中力を維持しやすいですし、レクチャーの復習もし易くなっています。

  • レクチャー毎のサンプルコードをダウンロード可能です。学習の助けになるコメント付きのサンプルコードも提供します。

また、このコース内に出てくる以下に関しては、全て詳細を解説をしています。

  • webpack の様々の機能を利用するためにインストールするパッケージ

  • 設定ファイル

  • 設定ファイルに追加する設定

そのため、受講者の方が以下のような状態に陥ることはありません。

  • なぜこのパッケージを利用するのかがわからない

  • この設定ファイルが、何のための設定ファイルなのかがわからない

  • 設定ファイルに書かれている設定の内容がわからない


## コースの詳細

「コース概要」というプレビュー動画で、このコースの以下の点について説明をしていますので、まずはそちらをご覧ください。

  • このコースで構築する開発環境について(何ができる開発環境なのか)

  • コース構成(このコースの各セクションで学習すること)

  • サンプルコードについて

  • このコースが想定している前提知識や前提条件

  • このコースの注意点

また、上記以外のプレビュー動画も用意していますので、それらもご覧になってから受講をするかどうかの判断をしていただければと思います。

Content

はじめに

コース概要
Udemyでの学習の進め方
質問をする前に
サンプルコード(GitHubリポジトリのURL)
コメント付きのサンプルコード(zip配布)
【補足】講座内のコードと提供しているサンプルコードの差分について(動作は変わらないです)
webpackの公式ドキュメントに関しての注意点

webpackの基礎を学習する

webpackとは?
webpackに関する用語を理解する
ローダーとプラグインに関して
webpackを利用して得られるメリット

webpackを利用してみる

セクション概要(webpackを利用してモジュールをバンドルしたファイルを出力する)
プロジェクトの設定情報が記述された package.json ファイルを生成する
webpackとjqueryとvelocity-animateをインストールする
webpackをnpm scriptsで実行できるようにする
webpackの設定ファイル(webpack.config.js)を作成する
モジュールを作成する
エントリーポイントを作成し、モジュールを読み込む
webpackを実行して出力されたファイルを確認する

webpackの様々な機能やプラグインなどを利用して開発環境を整える

開発用と本番用の設定を分ける
console.logを削除した本番用のファイルを出力する
ソースマップを生成してデバッグに役立てる
出力先をクリーンアップしてからファイルを出力する
html-webpack-pluginでwebpackから出力されたファイルを読み込んだHTMLを出力する
webpack-dev-server(開発用サーバー)を導入する
複数のエントリーポイントから複数のファイルを出力する

最適化

最適化をするために現時点で出力されているファイルの問題点を理解する
splitChunksPluginで最適化したファイルを出力する
splitChunksPluginで最適化したファイルを出力する(応用編)
ブラウザキャッシュ対策

BabelでJavaScriptのコードを様々なブラウザで動作するコードに変換する

JavaSciptの仕様とJavaScriptを利用した開発で発生する問題について理解する
Babelとは
babel-loaderでES2015(ES6)の構文で書かれたコードをES5のコードに変換する
【補足】ローダーを利用する様々な書き方に関して
ES2015以降の構文で書かれたコードを指定したブラウザで動作するコードに変換する
指定したブラウザで必要なポリフィルのみを取り込む

ESLintとPrettierでJavaScriptのコードを検証、整形をしてコードの品質を保つ

eslint-loaderでJavaScriptのコードを検証する
PrettierでJavaScriptのコードを整形する
【補足】eslint-loader の使い所に関して

webpackでCSSを扱う

sass-loaderとcss-loaderとstyle-loaderでSassをバンドルする
mini-css-extract-pluginでバンドルされるCSSを個別のCSSファイルに抽出する
post-css-loaderでベンダープレフィックスを自動で追加する
optimize-css-assets-webpack-pluginで最適化したCSSを出力する

webpackで画像を扱う

file-loaderで画像を出力する
html-loaderでHTML上の画像もfile-loaderで扱えるようにする
image-webpack-loaderで画像を圧縮する

Screenshots

webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜 - Screenshot_01webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜 - Screenshot_02webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜 - Screenshot_03webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜 - Screenshot_04

Reviews

Ryomann
September 7, 2022
とても効率よく学べる。 簡潔で分かりやすいに尽きる。 後はドキュメントを見て自分でオプションを付けたり、プラグイン、ローダーを導入できる。 でも受ける前に、webpack_config.jsの書き方をサラッとでも見ておくと吸収量が違ってくる。 大変満足したが、改善を強いて言うなら 実際実務で使われているものと今回の導入したものがどのくらい差があるのかを知りたかった。 次は一発で終わるコマンドをたたかずに、reactの環境構築をしていくのが無難かなと思っています。
安部英子
August 8, 2022
説明はとてもわかり易く、抑えておきたい情報を短い時間にしっかり入れ込んであったと思います。 2022年08月現在に応用するため、pnpm、webpack5でうまくいくか調べながら進めてみました。 これは講師のせいではなく私の理解不足ですが、eslintが変わっていて解決できませんでした。もし講座に手を入れられることがあれば、このあたりを解決していただけたらありがたいです。
大門義昭
May 4, 2022
今年の2月からプログラミングの学習をし始めた私のような独習者が、progateをやっただけでは容易には知りえないような実践的な内容で、とても参考になりました。おかげさまで一皮剥けたような気がします。ご指定のバージョンで実行するだけでなく、講師のご著書を傍らに、最新のnode.jsとwebpackでも実行可能なようにソースコードを書き直してもみましたが、良い勉強になりました。引き続き精進して参りたいと思います。素晴らしいご講義、ありがとうございました。大変能力のお有りになる方のご講座を受講でき、大当たりでした。
ozy
August 7, 2021
create-react-appは便利なのですが、その反面どこからどこまではreactの機能でどこからがwebpackの機能なのか分からず、モヤモヤしながら使っていましたが、この講座を聞いてスッキリ理解することができました。短時間で基礎から実践的な内容まで学習でき、すごくいい講座だと思います
kebo
July 11, 2021
githubに動画ごとのソースが用意されており、利用するモジュールもバージョン指定しているため、動画の通り再現できストレスなく進められました。 コメント付きのソースがいただけた点もとても役に立ちました。わからないことがあった場合に復習できて頼もしいです。
中村
June 27, 2021
普段はバックエンドを触っています。 モダンなフロント環境で開発する必要が出たのでwebpackについてもネットで色々調べていました。 しかし、ネットの記事でwebpackはJSファイルを1つにまとめるものと説明されてもいまいち便利さが伝わってこず、腑に落ちませんでした。 たったそれだけのことをなんでそんなにありがたがって使っているんだろう、と。 しかし、こちらの講座で手を動かしながら利用してみることで実際にwebpackの便利さを体感することができました。 また、初歩的な質問にもとても丁寧に回答していただけました。 webpackについて分かりやすい説明をググりまくるよりこちらの講座を受講することをオススメします。
中山
June 4, 2021
実務で使えるwebpackの基本技術を効率的に理解する事が出来ました!webpackを使う上での問題点やその解決法、応用のケースや、用途(チームor個人開発)に合わせた使い方も説明に含まれており、webpack入門者として非常に参考になりました。
Kohei
March 27, 2021
JavaScriptプロジェクトで当たり前のように使われているwebpack。今までなんとなくで使っていましたが、本腰を入れる必要があり本講座を受講しました。webpackの役割や設定のほか、ハンズオン形式で進められて、すぐにでも活用できそうです。 また、babelやファイルローダーなど、現場でよく使われるパッケージについても関連して学習できました。各種プラグインを含め、体系的に理解できたので、これからもバリバリJavaScriptな案件で活躍できそうです!
浅川玲音
January 16, 2021
各用語の解説(それは何か、具体例、メリット)を丁寧に教えて下さるので、今までなんとなく使っていた言葉やツールについて理解が深まりました。 <S5終了時に追記→>各トピックが短く纏まっているので飽きずに見続けられています。コードと実行結果だけでなくバンドルの構成図も示して頂けるので理解しやすいです。
佐藤正昂
January 10, 2021
若干、わかんないところもあったけど、ざっくりと理解できたし、あとは実務にあたってWebpackの設定とかをのぞいてみて、理解していくのがいいのかなと思った。 あと、動画の長さがちょうどよくて助かった。 Webpackおもしろいなとか最初は思ったけど、途中からかなり退屈で、長時間勉強するのきつかった。 なので、Webpackの動画を全部で3.5hourにしてくれてありがたかった。 ひとつひとつの動画も平均5分程度と短くてよかった。
Kh
September 11, 2020
非常に良い内容でした。 一つ一つの動画に伝えたいことを完結に まとめていてとても理解しやすかったです。 さらにコードの一行一行もしっかり解説しており エンジニア歴が浅い自分でもスムーズに理解を深める ことができました。 今までのwebpackをコピペで済ませていたものを 理解することができてよかったです。

Charts

Price

webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜 - Price chart

Rating

webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜 - Ratings chart

Enrollment distribution

webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜 - Distribution chart

Related Topics

1318454
udemy ID
8/11/2017
course created date
8/26/2020
course indexed date
Bot
course submited by