$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

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

AkitoTsukahara

November 19, 2022
Tweet

More Decks by AkitoTsukahara

Other Decks in Programming

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モジュールを結合して、1つの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 以降、テンプレート・スクリプト、スタイルを1つのファイルに記述して コンポーネントを定義するアイデア(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 比較対象は5つ 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