はじめまして、ヨノと申します。
私は、大学時代に独学でプログラミングを学び、ソシャゲ・SaaS開発などを経て、現在はフリーランスエンジニア(フロントエンド、バックエンド両方)をやっています。
ReactやVue.js、TypeScriptなどの普及により、フロントエンドエンジニアに求められるスキルの幅も広くなってきました。今では単にHTML / CSS / JavaScript だけでは不十分でしょう。
フロントエンドエンジニアであれば、少なくともWebpackの知識はもっておいた方が良いと思います。
そこで今回は、「Webpackを学びたい」、「フロントエンドエンジニアとしてスキルアップしたい」けど
- 「どんな教材を選べば良いかわからない...」
- 「自分のスキルにあった教材を知りたい!!」
といった疑問をお持ちの方に、UdemyでWebpackを学べるおすすめ講座を紹介していきます!!
目次
Udemyとは?
Udemyとは色んな分野のトップ講師の動画を購入できるプラットフォームで、特に「プログラミング」の分野は充実しています。
Udemyの特徴
- PCの画面や資料を映しながら説明してくれるのでわかりやすく、書籍より早く学べる
- 講師に質問でき、他の人の質問とその回答も見れる
- スマホでも見れるので、スキマ時間を活用できる
- 復習として2周目、3周目するときは、倍速再生を使うことで効率が上がる
- 満足できなかった場合、30日以内であれば返金してくれる
満足できなければ返金してもらえるので、お金を気にせずに、気になるコースをどんどん受講してスキルアップできるわけです!!
Webpackとは?
モジュールハンドラーと言われるツール。
モジュールハンドラーとは複数のファイルを束ねてブラウザで実行可能なJavaScriptファイルを出力してくれるツールのこと。
例えば、Reactでアプリケーション開発をしていると沢山のファイルにソースコードを書くことになるのですが、それらを1ファイルにまとめてブラウザで動くようにしてくれます。
Webpackの便利なところは、ローダーやプラグインを追加するとファイルをまとめるときに色んな便利処理(ファイルを圧縮して容量を減らしたり、sass/scssをcssへ変換したり)をすることができる点です。
WebpackやbabelなどJavaScript関連の技術について知りたい人は、JavaScript初心者向け関連ツール・技術まとめを読んでみてください。全体的に解説しているのでそれぞれの技術の関係を理解するのに役立つはずです。
UdemyのおすすめWebpack講座
【はむ式】モジュールバンドラー webpack を1日で習得!フルスクラッチでインストールからカスタマイズまでを理解する
コース時間 | 6時間 |
評価 | ☆4.2(2021/02/03現在) |
受講者数 | 2,022人(2021/02/03現在) |
講師 | 組み込みソフトウェア、SMSCサーバ、DSP、ウェブアプリケーションなど 幅広い開発経験のあるエンジニア。 |
対象者 | 基本的なHTML/CSS/JavaScriptの知識がある人 Reactを題材しているので、Reactの知識があると尚良い。 |
コース内容
本コースは、Reactを題材にして、各種形式のモジュールをローダー(babel/css/sass/html/eslint)やプラグイン(JS圧縮のカスタム/CSSのファイル分離と圧縮)などを駆使してwebpackでバンドルする方法をハンズオン形式で解説します。そして、修了する頃には、ご自身でwebpackの設定が自在にできるようになるというのがゴールとなります。
コースで書いたコードは、GitHubに完全公開しており、動作確認の取れているコードを配布していますので、 特に、webpack.config.jsの内容を見ただけでアレルギーが出てしまうような方には 是非本コースでwebpackの設定に慣れていただいて、 今後はご自身のプロジェクトで率先して設定の方を進められるようになって頂きたいという情熱で本コースを作成しました。
本コースは、 入門編、ローダー編、プラグイン編、そして、落ち穂拾い編の4つのセクションで構成されています。
入門編では、webpackが一体どういうものなのかについての大まかな概念を学習します。入門とはいっても、実際にいきなりコードを書いていただきますが、かなり業務に活用できるような実践的な内容にしています。
webpackの設定自体は難しいことはあまりなくて、どちらかというと、この後に続く、 ローダー編、とプラグイン編で 細かな設定を行うことが、いわゆるwebpackの設定だと思われがちなんですけれども、 実は、本コースの入門編でしっかり概念を身に付けることができれば ほぼほぼwebpackについての本質は理解できたも同然ということになります。 あとは、以降のローダーとかプラグインといった webpackに関する枝葉の機能を どれだけ使いこなすことができるのかというというところが 実際の現場で問われる課題になってきますが、 この部分はあくまで、扱っている案件、プロジェクトの要件に沿って 適宜、選んでいく部分になりますが、 本コースではいわゆるフロントエンドアプリケーションとして 概ね導入されるであろう有名なローダーやプラグインについて紹介していますので 実際に動画を通じて、なるほど、こういう手順で導入していくんだな! っていう感じで、流れを掴んでいただければ良いかなと思います。
最後に、落ち穂拾い編です。 これは、いわば、応用編のようなセクションになります。 ローダーやプラグインには分類されない、ソースマップの導入のこととか、あるいは、 単純に1つのローダーやプラグインを導入したら終わり!というものではなくて、 ローダーとプラグインを両方を複雑に絡めて、導入することが必要となるeslintの導入などを 扱っているセクションになります。 といった、全部で、約6時間、つまり、1日で習得できるコースとなります。
いくつかプレビュー動画をご覧いただけますので是非ご覧になってください。動画の内容はもちろん、僕のレクチャースタイルなどをご確認いただけますので、是非ご覧になってください。プレビューを観るのはタダですので!
では、コースの中でお会いできるのを楽しみにしています!

