はじめに
今回はこんな悩みに答えていきます。
本記事の内容
■ webpackの使い方がマスターできる書籍やUdemy等の教材、勉強法を公開
新規開発プロジェクトでwebpackを使用したビルドシステムを構築することになったのですが、当時webpackで1からビルドシステムを構築したことがなく、かなり苦戦しました。
ネットで調べても断片的な情報が散らばっていて、初心者のボクにとっては理解不能でした。。。
そこから、体系的にwebpackについて学ぶため、様々な教材を調査・購入し、やりこみました。
そうすることで、ようやくwebpackの使い方をマスターすることができ、無事ビルドシステムを構築することができました。
今回、そんなボクが実際にやった書籍やUdemyの講座を公開します。
Contents
webpackとは
プログラム内に複数あるJavaScriptファイルやsassファイルなどをひとまとめにし、コードを軽量化するツールです。
webpackを使用するメリットは以下の通りです。
webpack使用するメリット
■ 開発効率、保守性があがる
■ システム性能があがる
■ プログラムの依存関係を自動で解決してくれる
以降で簡単にそれぞれのメリットについて解説します。
開発効率、保守性があがる
機能ごとにファイルを分けて開発することができるようになるため、開発効率、保守性が上がります。
システム性能があがる
従来のやり方で複数のjsファイルを読み込もうとすると、リクエストがその数だけ発生し、時間がかかってしまいます。
そこで、webpackを使用して、１つのファイルにまとめることで、リクエストを１回だけにし、性能を高めることができます。
プログラムの依存関係を自動で解決してくれる
従来のやり方でJavaScriptファイルを複数扱う場合は、指定した順番にファイルを読み込むよう手動で読み込み順を指定していたのですが、このやり方だとミスが発生しやすく、読み込みの順番を間違えるとプログラムが正しく動かないという課題がありました。
そこで、webpackを使用すると、各プログラムの読み込みの順番(依存関係)を自動で解決してくれるため、読み込みの順番の誤りによる不具合の心配はなくなりました。
実際の現場のフロントエンド開発ではwebpackを使用しているケースがほとんどですし、webpackの使い方をマスターし、様々なカスタマイズができるようになると現場で重宝される人材になれるので、ぜひマスターしていきましょう。
webpack勉強法
メイン教材はUdemyを使用
ボク自身はUdemyの教材をメインで学習しました。
ネットにも様々なwebpack関連の記事はあったのですが、断片的な情報が散らばっていて、初学者にはなかなか難易度が高かったです。
また、文章を読んでも理解できないことが多々あったため、動画で体系的に学びたいと思い、Udemyをチョイスしました。
サブ教材は書籍を使用
理解度の確認や復習、辞書代わりとして書籍を使用してました。
メイン教材のUdemyをやったあとに書籍を読むと、これまで理解できなかった部分も理解できるようになったため、Udemy→書籍という勉強の流れは非常によかったなーと感じております。
それでは、以降で実際にボクがやった教材をご紹介したいと思います。
webpackの使い方がマスターできる書籍やUdemy等の教材
Udemy:現役エンジニアのためのwebpack環境構築入門(無料)
とりあえずwebpackを触ってみたい方におすすめ
無料とは思えない、クオリティ！
現役エンジニアのためのwebpack環境構築入門はなんと無料で受講可能です。
webpackを使用したBabel、Eslint、Sassなどの開発現場でよく使われる機能の開発環境構築方法について解説されております。
コースの内容
■ Webpackの設定方法について
■ Webpackでなんとなく使っている設定値について
■ Babel7の実践的な設定について
■ Eslintの実践的な設定について
■ Sass、PostCSSを連携して効率的なスタイルの記述ができる環境を構築
無料とは思えないぐらい充実したコンテンツとなっております。
環境構築について重きが置かれており、概念等の説明はあまりないため、とりあえずwebpack触ってみたいという方におすすめです。
Udemy:webpack最速入門
webpack初心者はまずコレ
webpackに関する用語の解説からwebpackの導入・使い方まで丁寧に解説されている初心者に優しい講座
webpackの導入や使い方だけでなく、そもそものwebpackとは何かという概念や使用するメリットについても分かりやすく解説されております。
また、ハンズオン形式で手を動かしながらwebpackの使い方を理解していくことができます。
コースの内容
■ webpackの基礎（webpackが何をするツールなのか、webpackの主要な機能や用語に関して）
■ webpackを利用したフロントエンド開発環境の構築方法
■ webpack の様々な機能やプラグインなどを利用して開発環境を整える方法
■ Babelとwebpackを連携して、JavaScriptのコードを様々なブラウザで動作するコードに変換する方法
■ webpackでCSS（SassやPostCSSなど）を扱う方法
■ webpackを利用して最適化したファイルを出力する方法
■ コードの品質を保つためにESLintとPrettierとwebpackを連携して、JavaScriptのコードを検証、整形する方法
■ webpackで画像を扱う方法
このようにwebpack最速入門は実務でよく使用する機能がたくさん盛り込まれており、初心者にも分かりやすく丁寧に解説されているので、しっかりと基礎から理解したいという初心者の方におすすめです。
Udemy:webpack実践講座
React / Vue / Typescript のビルドシステム構築したい方は必須
すでに紹介したwebpack最速入門と内容は多少かぶるところはあるのですが、より実践的な内容が盛り込まれております。
例えば、webpackを使用したReact / Vue / Typescriptのビルドシステム構築方法やHTMLを簡略的にコーディングできるpugについてもハンズオン形式で解説されております。
コースの内容
■ webpackを使って効率的にウェブサイトを制作する方法
■ React / Vue / Typescriptをウェブサイトに取り込む方法
■ Pug / Sass / ES6 等を使用したビルド方法
■ 画像ファイル圧縮の自動化
webpack実践講座の使い方ですが、webpack最速入門と内容がかぶっている部分は飛ばし、かぶっていない部分(React / Vue / Typescript / pug)を集中的に勉強するのがおすすめです。
おすすめ書籍
ボクが理解度の確認や復習、辞書代わりとして使用していた書籍は以下の通りです。
この2冊にwebpackの主要機能がほぼすべて盛り込まれており、詳しく解説されているので、立ち止まって学習しなおしたいときやググっても理解できないときに非常に役立ちます。
また、こちらはKindle Unlimitedの対象でもあるので、無料体験登録して30日以内に解約すれば無料で読むことが可能。
まとめ
さいごまで読んでいただき、ありがとうございました。
知り合いから
「フリーランスエンジニアになれば、年収800万円以上の高報酬でかつ、自由な働き方をチョイスできる」
というのを聞いて、フリーランスエンジニアに興味を持ったのですが、
当時SIer企業でエンジニアをやっていたボクはなかなか一歩踏みだせませんでした。
というもの以下のような不安があったからです。
■フリーランスエンジニアってかなりの技術力がないとなれないのではないのか？
■フリーランスエンジニアって不安定なのではないのか？
■フリーランスエンジニアって人脈やコネ、営業力が必要なのではないのか？
しかし、実際にフリーランスエンジニアになってみて気づきました。
これらはすべて間違いです。
過去のボクのようにフリーランスエンジニアに興味あるけど一歩踏み出せないという方向けに
『フリーランスエンジニア転職完全ロードマップ』
という記事を書きました。
この記事読めば、どうすればフリーランスになれるのかが分かりますので、ぜひ一読ください。
