Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    ・モジュールバンドラーが生まれる

    View full-size 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モジュールを結合して、1つのJavaScriptを生成する
    ・Browserify
    ・タスクランナーで制御(grunt,gulp)
    ・webpack

    View full-size 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 以降、テンプレート・スクリプト、スタイルを1つのファイルに記述して
    コンポーネントを定義するアイデア(SFCs)が採用される
    ・SFCs自体はRiot.jsが2014年頃に実装している

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide