webpack

webpackの学習におすすめの動画コンテンツを紹介

webpackは、複数のファイルを1つにまとめて出力してくれるモジュールバンドラでフロントエンド開発の現場で利用されます。

主な用途は、JavaScriptファイルをバンドル(複数のファイルをまとめる)ですが、SASSのコンパイルや画像の圧縮などGulpで行っていたこともwebpackでできるため、移行する人も多いです。

そんなwebpackですが、独学で学ぶ際に参考となる書籍や動画が少ないです。そこで、こちらの記事ではwebpackの学習におすすめの動画コンテンツについてご紹介します。

最短3ヶ月でエンジニアになれる!?
転職成功率98%のプログラミングスクール
DMM WEB CAMP

先輩くん
先輩くん
オンライン完結で24時間どこでも学習することができるよ!
後輩ちゃん
後輩ちゃん
未経験から憧れのエンジニアになるぞ〜!!
簡単30秒で無料相談申し込み

おすすめ動画コンテンツ

私がおすすめする動画コンテンツはUdemyです。
実際にUdemyを利用して実感した魅力的なポイントは、以下の通りです。

Udemyのここが魅力

  • 新規学習者向けのセールで格安でコースを購入することができる
  • コース購入から30日以内であれば、返金することができる
  • 分からない箇所があれば、コメントで質問することができる
  • プロのエンジニアが教えてくれるため、実践的な講義を受けられる

後輩ちゃん
後輩ちゃん
Udemyすごい。。
先輩くん
先輩くん
僕も新しい技術を学びたい時には、必ずと言っていいほど利用しているよ!

モジュールバンドラー webpack を1日で習得!フルスクラッチでインストールからカスタマイズまでを理解する

動画情報
作成者はむさん
学習時間6.5時間
レビュー
(Udemy)
(353件)
学習内容

  • webpackの導入方法
  • webpackの設定方法

動画の構成

  • 1章:はじめに
  • 2章:入門編
  • 3章:ローダー(Loaders)編
  • 4章:プラグイン(Plugins)編
  • 5章:落穂拾い編
  • 6章:はむさんの落穂拾い
  • 7章:ボーナスセクション

レビューちゃん
レビューちゃん

9月からHTML、CSSを学び始めた初学者です。そんな私でも大変わかりやすくつまづく事無く進めることができ、成長を実感できて達成感が非常に高い良い教材でした。次はreactに挑戦してみようと思います。ありがとうございました。

引用元:Udemyレビュー
レビューくん
レビューくん

とても丁寧な解説でわかりやすかったです。予期しないエラーが出た場合の対応はどのようにしているのか、ドキュメントはどのように追って実装しているのかを動画に残してくださっており、たいへん参考になります。

引用元:Udemyレビュー

Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win)

動画情報
作成者Shunsuke Sawada
学習時間8時間
レビュー
(Udemy)
(293件)
学習内容

  • Webpackを使って効率的にウェブサイトを制作する方法
  • Pug / Sass / ES6 等を使用したビルド方法
  • React / Vue / Typescriptをウェブサイトに取り込む方法
  • 画像ファイル圧縮の自動化
  • GitとGithubの使い方
  • GithubとNetlifyを連携させた自動リリースの手順

動画の構成

  • 1章:Webpack講座の概要
  • 2章:GitとGithubを学ぶ
  • 3章:Webpack入門
  • 4章:Webpackの設定ファイルとLoader
  • 5章:Webpackのプラグイン
  • 6章:ファイル構成を整える
  • 7章:画像の読み込み
  • 8章:効率的なHTMLの制作方法
  • 9章:ローカルサーバーを利用した開発
  • 10章:効率的なCSSの制作方法
  • 11章:ES6
  • 12章:コードのデバック方法
  • 13章:画像の最適化
  • 14章:Reactのビルド設定
  • 15章:Vueのビルド設定
  • 16章:TypeScriptのビルド設定
  • 17章:プロジェクトの整理整頓
  • 18章:ウェブサイトのリリース

レビューちゃん
レビューちゃん

webpackの理解が深まりました。 一つ一つのパッケージが動画毎に区切られていて、どういった役割があるかも理解できました。 また、質問対応も丁寧に回答いただけて感謝しています。 ありがとうございました!

引用元:Udemyレビュー
レビューくん
レビューくん

非常に丁寧でわかりやすく説明されていました。 動画収録時にはなかったWebpack5の補足情報も追加されているなど細やかな内容でした。 Webpackやgitの使い方ももちろんですが、実務における効率化を意識した考え方や整理の仕方など、かなり勉強になる教材でした

引用元:Udemyレビュー

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

動画情報
作成者shohei kadooka (soarflat)
学習時間3.5時間
レビュー
(Udemy)
(191件)
学習内容

  • webpackを利用したフロントエンド開発環境の構築方法
  • webpackの基礎(webpackが何をするツールなのか、webpackの主要な機能や用語に関して)
  • webpackの様々な機能やプラグインなどを利用して開発環境を整える方法
  • webpackを利用して最適化したファイルを出力する方法
  • Babelとwebpackを連携して、JavaScriptのコードを様々なブラウザで動作するコードに変換する方法
  • コードの品質を保つためにESLintとPrettierとwebpackを連携して、JavaScriptのコードを検証、整形する方法
  • webpackでCSS(SassやPostCSSなど)を扱う方法
  • webpackで画像を扱う方法

動画の構成

  • 1章:はじめに
  • 2章:webpackの基礎を学習する
  • 3章:webpackを利用してみる
  • 4章:webpackの様々な機能やプラグインなどを利用して開発環境を整える
  • 5章:最適化
  • 6章:BabelでJavaScriptのコードを様々なブラウザで動作するコードに変換する
  • 7章:ESLintとPrettierでJavaScriptのコードを検証、整形をしてコードの品質を保つ
  • 8章:webpackでCSSを扱う
  • 9章:webpackで画像を扱う

レビューちゃん
レビューちゃん

githubに動画ごとのソースが用意されており、利用するモジュールもバージョン指定しているため、動画の通り再現できストレスなく進められました。 コメント付きのソースがいただけた点もとても役に立ちました。わからないことがあった場合に復習できて頼もしいです。

引用元:Udemyレビュー
レビューくん
レビューくん

実務で使えるwebpackの基本技術を効率的に理解する事が出来ました!webpackを使う上での問題点やその解決法、応用のケースや、用途(チームor個人開発)に合わせた使い方も説明に含まれており、webpack入門者として非常に参考になりました。

引用元:Udemyレビュー

まとめ

今回は、webpackの学習におすすめの動画コンテンツについてご紹介しました。

webpackを習得することで、依存関係のあるモジュールを解決することやファイルを1つにまとめリクエスト回数を減らすことができるようになり、開発効率のアップとシステム性能のアップをさせることができますので、頑張って習得しましょう!

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村