設定方法や別で調べる予定だったeslintについても知ることができたので非常に満足です!


講座のリリースが少し古いので、パッケージのバージョン等自分で気にしなくてはいけない時もありますが、そのおかげでバージョンへの意識ができ、逆に力がついた気がします。
お世話になりました!
こんな方におすすめ
- Webpackの全体像を理解したい人
- WebpackでReactの開発環境を構築できるようになりたい人
- Webpackの主要なローダー(babel/css/sass/html/eslint)とプラグイン(jsやcssの圧縮)の設定方法を学びたい人
↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓
webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜
コース時間 | 3.5時間 |
評価 | ☆4.7(2021/02/03現在) |
受講者数 | 366人(2021/02/03現在) |
講師 | 外資デジタルマーケティング企業の現役フロントエンドエンジニア |
対象者 | 基本的なHTML/CSS/JavaScriptの知識がある人 |
コース内容
コースの特徴
- webpack の基礎から応用までを短時間でしっかり学べます。
- 実用に足るフロントエンド開発環境をハンズオン形式で構築していくため、このコースで身につけた知識を実務でそのまま活用できます
- 1つのレクチャーの時間は約5~6分(最長でも10分程度)です。そのため、学習の集中力を維持しやすいですし、レクチャーの復習もし易くなっています。
- レクチャー毎のサンプルコードをダウンロード可能です。学習の助けになるコメント付きのサンプルコードも提供します。
また、このコース内に出てくる以下に関しては、全て詳細を解説をしています。
- webpack の様々の機能を利用するためにインストールするパッケージ
- 設定ファイル
- 設定ファイルに追加する設定
そのため、受講者の方が以下のような状態に陥ることはありません。
- なぜこのパッケージを利用するのかがわからない
- この設定ファイルが、何のための設定ファイルなのかがわからない
- 設定ファイルに書かれている設定の内容がわからない
コースの詳細
「コース概要」というプレビュー動画を用意しているので、まずはそちらをご覧ください。

さらにコードの一行一行もしっかり解説しておりエンジニア歴が浅い自分でもスムーズに理解を深めることができました。
今までのwebpackをコピペで済ませていたものを理解することができてよかったです。

今までなんとなく利用していたwebpackを理解しながら使えるようになりました。

こんな方におすすめ
- 雰囲気で Webpack を利用しており、Webpack の理解を深めたい方
- 自分以外が書いた Webpack の設定をコピペして利用しており、設定の内容がよくわかっていない方
- Webpack を学習したり、公式ドキュメントを読んだが、難しくて挫折した方
↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓
Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win)
コース時間 | 8時間 |
評価 | ☆4.5(2021/02/03現在) |
受講者数 | 1,320人(2021/02/03現在) |
講師 | UI/UXデザイナー、フロントエンド・バックエンドエンジニア等 幅広いロールで活躍しているフリーランス。 |
対象者 | 基本的なHTML/CSS/JavaScriptの知識がある人 React/Vue.js/TypeScript いずれかの知識が少しでもあると尚良い |
コース内容
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自体は楽しくありません...。
退屈な繰り返し作業を無くすための退屈な作業だとお考えください。
ただし、一度覚えてしまえば、一度設定してしまえば、その後の作業効率とメンテナンス効率には圧倒的な差が出ます。
ウェブデザイナーがクリエイティブに専念し、ウェブサイト管理者は安心して仕事ができるよう、作業はできるだけ自動化してしまいましょう!

用語一つ一つに対する説明や「なぜ必要なのか」ということも掘り下げて説明していただけるのでとてもわかりやすかったです。
Q&Aも質問をすればきちんと反応してくださるようなので悩まれている方は講座の購入をお勧めします。

Webpackについては全く知識のない状態でしたが、丁寧かつ要点を繰り返す解説で、スムーズに進めることができました。
また、PugやSass、各JavaScriptフレームワークの導入方法などもあり、それらも学んでいきたいと意欲を持つこともできました。
各章の最後に要点をまとめたテキストの解説があるのもありがたかったです。
忘れたときには何度も振り返ってみようと思います。
こんな方におすすめ
- React / Vue.js / TypeScript の環境設定方法を学びたい人
- Webpackの主要な設定方法(画像 / CSS / ES6 / React / Vue / Typescript)を学びたい人
↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