【モダンJavaScript #5】歴史から学ぶJavaScript完結編 バンドル・コンパイルを知る。Browserify, webpack, Babel【フロントエンドエンジニア講座】

チャンネル名:しまぶーのIT大学
◆概要(引用)
ついにJavaScriptの歴史が完結します。パラダイムシフト「事前に変換(ビルド)」を理解することが1番重要です。モジュールバンドラーの「Browserify」「webpack」、コンパイラ「Babel」が登場します。またJavaScript公式モジュール仕様のES Modulesも誕生します。これらを知っているかがJavaScriptの初心者・中級者の別れ目だと考えています。しっかり抑えてください?
 
※ 厳密にはReactやVueはビルドを通さなくても使えますが、現場では基本的にビルドして使うことが多いので、今回はそのように説明しています。

? もくじ
0:00 前回のおさらい
2:02 コードを事前に変換という考え方
3:52 Bundle(バンドル)
6:36 Browserify
10:02 webpack
13:24 webpack vs Browserify
14:59 ES Modules
19:02 webpackがモジュールバンドラーで1強に
22:14 Compile(コンパイル)
24:06 Babel
26:46 React, Vue, TypeScript
28:51 パラダイムシフトを理解しよう
29:40 JavaScriptで覚えるべきもの
31:37 JavaScriptの歴史について

?モダンJavaScript講座
#1 新章開幕!最も独学が難しい分野を徹底解説していきます!
https://youtu.be/De9PH3EAz7c

#2 歴史から学ぶJavaScript前編。
ECMAScript、CommonJS、モジュール、名前空間を知ろう
https://youtu.be/PuomDgRbllw

#3 歴史から学ぶJavaScript後編①
Node.jsとパッケージ管理システムnpm
https://youtu.be/RdFE03K9B08

#4 歴史から学ぶJavaScript後編②
https://youtu.be/vuWAhqgRI3M

? 参考文献
・GitHub. 2011. 『Releases · browserify/browserify』
https://github.com/browserify/browserify/releases?after=1.4.7 (参照2020-06-12)
・Browserify. 『browserify』
http://browserify.org/ (参照2020-06-12)
・Wikipadia. 2020.『webpack』
https://en.wikipedia.org/wiki/Webpack (参照2020-06-12)
・webpack
https://webpack.js.org/ (参照2020-06-12)
・GitHub. 2020.『webpack / webpack』
https://github.com/webpack/webpack (参照2020-06-12)
・Ecma International. 2015.『ECMAScript® 2015 Language Specification』
http://www.ecma-international.org/ecma-262/6.0/index.html (参照2020-06-12)
・webpack.『Module Methods | webpack』
https://webpack.js.org/api/module-methods/ (参照2020-06-12)
・Google トレンド. 2020.
https://trends.google.co.jp/trends/explore?date=2012-01-01%202020-06-14&q=Browserify,RequireJS,webpack (参照2020-06-12)
・webpack.『Module Methods | webpack』
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules (参照2020-06-12)
・undefined. 2020. 『JavaScriptのモジュールの歴史』
https://uuuundefined.tokyo/blog/javascript-modules/ (参照2020-06-12)
・Ecma International. 2015.『ECMAScript® 2015 Language Specification』
http://www.ecma-international.org/ecma-262/6.0/index.html (参照2020-06-12)
・Babel. 2016.『The State of Babel · Babel』
https://babeljs.io/blog/2016/12/07/the-state-of-babel (参照2020-06-12)
・GitHub. 2019.『babel/babel-loader』

(参照2020-06-12)

?‍? 自己紹介
ヤフー株式会社でプログラマーとして働いていました!
現在は起業家として新規サービスを開発中です!
下記に興味がある方はチャンネル登録をおねがいします!
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長

? SNS
Twitter: https://twitter.com/shimabu_it
Instagram: https://www.instagram.com/shimabu_it

?️ タグ
#webpack #Babel #JavaScript

コメント

タイトルとURLをコピーしました