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

みなさんはビルドツールVite（ヴィート）を使ったことがありますか？
ビルドツールといえば、webpackやGulp、Rollupなど代表的なツールがありますが、最近はViteが注目を集めています。
参考）https://2021.stateofjs.com/ja-JP/libraries/build-tools

この登壇ではViteがなぜ注目を集めているのか？他のツールと比べて何が違うのか？などなど時間が許す限り解説させていただきます。
また10/11,12で開催予定のViteconfで発表されるViteの最新情報についてもご紹介できればと思います。

▼こんな方におすすめ
・フロントエンド開発している方
・フロントのビルドが遅いなーと日頃から感じている方
・新しいツールの情報をキャッチアップしたい方

Transcript

1. Copyright© M&Aクラウド ビルドツールViteを10分で解説！ フロントエンドカンファレンス沖縄 2022 Akito.Tsukahara
2. Copyright© M&Aクラウド 2 自己紹介 塚原彰仁 AkitoTsukahara 株式会社M&Aクラウド AkitoTsukahara akito_tsukahara
3. Copyright© M&Aクラウド みなさんは ビルドツールViteを ご存じですか？ 3
4. Copyright© M&Aクラウド 一番注目されているビルドツール
5. Copyright© M&Aクラウド Viteはいいぞ！ 読みは「ヴィート」。フランス語で「素早い」。 開発者はEvan You（Vueの開発者でもある） Webプロジェクトのために、より速く無駄のない開発体 験を提供することを目的としたビルドツール 非常に高速な Hot Module Replacement (HMR) など、ネイ ティブ ESMを利用した豊富な機能拡張を提供
6. Copyright© M&Aクラウド Viteはいいぞ！ Viteはいいぞ！ Viteに触れたことがある人 ・周りの人にViteイケてるよ！と伝えられるように まだViteに触れたことがない人 ・Viteイケてるじゃん！と感じてもらえるように
7. Copyright© M&Aクラウド Viteはいいぞ！ 今日話すこと • なぜViteが注目されているのか？ ◦ フロントエンド開発におけるビルドツールの歴史から考える • Viteの特徴 • 他のビルドツールとの比較 今日話さないこと • Viteのセットアップ方法やコードの詳細
8. Copyright© M&Aクラウド Viteはどのように生まれたのか？ 8
9. Copyright© M&Aクラウド Viteはどのように生まれたのか？
10. 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は従来のビルドツールと何が違うのか
11. 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) 1995年9月: Netscape NavigatorにLiveScript (のちのJavaScript)が搭載された。
12. Copyright© M&Aクラウド Viteはどのように生まれたのか？ 初期のWeb開発ではモジュールという概念もまだなかった
13. Copyright© M&Aクラウド Viteはどのように生まれたのか？ IIFE（即時実行関数）を使用してスコープを分離する工夫も...
14. 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
15. Copyright© M&Aクラウド Viteはどのように生まれたのか？ CommonJS ・Webブラウザーもモジュールシステムの恩恵が得られる ・Node.jsとWebブラウザーの間のコード相互運用性を高める ↓ ・モジュールバンドラーが生まれる
16. 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
17. 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年頃に実装している
18. Copyright© M&Aクラウド Viteはどのように生まれたのか？ Vue Single-File Components(SFCs)
19. 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) 2015年6月: ECMAScriptのリリースでES modulesが策定された ・JSファイルから別のJSファイルを読み込む仕組み
20. Copyright© M&Aクラウド Viteはどのように生まれたのか？ RollupはESMに基づく最初のパッケージングツール
21. Copyright© M&Aクラウド Viteはどのように生まれたのか？ 2017年 ついにブラウザはネイティブESMをサポート！（もちろんIEは動かないよ！）
22. Copyright© M&Aクラウド Viteはどのように生まれたのか？ @Vue/dev-server
23. 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) 2020年4月: Viteが誕生 ・ネイティブESMでHMRができるように
24. Copyright© M&Aクラウド Viteはどのように生まれたのか？ Vite 0.1時の機能
25. Copyright© M&Aクラウド Viteはどのように生まれたのか？ Vite 1.0時にはvue-cliとほぼ同等の機能
26. Copyright© M&Aクラウド Viteはどのように生まれたのか？ Vite 2.0になると 多くのフレームワークで使われるようになり、処理速度もかなり向上
27. Copyright© M&Aクラウド Viteはどのように生まれたのか？ JavaScriptの歴史をざっくりお勉強📝 ・ビルドツールが使われているわけ →JavaScriptは他のモジュールを呼び出すことができなかった そのためにブラウザで動かすにはビルドツールでバンドルする必要があった ESMにブラウザが対応したことによって、バンドルしなくても良くなった ・Viteは従来のビルドツールと何が違うのか →ESMに基づいた作りになっている ESMベースでかつHMRをサポートしているので、注目を集めている 実際にHMRは体感すごく速い！
28. Copyright© M&Aクラウド Viteの特徴 28
29. Copyright© M&Aクラウド Viteの特徴
30. Copyright© M&Aクラウド Viteの特徴 ポイント 1.ネイティブESMを利用したビルドセットアップ ・変更時に必要なファイルだけコンパイル ・esbuildによる依存関係の事前バンドル 2.プロダクションビルドではバンドルする 3.様々なフレームワーク・ツールで対応されている
31. Copyright© M&Aクラウド Viteの特徴
32. Copyright© M&Aクラウド Viteの特徴
33. Copyright© M&Aクラウド Viteの特徴 esbuildによる依存関係の事前バンドル ・esbuildはGoによって開発されており、 JavaScriptベースで従来の他ツールよりも10~100倍高速
34. Copyright© M&Aクラウド Viteの特徴 プロダクションではバンドルする ・プロダクションビルド時はRollupを利用している ・バンドルされていないESMをプロダクション用にリリースするのは非効率 ・esbuildもバンドル機能を提供しているが、Rollupの方が充実している
35. Copyright© M&Aクラウド Viteの特徴 様々なフレームワーク・ツールで対応されている
36. Copyright© M&Aクラウド 他のビルドツールと 比べたらどうなのか？ 36
37. Copyright© M&Aクラウド 他のビルドツールと比べたらどうなのか？ Storybook Performance: Vite vs Webpack 比較対象は５つ 1. webpack4 2. webpack5 3. webpack5 a. 遅延コンパイル b. コード分割 4. Vite 5. Vite a. コード分割
38. Copyright© M&Aクラウド 他のビルドツールと比べたらどうなのか？
39. Copyright© M&Aクラウド 他のビルドツールと比べたらどうなのか？
40. Copyright© M&Aクラウド 他のビルドツールと比べたらどうなのか？ 話題のTurbopackと比較したらどうなのか？ webpackの後継ツールで作者はTobias Koppers Viteよりも10倍速いとPR まだベータ版でNext.jsのみに対応
41. Copyright© M&Aクラウド 他のビルドツールと比べたらどうなのか？ rootケース 1,000種類のコンポーネントをインポートして、まとめてレンダリングする leafケース 単一コンポーネントをインポートして、レンダリングする ベンチマークテストのリポジトリ
42. Copyright© M&Aクラウド 他のビルドツールと比べたらどうなのか？ 公平な評価を心がけて欲しいとエヴァン・ユーがコメントし、 TurbopackとViteのベンチマークテストのリポジトリが公開されました。 指摘内容は ・ベンチマークテストされたアプリケーションの構成が揃っていない ・30,000以上のモジュールがある場合を想定されているが現実的ではない ・ブラウザ評価時間ではなく、再レンダリングにかかる時間を見るべき →OSSの競争はオープンなコミュニケーション、公正な比較、相互尊重が大事だよね 後日Vercelはベンチマークテストの詳細情報を公開しました。
43. Copyright© M&Aクラウド 本日のおさらい 43
44. Copyright© M&Aクラウド まとめ • ViteはESMを活用したビルドツール ◦ より速く無駄のない開発体験を提供することが目的 ◦ JavaScriptのライフサイクル転換によって誕生 • 非常に強力なHMR機能を提供してくれる ◦ 変更時には必要なモジュールだけ変更 ◦ esbuildの事前バンドル • 様々なフレームワーク・ツールで利用されている
45. 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
46. Copyright© M&Aクラウド ありがとうございました！ 46