【はむ式】モジュールバンドラー webpack を1日で習得！フルスクラッチでインストールからカスタマイズまでを理解する
What you'll learn
- webpackの導入方法
- webpackの設定方法
Course content
- Preview08:48
- Preview07:54
- 10:32GitHubのリポジトリなど
- 00:21本コースで使用するNodeのバージョンはv10.15.0です
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
![はむさん リーマンショックのリストラから這い上がったウェブ系エンジニア](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
- 4.3 Instructor Rating
- 3,560 Reviews
- 11,888 Students
- 8 Courses
みなさん、こんにちは！世界最大、オンライン教育プラットフォームUdemyへようこそ！
はむさん、と申します。
僕は大学卒業後、就職氷河期となる2000年よりソフトウェア開発者としてのキャリアを歩んできました。組み込みのファームウェア開発、MVNOのサーバ開発、RTBのDSP開発、ウェブアプリケーション開発と、様々なレイヤのプロダクトを作ってきました。
そんな経験を活かし、現在、シリコンバレー発のオンライン教育プラットフォームUdemyでプログラミング講師として動画シナリオ作成/収録/編集/配信/サポートを行っております。
さて、もう10年以上も前のことですが、僕は過去にリーマンショックの影響によりリストラにあった経験があります。社会から放り出され、多くの会社を訪問するも、不採用の連続、会社とハローワークとの往復にどん底まで疲弊し、完全に生きる自信を失った時期もあります。
「エンジニアとしてのスキルをなぜもっと磨いておかなかったのか？」「短期的、効率的にスキルを身につける方法ないのか？」僕は当時そんな悩みを抱えていました。
あれから10数年、クラウドが浸透し、今まで以上に個人が個人に価値を提供しやすい時代になってきました。その１つがこのUdemyです。
僕は今、人生で一番苦しかった時期に抱えていたような悩みを抱えている人を救済したい！というモチベーションでこのUdemyで活動しています。
ところで、僕が一番エンジニアに対してバリューを感じること、それは、「アイデアを形にできる力があること」です。これは「要件をコードで表現できること」と言えるかもしれません。ソフトウェアエンジニアにとって一番説得力があること、それは、「コードが書けること」になります。成果物はすなわちコードです。
僕のコースでは、パワーポイントによる概念的な説明にはあまり時間を割かず、少しでも多くのコードが書けるようになってもらいたいという願いを込め、とにかくコードを書くことに主眼をおいています。なぜなら、世の中のサービスは誰かしらが汗水流して書いたコードが動いているからです。逆に、コードを書かずして価値の提供は達成できません。
僕のコースを通じて自信を持ってコードが書ける人が一人でも多く誕生してくれたらこんなに嬉しいことはありません。
はむさん