Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win)
4.5 (89 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
729 students enrolled

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

業務で使えるWebpackをGit / Githubと共に学習し、ウェブサイト制作を圧倒的に効率的しよう!テキスト版の補助教材で復習でき、コードはすべてダウンロード可能。React / Vue / Typescriptの導入も解説します。
Bestseller
4.5 (89 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
729 students enrolled
Created by Shunsuke Sawada
Last updated 5/2020
Japanese
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8 hours on-demand video
  • 22 articles
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Webpackを使って効率的にウェブサイトを制作する方法
  • Pug / Sass / ES6 等を使用したビルド方法
  • React / Vue / Typescriptをウェブサイトに取り込む方法
  • 画像ファイル圧縮の自動化
  • GitとGithubの使い方
  • GithubとNetlifyを連携させた自動リリースの手順
Course content
Expand all 84 lectures 08:07:53
+ Webpack講座の概要
5 lectures 25:19
補助教材について
00:17
VS Code のインストールと設定
12:16
ウェブサイトの基本的な構成
09:29
テキスト版教材
00:08
+ GitとGithubを学ぶ
11 lectures 01:24:06
GitのインストールとGithubのアカウント作成
03:52
Windows / TerminalとGitのインストール
02:41
Gitの初期化
05:01
Gitの設定を変更する
06:17
Gitで変更履歴を追加してみる
06:31
SSHを使ったGithubとの連携
13:26
SSHパスフレーズを省略せずにGithubと連携する
18:36
Windows / Gitの初初期化からGithubとの連携まで
13:51
テキスト版教材
00:08
+ Webpack入門
7 lectures 44:49
NVMのインストールに失敗する場合
00:36
Node.jsのインストール
04:00
Windows / Node.jsのインストール
01:12
Webpackを使用した初めてのビルド
06:35
自作モジュールをWebpackでビルドする
13:49
テキスト版教材
00:08
+ Webpackの設定ファイルとLoader
6 lectures 32:54
出力されたJavascriptを使用してみる
03:51
Webpackの設定ファイルを作成する
05:38
css-loaderでCSSを読み込む
09:44
style-loaderでCSSのスタイルを適応させる
08:22
変更内容をGitにコミット
05:11
テキスト版教材
00:08
+ Webpackのプラグイン
4 lectures 23:52
style-loaderの問題点と解決方法
03:06
プラグインをインストールしてCSSを別ファイルに出力する
07:36
プラグインでHTMLを自動生成する
13:02
テキスト版教材
00:08
+ ファイル構成を整える
5 lectures 22:41
不要なファイルを自動的に削除する
05:23
設定ファイルを変更してファイル構成をカスタマイズ
04:28
src と dist のファイル構成に一貫性を持たせる
08:13
ファイル名を変更してさらにメンテナンス性を向上させる
04:29
テキスト版教材
00:08
+ 画像の読み込み
4 lectures 22:02
url-loaderを利用した画像読み込み
11:06
file-loaderを利用した画像読み込み
10:05
file-loaderのnameに使えるオプション
00:43
テキスト版教材
00:08
+ 効率的なHTMLの制作方法
6 lectures 40:26
Pugに必要なパッケージのインストール
12:39
複数のHTMLページを作成する
04:55
テンプレート拡張を利用した効率化
06:34
変数を使ってHTMLをカスタマイズ
08:37
テキスト版教材
00:08
+ ローカルサーバーを利用した開発
4 lectures 17:25
webpack-dev-serverのインストール
11:24
webpack-dev-serverに関するTips
02:15
テキスト版教材
00:08
+ 効率的なCSSの制作方法
3 lectures 31:44
sass-loaderのインストールと設定方法
04:51
Sassの機能紹介
26:45
テキスト版教材
00:08
Requirements
  • Macを中心に説明しますが、Windowsユーザー用に補強ビデオを収録しています
Description

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

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

Who this course is for:
  • Webpackが具体的にどんなツールなのか興味がある人
  • コーディング作業の生産性を上げたい人
  • フロントエンド開発のレベルを上げたい人
  • 繰り返し同じ作業が発生する問題を解決したい人
  • ウェブデザイナーやウェブサイト管理者