現役エンジニアのためのWebpack環境構築入門 with Babel|Sass|Eslint

このコースではWebpackを使ったフロントエンドの開発環境の構築方法について学んでいきます。また、コースの中ではBabel、Eslint、Sassなどの開発現場でよく使われる機能についても併せてご説明しています。
Rating: 4.7 out of 5 (72 ratings)
1,413 students
現役エンジニアのためのWebpack環境構築入門 with Babel|Sass|Eslint
Rating: 4.7 out of 5 (72 ratings)
1,413 students
こちらのコースではフロントエンド開発を効率化するための環境設定を行います。
Webpackの設定方法について論理立ててご説明します。
Webpackでなんとなく使っている設定値についてわかりやすく学びます。
Babel7の実践的な設定について学びます。
Eslintの実践的な設定について学びます。
Sass、PostCSSを連携して効率的なスタイルの記述ができる環境を構築します。

Requirements

  • JavaScript、HTML、CSSについて入門レベルのコースを修了していること。
Description

プログラムの開発を行う上で、一番最初のハードルとなるのが開発環境の設定です。

このコースではフロントエンドのWebpack環境設定方法についてご説明します。

Webpackは一般的に比較的大規模なプロジェクト(Webアプリケーション、主にシングルページアプリケーション)のビルドを行う際に使用します。


Webpack開発環境の設定方法を知っていると以下のメリットがあります。

新しいプロジェクトに触れる際に、そのプロジェクトの特性を理解できる。

 新しいプロジェクト(ソースコード)を理解する上で有用なのが、開発環境の設定ファイル(webpack.config.js、postcss.config.js、.babelrc、.eslintrc、package.jsonなど)です。大規模なプロジェクトになってくるとソースコードを端々まで読むことは不可能です。そんな時でも設定ファイルの読み方がわかると、そのプロジェクトがどのような仕組み(フレームワーク)で動いているのか、どのように修正・記述を行うべきなのかという手掛かりを設定ファイルから読み取ることができます。また、Githubなどで新しいプロジェクトに触れる際にも設定ファイルを読むと、どのようなライブラリを使っているのか等を知るうえで大変有用です。


プロジェクトのビルドの自動化を進めることで開発の効率化を行えます。

 一度設定ファイルを記述しておけば、後はPCが自動で行ってくれます。また、後のプロジェクトでも同様のファイルを再利用することができるので、そのプロジェクトの自動化だけでなく、あなたの開発人生を効率化することができます。 また、基礎知識があれば他人が書いた設定の修正も容易に行えるようになります。

※また、ビルドツールの記述方法はある程度パターン化されているため、メジャーなものを学んでおくだけで、まったく知らない状態とは理解する速度が大きく異なってきます。


- このコースで出てくるツール

Webpack4|Babel7|Eslint|Sass|PostCSS


- このコースで扱う言語

JavaScript(メイン)|HTML|CSS


※このコースは完全な初心者の方には難しいです。他の方が出している入門編レベルの講座を受けてからこのコースにトライしてみてください。

Who this course is for:
  • React、Angular、VueなどのSPAフレームワークを使用している方。
  • Webpackを使ったことがあるが、設定についてあいまいな方。
  • Babelを使った開発を行っているが設定についてあいまいな方。
  • Eslintの設定についてあいまいな方。
Course content
3 sections • 25 lectures • 4h 10m total length
  • はじめに
    00:56
  • Webpackをコマンドラインから実行してみよう
    11:18
  • Webpackの設定ファイルを編集してみよう
    12:45
  • Sassファイルを読み込んでみよう(Loader編1)
    12:47
  • PostCSSでより実践的なCSSローダーを作成しよう。(Loader編2)
    08:18
  • ファイルローダーで画像を扱ってみよう(Loader編3)
    15:52
  • ブラウザキャッシュとハッシュについて学ぼう
    13:44
  • Babelを連携してES6をES5に変換しよう
    08:55
  • 【Babel】Babel設定について少し詳しく説明します
    15:44
  • Eslintを連携してJavaScriptの文法チェックを導入しよう
    07:55
  • 【Eslint】Eslint設定について少し詳しく説明します
    22:03
  • Pluginを使ってCSSファイルを分離しよう
    05:40
  • HTMLにスクリプトタグを自動で挿入しよう
    05:52
  • HTML内の画像をファイルローダーで抽出しよう
    05:50
  • 商用ファイルと開発用ファイルを分離しよう
    22:34
  • ファイルのミニファイ(最適化)を行おう
    08:24
  • 開発サーバーを設定してみよう
    06:09
  • 共通モジュールをプロバイダーに登録しよう
    05:08
  • SplitChunksを使ってファイルを適切に分割しよう
    19:44
  • Resolveを使って開発を効率化しよう
    13:25
  • VSCodeでResolveの自動補完を有効にしよう
    03:43
  • 非同期読み込みのファイルのバンドルについて詳しく見てみよう
    11:09
  • 複数のHTMLが存在する場合のスクリプトの自動生成について
    06:12
  • 小話 - Webpackバージョン毎の記述方法の違いについて
    04:21
  • [ボーナスレクチャー]お疲れ様でした!
    02:29

