気がついたら、前回記事で50記事を超えていました。🎉
そう思うと、このブログも1年以上続いているんですね。
改めて、周りの環境と Write Blog Every Week に感謝です。
この記事なに？ 🙄
ずっとwebpackをなんとなくで触っていた感をなんとかしたいと思っていた矢先、Udemy ¥1,200セールをやっていた頃、以下のコースが見つかりました。
https://www.udemy.com/webpack-crash-course/www.udemy.com
ようやく完走できたので、受講した感想など書いていきます。
どんな内容？ 🤔
コースの内容についてですね。
Udemyのコース概要にも記載されていますが、自分が学べたことベースに、コースの内容をざざっと書き出して行きます。
- ハンズオン形式で、webpack導入前 / 導入後でどんな効果が得られるかを実体験できる
- npmを用いた以下のことが習得できる
- モジュール導入〜設定
- npm-scriptsの書き方
- webpackの設定方法や参考にすべきサイト
style-loaderなどのローダー系の役割が理解できる- その他webpack周りのプラグインの紹介
- ソースマップの設定方法
- eslintの設定方法
得られたこと 💪
個人差があると思うのですが、このコースを通して自分が得られたことを記載します。
webpack.config.jsの設定方法（特にローダー周り）
今までwebpack.config.jsをむやみに触るとビルドがうまく通らないから、あまり触らないことを心がけていたのですが、このコースを通してその壁が薄くなったような気がします。
特にローダー周りの設定です。
ローダー系を導入する際、うまくビルドが通らなかったりすることがあると思うのですが、それはローダーの仕組み（どういった順番で適応されるか）を理解してなかったためだったようです。
※仕組みの解説はきちんと以下の公式ドキュメントに書かれているのに。。。
当たり前ですが「公式ドキュメントやREADME.mdはちゃんと読もうね。」という教訓を得ました。
eslint系の設定
eslintってJavaScriptだけだったら単純なのですが、ReactやVue.jsといったFWを導入することによって、追加するプラグインや設定すること増え、最終的にはうまくうごかない。。。といったことがよくありました。
このあたりも、コースの解説と以下公式ドキュメントのおかげで、以前より理解できるようになりました。
【副産物】package.json周りの設定
コースを通して、npmモジュールを追加→適用することに楽しさを覚えました。
そのため、
- 普段実行しているコマンドを
npm-scriptsに集約しちゃおう - このプラグインを入れて、環境周りを改善しよう
といった思考となり、
- 自然と
package.jsonに手を伸ばす機会が増える - package.json周りの設定方法に明るくなる
といった副産物を得ることができました。
おわり
受講完了して、「webpack完全に理解した」とは言えませんが、実務でwebpackの設定周りをいじれるくらいになれたという効果を得られました。
しかし、このコースを受講して一番良かったのは、実践（日業務）に活かせたことです。
webpackだけでなく、package.jsonの設定周りに明るくなったことで、以下記事のような仕組みを導入することができました。
- 【JavaScript】コミットする前にlint-stagedでeslintのチェックをする - zackey推し
- 【Ruby】コミットする前に husky+lint-staged で、Rubocopの自動整形＆チェックを行う - Qiita
webpackやpackage.json周りの設定に詳しくなりたい方は、コースを購入してみても良いかもですね。
