Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Life Purpose Meditation Personal Transformation Neuroscience Emotional Intelligence
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Webpack

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

React を題材にし各種形式のモジュールをローダー(babel/css/sass/html/eslint)やプラグイン(JS圧縮のカスタム/CSSのファイル分離と圧縮)でバンドル方法をハンズオンで解説!今回もGitHubにソース完全公開
Rating: 4.2 out of 54.2 (298 ratings)
2,045 students
Created by はむさん リーマンショックのリストラから這い上がったウェブ系エンジニア
Last updated 11/2020
Japanese
30-Day Money-Back Guarantee

What you'll learn

  • webpackの導入方法
  • webpackの設定方法
Curated for the Udemy for Business collection

Course content

5 sections • 18 lectures • 6h 4m total length

  • Preview08:48
  • Preview07:54
  • GitHubのリポジトリなど
    10:32
  • 本コースで使用するNodeのバージョンはv10.15.0です
    00:21

  • いきなり!動かしてwebpackの全体像を把握しよう - webpack適用前
    42:40
  • Preview36:33
  • Preview18:04
  • 開発環境と本番環境の違いについて
    07:52
  • モジュールについて
    25:19

  • css-loaderとstyle-loaderでスタイルを取り込もう
    30:06
  • url-loaderで画像を取り込もう、 file-loaderで画像をファイルとして取り込もう
    22:23
  • sass-loaderでSassのコードを取り込もう
    13:41

  • babel-loaderやhtml-webpack-pluginを利用しReact開発環境を構築しよう
    37:41
  • mini-css-extract-plugin でスタイルをcssファイルに分離しよう
    21:55
  • uglifyjs-webpack-plugin でconsole.log関数の自動削除をしよう
    23:41
  • optimize-css-assets-webpack-plugin でスタイルシートを圧縮しよう
    15:08

  • ソースマップを生成しよう
    11:54
  • Preview29:58

Requirements

  • GitHubのアカウント・・・公開中のソースコードをforkする場合等に必要です。
  • gitの基礎知識及び基本操作・・・公開中のソースコードの取得にあると便利です。
  • ブラウザ・・・Google Chromeの最新版が推奨です。
  • テキストエディタ・・・Visual Studio Code、Atom、vim等お好みのものをお使いください。
  • Node・・・本コースの推奨バージョンはv10.15.0です。異なるバージョンのNodeを使用した場合は挙動が異なる場合がありますのでご注意ください
  • 【重要】動画で紹介する手順の通りに行い期待通りの結果にならない場合でも、Q&Aを利用し、質問し解決しようとする意欲や積極性が必要です

Description

Udemyへようこそ!

Udemyのプログラミングおじさん、はむです。

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

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

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

Dive into Hacking!

はむ

Who this course is for:

  • webpackの導入方法及び設定方法ついて学習したい方

Instructor

はむさん リーマンショックのリストラから這い上がったウェブ系エンジニア
Senior Software Developer, Udemy Instructor
はむさん リーマンショックのリストラから這い上がったウェブ系エンジニア
  • 4.3 Instructor Rating
  • 3,537 Reviews
  • 11,818 Students
  • 8 Courses

みなさん、こんにちは!世界最大、オンライン教育プラットフォームUdemyへようこそ!

はむさん、と申します。

僕は大学卒業後、就職氷河期となる2000年よりソフトウェア開発者としてのキャリアを歩んできました。組み込みのファームウェア開発、MVNOのサーバ開発、RTBのDSP開発、ウェブアプリケーション開発と、様々なレイヤのプロダクトを作ってきました。

そんな経験を活かし、現在、シリコンバレー発のオンライン教育プラットフォームUdemyでプログラミング講師として動画シナリオ作成/収録/編集/配信/サポートを行っております。

さて、もう10年以上も前のことですが、僕は過去にリーマンショックの影響によりリストラにあった経験があります。社会から放り出され、多くの会社を訪問するも、不採用の連続、会社とハローワークとの往復にどん底まで疲弊し、完全に生きる自信を失った時期もあります。

「エンジニアとしてのスキルをなぜもっと磨いておかなかったのか?」「短期的、効率的にスキルを身につける方法ないのか?」僕は当時そんな悩みを抱えていました。

あれから10数年、クラウドが浸透し、今まで以上に個人が個人に価値を提供しやすい時代になってきました。その1つがこのUdemyです。

僕は今、人生で一番苦しかった時期に抱えていたような悩みを抱えている人を救済したい!というモチベーションでこのUdemyで活動しています。

ところで、僕が一番エンジニアに対してバリューを感じること、それは、「アイデアを形にできる力があること」です。これは「要件をコードで表現できること」と言えるかもしれません。ソフトウェアエンジニアにとって一番説得力があること、それは、「コードが書けること」になります。成果物はすなわちコードです。

僕のコースでは、パワーポイントによる概念的な説明にはあまり時間を割かず、少しでも多くのコードが書けるようになってもらいたいという願いを込め、とにかくコードを書くことに主眼をおいています。なぜなら、世の中のサービスは誰かしらが汗水流して書いたコードが動いているからです。逆に、コードを書かずして価値の提供は達成できません。

僕のコースを通じて自信を持ってコードが書ける人が一人でも多く誕生してくれたらこんなに嬉しいことはありません。


はむさん

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.