Viteの魅力とビルドプロセスに迫る / 20250423 Takuto Nishikiori

2025/4/23 第6回テクシェア

https://recruit.shiftinc.jp/career/library/id1430/

株式会社クロノス

錦織 拓人

Transcript

1. Viteの魅力と ビルドプロセスに迫る 株式会社クロノス 錦織拓人
2. 1 出身 兵庫県神戸市 所属企業 株式会社クロノス nishikiori takuto ひとこと Vue.jsを愛する 28歳エンジニア 新卒入社で現在6年目
3. 2 私自身、特別な技術力は 持っていないです
4. 2 ですが、私は“Vue.js” 好きです
5. 前回、11月に行われたテクシェアにて Viteについての紹介とVue.jsについて 「愛」を伝えました。 前回の発表
6. 2 ３分じゃ足りなかった想い
7. Vue.jsに出会ってからの軌跡 1年目 電子契約書のアプリケーション開発にてVue.js初体験 シンプルで分かりやすい書き味 意欲的に勉強したい 2年目 Webサイトのリニューアル開発 Nuxt.jsを使った中規模開発 3年目 スマートフォン用Webサイトの改修 Vue.js v2 Composition API CompositionAPIを使ってるので、書き味がさらにバージョンアップ
8. Vue.jsに出会ってからの軌跡 4年目 健康保険管理システム Vue.js v2 自分で考え、コンポーネントの設計、ストア管理の設計をやるチャンス！ 自分がやってきたこと、考え、経験をいかんなく発揮できた！！ 5年目 EDIシステム開発 Vue.js v2 → Vue.js v3 マイグレーション
9. Vue.jsに出会ってからの軌跡 4年目 健康保険管理システム Vue.js v2 自分で考え、コンポーネントの設計、ストア管理の設計をやるチャンス！ 自分がやってきたこと、考え、経験をいかんなく発揮できた！！ 5年目 EDIシステム開発 Vue.js v2 → Vue.js v3 マイグレーション Vue.jsの2系の小規模システムを 3系へ移行するマイグレーション対応 作業はほぼ一人で行った。 この時の苦労と楽しさが発表の起点です。
10. 2 Viteと出会った原点
11. Viteとの原点 Vue2 から Vue3へのマイグレーション対応 実装は経験を積んでいた。 でも、設定まで考えるのは初めて。 苦しんだのが2つ • Vue2に依存しすぎたライブラリの置き換え • webpack.config.js、tsconfig.json、babel.config.jsなど ひしめき合う設定ファイルの調査と取り込み 加えて 起動に時間がかかる 修正の反映までがとても遅い
12. Viteとの原点 そんな時に思い出したのが 参加したVueカンファレンス VueFesJapan 2023 マイグレーションをより簡単にするために すぐプロジェクトの責任者に相談し、Viteを使えるように！ 初めの目的は、複雑な設定への対処でしたが そのほかのオプションが素晴らしく、Vue.jsでの開発をより効率的に、 より素晴らしいものにしてくれたのがViteでした！
13. 2 Viteの設計思想 ビルドプロセス
14. フロントエンド開発のビルドプロセスを超高速化することで 快適な開発体験を提供することです。 Viteについて Viteの生まれた背景・目的 シンプルな設定 すぐに開発できる 素早い初回起動 開発中 動作確認が効率的 全てが「技術者ファースト」で設計されています！
15. WebpackはViteに比べて柔軟性や拡張性に優れたツールです。 Vite以外のツール、Webpack 設定ファイルが複雑 初回起動 時間がかかる HMRが遅い 上記の弱点を抱えています。 しかし、
16. ViteとWebpackで比較 Vue.jsの2系から3系へマイグレーションの実体験から WebpackとViteの差を3つの観点から見ていきます。 1 2 3
17. 2 Webpackの設定ファイル 多くない？
18. シンプルな設定ファイル webpack.config.js Webpackの設定ファイル 設定ファイル複雑すぎません？ webpack.config.js（右図）にはたくさん記述が必要。 加えて、vue.config.jsやbabel.config.jsなどの 複数の設定ファイルも必要。 そもそも設定の把握に時間を取られます。 修正時に何を参照すればいいのか。 コーディングではない部分で、とても苦労する状態。
19. シンプルな設定ファイル vite.config.js Viteの設定ファイル すぐに開発始められる webpack.config.jsで設定されている内容とほぼ同じですが 記述量がなんと「1 /6 以下」に！！ vite.config.js（右図）は本当にこれだけです！ さらに、vue.config.jsやbabel.config.jsなども不要！
20. シンプルな設定ファイル vite.config.js Viteの設定ファイル すぐに開発始められる webpack.config.jsで設定されている内容とほぼ同じですが 記述量がなんと「1 /6 以下」に！！ vite.config.js（右図）は本当にこれだけです！ さらに、vue.config.jsやbabel.config.jsなども不要！ 設定周りがノンストレス！
21. 2 Webpackでの起動時間 長くない？
22. 素早い初回起動 Viteって起動めちゃくちゃ早い！ 置き換えて初めて気づいたんですが 逆にWebpackなんでそんな遅いん？
23. 素早い初回起動 Viteって起動めちゃくちゃ早い！ 置き換えて初めて気づいたんですが 逆にWebpackなんでそんな遅いん？ Viteめっちゃすごいのが Webpackにはなかった発想で高速化を実現！ キーワードは 依存関係の“事前バンドル”
24. 素早い初回起動 前回起動した際の情報をキャッシュしておきます。 ViteはESBuildを活用し node_modules/.Vite/deps/vue.jsに 前回起動時にアプリ全体のコードを 一つのファイルにバンドルしておきます。 これを起動時に読み込むことで 爆速起動を実現しています。
25. Vite VS. Webpack さらにバンドルファイルも少ない！ Viteでは 必要なmodulのみをバンドルする Webpackでは 全てのmodulをバンドルしてしまう
26. Vite VS. Webpack 具体的にどれくらい違うか。 デモ環境を用意して、ViteとWebpackの起動時間の差を比べてみました。
27. Vite VS. Webpack 具体的にどれくらい違うか デモ環境を用意して、ViteとWebpackの起動時間の差を比べてみました Vite Webpack 264ms ≒ 0.26秒 5160ms ≒ 5.16秒 なんと、起動時間が20分の1！！
28. 2 ソース変更してから 反映おそくない？
29. Webpackでのファイル変更時あるある 過去には保存 → 待機 → 動作確認に5〜10分も費やすプロジェクトもあ り これが超絶ストレス。 ちょっとしたスタイル変更やコンポーネントの文言修正に対して 2〜3分のバンドル待ちが発生していました。 Vue.js唯一の嫌いなところでした。
30. Viteでの変更は即！ HMRとは VIteではHMR（Hot Module Replacement）と呼ばれる技術により ファイルの変更を画面に反映する速度がとても早いんです！ ファイルの変更時にページ全体をリロードせず、 変更されたモジュールだけを差し替えます。 アプリケーションの「状態（state）」を維持したまま、 変更を即反映してくれます。 保存 → 即反映されるので、“ノンストレスな開発体験”を実現してくれる。
31. Vite VS. Webpack Round2 具体的にどれくらい違うか。 デモ環境を用意して、ViteとWebpackのHMRの時間も比べてみました。 まずはWebpackから
32. ※発表時は動画でしたが、スライドでデモをお見せします！
33. ※発表時は動画でしたが、スライドでデモをお見せします！
34. ※発表時は動画でしたが、スライドでデモをお見せします！
35. ※発表時は動画でしたが、スライドでデモをお見せします！
36. Vite VS. Webpack Round2 続いてVite Webpackは12秒かかりました。
37. ※発表時は動画でしたが、スライドでデモをお見せします！
38. ※発表時は動画でしたが、スライドでデモをお見せします！
39. Vite VS. Webpack Round2 0.2秒！！！？？？
40. Vite VS. Webpack Round2 ViteとWebpackではまさかの60倍の差 それだけ、開発にかけることのできる時間が増える！ より効率的に、より素晴らしい 開発体験を提供してくれます！
41. ViteとWebpackで比較 Vue.jsの開発体験を向上させてくれるVite これらのポイントが、Viteに惹かれた部分です！ 1 2 3
42. 2 好きな技術に対して
43. 好きな技術に対して 特別な技術は持ってないですが 好きな技術を伝えるために、さらに深く学ぶ 発表準備でさらにのめり込む機会となりました。 そして何より・・・ 「どうすれば、このViteの素晴らしさが伝わるか？」を真剣に考える時間でした。 「伝える」を意識し、さらに深く技術を知ろうとするプロセスによって 改めて自分の知識も深まったように思います。 技術をみんなで クロノスのバリューに「みんなが、バージョンアップ」があります。 自分が学び、誰かに伝える。誰かの学びを、聞かせてもらう。 その連鎖で今日の発表だけでなく、これからも続けていきたいとより強く感じまし た。