【厳選】UdemyでWebpackを学べるおすすめの人気講座

• PCの画面や資料を映しながら説明してくれるのでわかりやすく、書籍より早く学べる
• 講師に質問でき、他の人の質問とその回答も見れる
• スマホでも見れるので、スキマ時間を活用できる
• 復習として2周目、3周目するときは、倍速再生を使うことで効率が上がる
• 満足できなかった場合、30日以内であれば返金してくれる

本コースは、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日で習得できるコースとなります。

いくつかプレビュー動画をご覧いただけますので是非ご覧になってください。動画の内容はもちろん、僕のレクチャースタイルなどをご確認いただけますので、是非ご覧になってください。プレビューを観るのはタダですので！

では、コースの中でお会いできるのを楽しみにしています！

コースの特徴

• webpack の基礎から応用までを短時間でしっかり学べます。
• 実用に足るフロントエンド開発環境をハンズオン形式で構築していくため、このコースで身につけた知識を実務でそのまま活用できます
• １つのレクチャーの時間は約5~6分（最長でも10分程度）です。そのため、学習の集中力を維持しやすいですし、レクチャーの復習もし易くなっています。
• レクチャー毎のサンプルコードをダウンロード可能です。学習の助けになるコメント付きのサンプルコードも提供します。

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

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

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

• なぜこのパッケージを利用するのかがわからない
• この設定ファイルが、何のための設定ファイルなのかがわからない
• 設定ファイルに書かれている設定の内容がわからない

コースの詳細
「コース概要」というプレビュー動画を用意しているので、まずはそちらをご覧ください。

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自体は楽しくありません...。
退屈な繰り返し作業を無くすための退屈な作業だとお考えください。

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

• 【厳選】Udemyで React / React Hooksを学べるおすすめ講座5選
• 【厳選】UdemyでVue.jsを学べるおすすめ講座4選
• 【厳選】UdemyでAngularを学べるおすすめ講座3選