ビルドツールViteを10分で解説！

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Copyright© M&Aクラウド Viteはどのように生まれたのか？ 1995/9 LiveScriptが誕生 (後のJavascript) 2009/5 Node.jsが誕生 (v0.0.1) 2011/2 Browserifyが誕生(v0.0.1) 2014/2 Vue.jsが誕生 (v0.0.1) 2015/6 ECMAScript 2015のリリース 2020/4 Viteが誕生 (v 0.1) JavaScriptの歴史をざっくりお勉強📝 ・ビルドツールが使われているわけ・Viteは従来のビルドツールと何が違うのか

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Copyright© M&Aクラウド Viteはどのように生まれたのか？ 1995/9 LiveScriptが誕生 (後のJavascript) 2009/5 Node.jsが誕生 (v0.0.1) 2011/2 Browserifyが誕生(v0.0.1) 2014/2 Vue.jsが誕生 (v0.0.1) 2015/6 ECMAScript 2015のリリース 2020/4 Viteが誕生 (v 0.1) 2009年5月: Node.jsによって・「ブラウザ以外のJavaScript実行環境」と、大きな地位を確立・JavaScriptの優れたモジュールシステムがもたらされる→CommonJS

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Copyright© M&Aクラウド Viteはどのように生まれたのか？ 1995/9 LiveScriptが誕生 (後のJavascript) 2009/5 Node.jsが誕生 (v0.0.1) 2011/2 Browserifyが誕生(v0.0.1) 2014/2 Vue.jsが誕生 (v0.0.1) 2015/6 ECMAScript 2015のリリース 2020/4 Viteが誕生 (v 0.1) 2011年2月: モジュールバンドラー・複数のJavaScriptモジュールを結合して、１つのJavaScriptを生成する・Browserify ・タスクランナーで制御（grunt,gulp）・webpack

Slide 17

Slide 17 text

Copyright© M&Aクラウド Viteはどのように生まれたのか？ 1995/9 LiveScriptが誕生 (後のJavascript) 2009/5 Node.jsが誕生 (v0.0.1) 2011/2 Browserifyが誕生(v0.0.1) 2014/2 Vue.jsが誕生 (v0.0.1) 2015/6 ECMAScript 2015のリリース 2020/4 Viteが誕生 (v 0.1) 2014年2月: Vue.js ・当初はAngularを使いやすくシンプルにするコンセプト・v.1.0.22 以降、テンプレート・スクリプト、スタイルを１つのファイルに記述してコンポーネントを定義するアイデア（SFCs）が採用される・SFCs自体はRiot.jsが2014年頃に実装している

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright© M&Aクラウド Viteはどのように生まれたのか？ JavaScriptの歴史をざっくりお勉強📝 ・ビルドツールが使われているわけ →JavaScriptは他のモジュールを呼び出すことができなかったそのためにブラウザで動かすにはビルドツールでバンドルする必要があった ESMにブラウザが対応したことによって、バンドルしなくても良くなった・Viteは従来のビルドツールと何が違うのか →ESMに基づいた作りになっている ESMベースでかつHMRをサポートしているので、注目を集めている実際にHMRは体感すごく速い！

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Copyright© M&Aクラウド他のビルドツールと比べたらどうなのか？公平な評価を心がけて欲しいとエヴァン・ユーがコメントし、 TurbopackとViteのベンチマークテストのリポジトリが公開されました。指摘内容は・ベンチマークテストされたアプリケーションの構成が揃っていない・30,000以上のモジュールがある場合を想定されているが現実的ではない・ブラウザ評価時間ではなく、再レンダリングにかかる時間を見るべき →OSSの競争はオープンなコミュニケーション、公正な比較、相互尊重が大事だよね後日Vercelはベンチマークテストの詳細情報を公開しました。

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Copyright© M&Aクラウド参考資料 ● https://viteconf.org/2022/replay/vite_keynote ● https://qiita.com/qnighy/items/16fdd8e58309a1f706a0 ● https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm ● https://jakearchibald.com/2017/es-modules-in-browsers/ ● https://ja.vitejs.dev/guide/why.html

Slide 46

Slide 46 text