Instructor
フルスタックエンジニア(WEB開発全般)
【Code Mafia】 WEBプログラミング学習
  • 4.6 Instructor Rating
  • 1,503 Reviews
  • 8,576 Students
  • 5 Courses

Code MafiaではWEBプログラミングの初学者から中級者向けの学習コースに特化して提供しています。


Code Mafiaのコースでは「なぜ?」「どうして?」の説明を必ずつけるように心掛けています。「なぜそうなるのか?」「どうしてその方法で実装するのか?」それは、私が駆け出しエンジニアだった時に一番知りたかったことでした。しかし、そこまで丁寧に答えてくれる人はなかなかいませんでした。

Code Mafiaでは「なぜ?」「どうして?」を理解していただくことで、応用の利く生きた技術をお教えします!


- 授業を受けてくださった皆様へ

ご受講いただきまして誠にありがとうございます。
是非、皆様のコースに対する正直な意見をお知らせください。
フィードバックをいただけると大変モチベーションにつながりますし、コースの改善に大変役立ちます。
良い意見も悪い意見も大歓迎です。
是非忌憚のない意見をお知らせください。


- 略歴

- 北海道大学 工学研究科 応用物理学専攻 修了

レーザーと超音波の研究やってました。超高解像の微弱な超音波を物体に派生させることによって物性を計測する研究に携わっていました。


- ソフトバンク SE兼、開発で新卒入社〜4年間勤務

大手IT企業がどんどん世界を変えていくのを目の当たりにして、ITに興味を持ちソフトバンクに入社しました。

数億円規模のプロジェクトの立ち上げに携わる一方、大規模WEBアプリケーションの長期保守とアジャイル開発に携わっていました。フロントエンドからバックエンドまで幅広い領域を担当していました。


- フィリピンで半年間語学留学

英語を学ぶためにフィリピンに半年間留学しました。監獄のようなきびしい英語学校に入校し、朝から晩まで英語漬けの生活を送ったかいもあり、ネイティブの人とも問題なく会話できるレベルになりました。


- WEB開発のコンサル、開発者として独立

4年前からWEBのコンサルと実際に手を動かす開発者の2足の草鞋で活動しています。関西を中心とした大学や企業様向けのWEBコンサルと開発を行っています。


- 強み

もともと大手のIT企業で働いていましたが、今は独立してフリーでIT業界に携わっているため、大規模アプリケーションの開発の進め方から、小規模のスピーディーな開発の進め方。果ては上流から下流、フロントエンドからバックエンドまで、アプリケーションの開発方法やシステムの構築について、かなり広い知見を持っていると自負しています。そして、Code Mafiaでは私がその経験の中で得た生きた知識を皆様にわかりやすくお教えします!


- 座右の銘

座右の銘は「とりあえずやってみる」です。

新しいことをやると必ず失敗しますし恥もかきます。それでも、とりあえずやってみないことには何も始まりません。あまり深く考えず「とりあえずやってみる」を心がけて、どんどん新しいことにチャレンジしていきたいと思っています。


- その他

無料で公開しているコースについては初期に収録したコースになります。不慣れな点が多く、お見苦しいところがあるかもしませんが、少しでも皆様の学習のお力になれば幸いです。

また、ご愛好頂いておりました「JavaScript中級者への道」は新たに「JavaScriptメカニズム」として大幅にアップグレードしました。

以前の「JavaScript中級者への道」をお探しの方はYoutubeの方に残しておりますので、そちらを御覧ください。

https://d.codemafia.tech/js-master-youtube


では、皆様のより一層の飛躍を心よりお祈り申し上げます!