Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -

34,138 views

Published on

2018/06/20 Fukuoka.js #4 LT

Published in: Software
  • Be the first to comment

なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -

  1. 1. なぜ初心者は webpackが解らないのか? - Why can’t you understand the webpack? - 2018/06/20 Fukuoka.js #4 LT
  2. 2. ● 井関 健人(@take2webservice) ● フリーランスのWEB系エンジニア ● PHPとかJavascriptとかRubyとか触ってます ● 新しい技術を1dayで教える講師とかやってます ● LaravelとかGitとかwebpackとかVueとかDockerとか… ● 今回は宣伝も兼ねて、webpack講座の前半部分を切り取ってきました 自己紹介
  3. 3. 昨今のモダンなJavascript開発で必須となりつつある仕組み ・モダンなWEBページ(HTML,CSS,Javascript)の開発 ・静的型付けがあるTypeScriptの開発 ・Angular、React、Vue.jsなどの開発 webpackとは何か?
  4. 4. webpackの具体的な用途 ● pug(Jade)やHAML、EJSといったテンプレートエンジンのコンパイル ● SASSなどのCSSプリプロセッサのプリコンパイル ● TypeScriptなどのAltJSのトランスパイル ● Linterを用いた、Javascriptの構文チェック ● AngularやReact、Vue(Vue-cli)といったJSフレームワークの実行 ...etc
  5. 5. 初心者「できること多すぎて解らん…」        /\ テンプレートエンジンって何だよ!!       / /| CSSプリプロセッサって何だよ!!      ∴\/ /  BabelとかAltJSって何だよ!!      ゜∵|/    Linterって何だよ!!   (ノ・ω・)ノ       そもそもフレームワークって何だよ!!   /  /   ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
  6. 6. ● Javascriptの静的モジュールバンドラー ● 依存関係のあるJavascriptのモジュールを取得し、それらのモジュールを元 に静的ファイルを生成する。 ● webpack.config.jsに設定を記述しコマンドラインから実行する。 ● 利用にはNode.jsの実行環境が必要。 ● ローダやプラグインという機能で、ファイルをバンドルする時にカスタムタス クを実行できる。 (参考:https://en.wikipedia.org/wiki/Webpack) 改めて、webpackとはなにか?(from wikipedia)
  7. 7. (゚Д゚)ハァ? (゚Д゚)ハァ?
  8. 8. さっきの具体的な用途にほぼ触れられていない…だと? ● pug(Jade)やHAML、EJSといったテンプレートエンジンのコンパイル ● SASSなどのCSSプリプロセッサのプリコンパイル ● TypeScriptなどのAltJSやBabelを用いたJavascriptへのトランスパイル ● Linterを用いた、Javascriptの構文チェック ● AngularやVue.js(Vue-cli)といったフレームワークの実行 ...etc
  9. 9. さっきの具体的な用途はほぼ全て「ローダーとプラグインでできる内容」 ● Javascriptの静的モジュールバンドラー ● 依存関係のあるJavascriptのモジュールを取得し、それらのモジュールを元 に静的ファイルを生成する。 ● webpack.config.jsに設定を記述しコマンドラインから実行する。 ● 利用にはNode.jsの実行環境が必要。 ● ローダやプラグインという機能で、ファイルをバンドルする時にカスタムタス クを実行できる。 (参考:https://en.wikipedia.org/wiki/Webpack) ● pug(Jade)やHAML、EJSといったテンプレートエンジンのコンパイル ● SASSなどのCSSプリプロセッサのプリコンパイル ● TypeScriptなどのAltJSやBabelを用いたJavascriptへのトランスパイル ● AngularやReact、Vue(Vue-cli)といったJSフレームワークの実行 ● Linterを用いた、Javascriptの構文チェック
  10. 10. webpack混乱ポイント カスタムタスクが優秀すぎて本質が解りづらい (Д)゜゜ ホンシツ ドコー ?
  11. 11. ● Javascriptの静的モジュールバンドラー ● 依存関係のあるJavascriptのモジュールを取得し、それらのモジュールを元 に静的ファイルを生成する。 ● webpack.config.jsに設定を記述しコマンドラインから実行する。 ● 利用にはNode.jsの実行環境が必要。 ● ローダやプラグインという機能で、ファイルをバンドルする時にカスタムタス クを実行できる。 (参考:https://en.wikipedia.org/wiki/Webpack) webpackとはなにか?(from wikipedia)
  12. 12. bundle : 束、塊、包み モジュールに分割され、別々になったJavascriptファイルの 依存関係を解決して、1つのファイルにまとめるツールの総称。 モジュールバンドラーとは何か??
  13. 13. //shout.js hoge.shout(); fuga.shout(); //hoge.js var hoge = {} hoge.shout = function(){ console.log("hoge"); } 読み込み順を気にする必要があったり… 分割しないと、ファイルのどこで何をしてるか解りづらかったり… でも、分割すると変数名上書きしそうで怖かったり… 昔のJavascript開発 //index.html <script src="hoge.js"> <script src="fuga.js"> <script src="shout.js"> //fuga.js var fuga = {} fuga.shout = function(){ console.log("fuga"); }
  14. 14. 元々、WEBブラウザでだけの動作しか考えられていなかったJavascriptを サーバーサイドでも使えるようにしようという動きが起きる。 結果、Node.jsが誕生し、ES2015ではそれまで無かった「言語仕様レベルでのモ ジュール管理の仕組み」が定義されました。 ES2015の登場で変化したJavascript開発
  15. 15. index.js いい感じに1ファイルにまとめられる。 //shout.js const hoge = require("hoge"); const fuga = require("fuga"); hoge.shout(); fuga.shout(); モジュールバンドラー登場により変化したJavascript開発 //hoge.js const hoge = {} hoge.shout = function(){ console.log("hoge"); } module.exports = hgoe; //fuga.js const fuga = {} fuga.shout = function(){ console.log("fuga"); } module.exports = fuga; webpackなどのモジュールバンドラーで、 複数のjsファイルをまとめる。 htmlには、このファイルを 読み込むだけ。
  16. 16. webpackの本質はモジュールバンドラーであるということです。 ここを押さえないとカスタムタスクの部分が上手く理解できず、 十分に活用しづらくなります。 webpackの本質
  17. 17. GRUNT Gulp npm script PARCEL [閑話休題] webpackと似たことができる仕組み
  18. 18. Gulpとは gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. <訳> gulpは開発ワークフローで苦労したり時間のかかるタスクを自動化するための ツールキットです。
  19. 19. Gulpとは - gulpはタスクランナーと呼ばれるツールです - JSの圧縮、Sassのコンパイル、画像の圧縮など - Web制作において時間のかかるタスクを自動化するためのもの - Gruntと違って非同期処理なので早い
  20. 20. - webpackはjavascriptのモジュールバンドラー (複数のjavascriptを1つにまとめるのが目的) - gulpはタスクランナー (web制作で自動化したい処理を定義し、自動的に実行するのが目的) webpackとGulpの違い
  21. 21. ● Entry(エントリー) ● Output(アウトプット) ● Loader(ローダー) ● Plugins(プラグイン) webpackの4つの基本要素
  22. 22. 読み方:エントリー(エントリーポイント) Javascriptをバンドルする上で、どのファイルを基準として、依存関係を解決する かを指定します。 エントリーには複数のファイルを指定することができます。 エントリーポイントを指定すると、webpackはエントリーポイントで指定したファイ ルが依存する他のモジュールとライブラリを読み込んでくれます。 Entryとは?
  23. 23. 読み方:アウトプット webpackがまとめたファイルを、「どこ」に「どのような名前」で出力するかを指定し ます。 Outputとは?
  24. 24. 読み方:ローダー webpack自体はJavaScriptしか理解できませんが、ローダーを使用することで、 JavaScript以外のcssやhtmlといったファイルをモジュールに変換して処理を行え ます。 設定ファイルには、「ファイル名」と「適用する処理内容」を記述します。 Loadersとは?
  25. 25. 読み方:プラグイン ファイルをまとめる以外のタスク(カスタムタスク)の実行 ができます。 プラグインは「バンドルしたJavascriptファイルの最小化」から先に挙げた webpackの利用例で挙げた様々な処理まで幅広く使用されます。 Pluginsとは?
  26. 26. webpackを図にすると cssやテンプレートエ ンジンを読み込みた い? js以外の読み込む方 法(Loader)を教えて くれたら読み込む よ! javascriptのファイル をまとめたい? 最初に読み込むjs ファイルを教えくれれ ば、中で呼んでる javascriptを読み込 むよ! jsとは一緒にせず、 cssやhtmlの出力を したり、ファイルを圧 縮したい? まとめる以外の処理 方法(Plugin)も教え てくれたらやっとく よ! 読み込んだ javascriptをまとめて 出力するときの出力 先と、出力方法を教 えて! まとめて置いとくよ! webpack .config.js ユーザー この設定でjsファイ ルをまとめて下さ い! js js sass pug js css html bundle.js OutputEntry Loaders Plugins
  27. 27. webpack理解の次のステップへ 静的バンドラーであることを理解したら、 次はメジャーなローダーやプラグインを単体で触ってみよう to be continued ... ?
  28. 28. おわり おわり

×