ビルドツール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
   

   View Slide

2. Copyright© M&Aクラウド 2
   自己紹介
   塚原彰仁
   AkitoTsukahara
   株式会社M&Aクラウド
   AkitoTsukahara
   akito_tsukahara
   

   View Slide

3. Copyright© M&Aクラウド
   みなさんは
   ビルドツールViteを
   ご存じですか？
   3
   

   View Slide

4. Copyright© M&Aクラウド
   一番注目されているビルドツール
   

   View Slide

5. Copyright© M&Aクラウド
   Viteはいいぞ！
   読みは「ヴィート」。フランス語で「素早い」。
   開発者はEvan You（Vueの開発者でもある）
   Webプロジェクトのために、より速く無駄のない開発体
   験を提供することを目的としたビルドツール
   非常に高速な Hot Module Replacement (HMR) など、ネイ
   ティブ ESMを利用した豊富な機能拡張を提供
   

   View Slide

6. Copyright© M&Aクラウド
   Viteはいいぞ！
   Viteはいいぞ！
   Viteに触れたことがある人
   ・周りの人にViteイケてるよ！と伝えられるように
   まだViteに触れたことがない人
   ・Viteイケてるじゃん！と感じてもらえるように
   

   View Slide

7. Copyright© M&Aクラウド
   Viteはいいぞ！
   今日話すこと
   ● なぜViteが注目されているのか？
   ○ フロントエンド開発におけるビルドツールの歴史から考える
   ● Viteの特徴
   ● 他のビルドツールとの比較
   今日話さないこと
   ● Viteのセットアップ方法やコードの詳細
   

   View Slide

8. Copyright© M&Aクラウド
   Viteはどのように生まれたのか？
   8
   

   View Slide

9. Copyright© M&Aクラウド
   Viteはどのように生まれたのか？
   

   View Slide

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は従来のビルドツールと何が違うのか
    

    View Slide

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)が搭載された。
    

    View Slide

12. Copyright© M&Aクラウド
    Viteはどのように生まれたのか？
    初期のWeb開発ではモジュールという概念もまだなかった
    

    View Slide

13. Copyright© M&Aクラウド
    Viteはどのように生まれたのか？
    IIFE（即時実行関数）を使用してスコープを分離する工夫も...
    

    View Slide

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
    

    View Slide

15. Copyright© M&Aクラウド
    Viteはどのように生まれたのか？
    CommonJS
    ・Webブラウザーもモジュールシステムの恩恵が得られる
    ・Node.jsとWebブラウザーの間のコード相互運用性を高める
    ↓
    ・モジュールバンドラーが生まれる
    

    View Slide

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
    

    View Slide

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年頃に実装している
    

    View Slide

18. Copyright© M&Aクラウド
    Viteはどのように生まれたのか？
    Vue Single-File Components(SFCs)
    

    View Slide

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ファイルを読み込む仕組み
    

    View Slide

20. Copyright© M&Aクラウド
    Viteはどのように生まれたのか？
    RollupはESMに基づく最初のパッケージングツール
    

    View Slide

21. Copyright© M&Aクラウド
    Viteはどのように生まれたのか？
    2017年
    ついにブラウザはネイティブESMをサポート！（もちろんIEは動かないよ！）
    

    View Slide

22. Copyright© M&Aクラウド
    Viteはどのように生まれたのか？
    @Vue/dev-server
    

    View Slide

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ができるように
    

    View Slide

24. Copyright© M&Aクラウド
    Viteはどのように生まれたのか？
    Vite 0.1時の機能
    

    View Slide

25. Copyright© M&Aクラウド
    Viteはどのように生まれたのか？
    Vite 1.0時にはvue-cliとほぼ同等の機能
    

    View Slide

26. Copyright© M&Aクラウド
    Viteはどのように生まれたのか？
    Vite 2.0になると
    多くのフレームワークで使われるようになり、処理速度もかなり向上
    

    View Slide

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

    View Slide

28. Copyright© M&Aクラウド
    Viteの特徴
    28
    

    View Slide

29. Copyright© M&Aクラウド
    Viteの特徴
    

    View Slide

30. Copyright© M&Aクラウド
    Viteの特徴
    ポイント
    1.ネイティブESMを利用したビルドセットアップ
    ・変更時に必要なファイルだけコンパイル
    ・esbuildによる依存関係の事前バンドル
    2.プロダクションビルドではバンドルする
    3.様々なフレームワーク・ツールで対応されている
    

    View Slide

31. Copyright© M&Aクラウド
    Viteの特徴
    

    View Slide

32. Copyright© M&Aクラウド
    Viteの特徴
    

    View Slide

33. Copyright© M&Aクラウド
    Viteの特徴
    esbuildによる依存関係の事前バンドル
    ・esbuildはGoによって開発されており、
    JavaScriptベースで従来の他ツールよりも10~100倍高速
    

    View Slide

34. Copyright© M&Aクラウド
    Viteの特徴
    プロダクションではバンドルする
    ・プロダクションビルド時はRollupを利用している
    ・バンドルされていないESMをプロダクション用にリリースするのは非効率
    ・esbuildもバンドル機能を提供しているが、Rollupの方が充実している
    

    View Slide

35. Copyright© M&Aクラウド
    Viteの特徴
    様々なフレームワーク・ツールで対応されている
    

    View Slide

36. Copyright© M&Aクラウド
    他のビルドツールと
    比べたらどうなのか？
    36
    

    View Slide

37. Copyright© M&Aクラウド
    他のビルドツールと比べたらどうなのか？
    Storybook Performance: Vite vs Webpack
    比較対象は５つ
    1. webpack4
    2. webpack5
    3. webpack5
    a. 遅延コンパイル
    b. コード分割
    4. Vite
    5. Vite
    a. コード分割
    

    View Slide

38. Copyright© M&Aクラウド
    他のビルドツールと比べたらどうなのか？
    

    View Slide

39. Copyright© M&Aクラウド
    他のビルドツールと比べたらどうなのか？
    

    View Slide

40. Copyright© M&Aクラウド
    他のビルドツールと比べたらどうなのか？
    話題のTurbopackと比較したらどうなのか？
    webpackの後継ツールで作者はTobias Koppers
    Viteよりも10倍速いとPR
    まだベータ版でNext.jsのみに対応
    

    View Slide

41. Copyright© M&Aクラウド
    他のビルドツールと比べたらどうなのか？
    rootケース
    1,000種類のコンポーネントをインポートして、まとめてレンダリングする
    leafケース
    単一コンポーネントをインポートして、レンダリングする
    ベンチマークテストのリポジトリ
    

    View Slide

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

    View Slide

43. Copyright© M&Aクラウド
    本日のおさらい
    43
    

    View Slide

44. Copyright© M&Aクラウド
    まとめ
    ● ViteはESMを活用したビルドツール
    ○ より速く無駄のない開発体験を提供することが目的
    ○ JavaScriptのライフサイクル転換によって誕生
    ● 非常に強力なHMR機能を提供してくれる
    ○ 変更時には必要なモジュールだけ変更
    ○ esbuildの事前バンドル
    ● 様々なフレームワーク・ツールで利用されている
    

    View Slide

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
    

    View Slide

46. Copyright© M&Aクラウド
    ありがとうございました！
    46
    

    View Slide