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

このコースではWebpackを使ったフロントエンドの開発環境の構築方法について学んでいきます。また、コースの中ではBabel、Eslint、Sassなどの開発現場でよく使われる機能についても併せてご説明しています。
Free tutorial
Rating: 4.9 out of 5 (320 ratings)
4,712 students
4hr 11min of on-demand video
Japanese

こちらのコースではフロントエンド開発を効率化するための環境設定を行います。
Webpackの設定方法について論理立ててご説明します。
Webpackでなんとなく使っている設定値についてわかりやすく学びます。
Babel7の実践的な設定について学びます。
Eslintの実践的な設定について学びます。
Sass、PostCSSを連携して効率的なスタイルの記述ができる環境を構築します。

Requirements

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

Description

/**

* 無料コースについてはUdemyの方針で質問への回答ができなくなりました。

* 大変申し訳ございませんが、ご理解の程よろしくお願い致します。

*/

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

このコースではフロントエンドの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の設定についてあいまいな方。

Instructor

【CodeMafia】 WEBプログラミング学習
  • 4.6 Instructor Rating
  • 9,278 Reviews
  • 45,554 Students
  • 5 Courses

皆さん、こんばんは。CodeMafiaです。

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


私のコースの中では「なぜ?」「どうして?」の説明を必ずつけるように心掛けています。「なぜそうなるのか?」「どうしてその方法で実装するのか?」それは、私が駆け出しエンジニアだった時に一番知りたかったことでした。しかし、そこまで丁寧に答えてくれる人はなかなかいませんでした。そのため、私のコースの中ではなるべく生徒さん達にモヤモヤを持ってほしくないと思い、「なぜ?」「どうして?」をできる限り説明するようにしています。基礎が理解できれば、未知の状況でも自分で考えて応用することができます。私のコースが皆さんの基礎固めのお役に立てば幸いです。


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

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


- 近況報告

本を出版しました。JavaScriptの動作原理について詳しく書いた本になります。思い通りにコードが書けなくて悩んでいる方は是非一度ご覧いただけますと幸いです。(全国の書店でご覧いただけますので、書店にお立ち寄りの際は是非見てみてください。)

「独習JavaScript新版」翔泳社出版 2021/11/15発売


- 略歴

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

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


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

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

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


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

ソフトバンクをやめてからはフィリピンに半年間語学留学していました。英語はおおよそ思ったように喋れる様になりましたが、別のところで色々ありました。笑


- 起業~現在

世界の著名な起業家になりたいという中二病的発想で何も考えず会社をやめて独立しました。ただ、そんなに世の中うまくいくわけもなく、なかなか大変な時期もありました。笑

一歩ずつ前進していけるようにこれからも精進していきたいと思います!


- 強み

もともとソフトバンクで働いていましたが、今は独立してIT業界に携わっているため、大規模アプリケーションの開発の進め方から、小規模アプリのスピーディーな開発の進め方まで多様な開発手法について知っていると思います。そのような経験の中から有益な情報を皆様にお伝えできれば幸いです。


- 行動指針

失敗してもいいから「とりあえずやってみる」ことを心掛けています。


- その他

無料で公開しているコースについては初期に収録したコースになります。お見苦しいところもあるかと思いますが、少しでもお役に立てば幸いです。


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

Top companies trust Udemy

Get your team access to Udemy's top 16,000+ courses