Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication 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 Certifications Network & Security Hardware Operating Systems & Servers 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 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 Paid 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 & Gardening 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 & Diet Yoga Mental Health Martial Arts & 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 Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React CSS Angular Node.Js PHP HTML5 Typescript
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA CompTIA Security+ Microsoft AZ-900
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Business Intelligence MySQL Qlik Sense Data Analysis
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Mobile Game Development
Google Flutter iOS Development Android Development Swift React Native Dart (programming language) Kotlin Mobile App Development SwiftUI
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting Canva InDesign Character Design Procreate Digital Illustration App
Life Coach Training Personal Development Neuro-Linguistic Programming Personal Transformation Life Purpose Mindfulness Sound Therapy Coaching CBT Cognitive Behavioral Therapy
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Freelancing Startup Business Plan Online Business Blogging Leadership
Digital Marketing Social Media Marketing Marketing Strategy Google Analytics Internet Marketing Copywriting Email Marketing Startup YouTube Marketing

DevelopmentWeb DevelopmentWeb Design

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

<Webpack5対応>Git / Github も同時に学んでウェブサイト制作を圧倒的に効率的しよう!テキスト版の補助教材で復習でき、コードはすべてダウンロード可能。React / Vue / Typescriptの導入も解説します。
Bestseller
Rating: 4.6 out of 54.6 (335 ratings)
2,498 students
Created by Shunsuke Sawada
Last updated 3/2022
Japanese

What you'll learn

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

Requirements

  • Macを中心に説明しますが、Windowsユーザー用に補強ビデオを収録しています

Description

2020年1月17日 Webpack 5 に対応しました。

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

Instructor

Shunsuke Sawada
UI/UXデザイナー
Shunsuke Sawada
  • 4.6 Instructor Rating
  • 3,980 Reviews
  • 24,131 Students
  • 4 Courses

UI/UXデザイナー、プロダクトマネージャー、フロントエンド・バックエンドエンジニア等、色々なロールで10年以上ものづくりに勤しんでいます。
国内外問わずフリーランスで活動しており、新規事業のウェブ開発やモバイルアプリ開発に携わることが多いです。

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.