Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Viteはいいぞ/Vite is Good
Search
dojineko
May 18, 2022
Programming
1
650
Viteはいいぞ/Vite is Good
dojineko
May 18, 2022
Tweet
Share
More Decks by dojineko
See All by dojineko
iOSのWebViewとClipboardAPI / WebView and ClipboardAPI on iOS
dojineko
0
10
最近のUnityとVRChat / About Unity and VRChat recently
dojineko
0
87
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
dojineko
0
140
ペパボ ホスティング事業部のWebフロントエンドについて 2022 / About Web Frontend of Pepabo Hosting division 2022
dojineko
0
8.5k
はじめてでもできた!VR登壇への道 / Let's VR speech!
dojineko
0
360
gRPC-WEBを使ったWEBアプリ開発/Development web-app with gRPC-WEB
dojineko
1
740
もう俺には関係なくないTypeScript/Our TypeScript
dojineko
3
300
TypeScript ではじめる Clean Architecture / Let's start Clean Architecture with TypeScript
dojineko
2
3k
Hosting meets .NET / hosting-meets-dotnet
dojineko
0
620
Other Decks in Programming
See All in Programming
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
2k
Kubernetes上でOracle_Databaseの運用を楽にするOraOperatorの紹介
nnaka2992
0
170
レイトレ合宿10 レンダラー紹介 / Renderer Introduction, Ray Tracing Camp 10
shocker_0x15
0
640
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2.1k
sqlcを利用してsqlに型付けを
kamiyam
0
250
ポケモンで考えるコミュニケーション / Communication Lessons from Pokémon
mackey0225
5
220
The future of development – Are our jobs getting harder or easier?
hollycummins
1
210
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
8
850
offers_20241022_imakiire.pdf
imakurusu
1
130
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
0
440
組織に自動テストを書く文化を根付かせる戦略(2024秋版) / Building Automated Test Culture 2024 Autumn Edition
twada
PRO
9
3.6k
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
2.1k
Featured
See All Featured
Visualization
eitanlees
143
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
Into the Great Unknown - MozCon
thekraken
31
1.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Making the Leap to Tech Lead
cromwellryan
131
8.9k
Happy Clients
brianwarren
97
6.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Music & Morning Musume
bryan
46
6.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Building Adaptive Systems
keathley
38
2.2k
Transcript
Viteはいいぞ 2022-05-18 FukuokaJS @dojineko
どじねこ @dojineko GMOペパボ / よろず屋
今日お話しする内容
もくじ ➔ Viteってなぁに? ➔ テストで活躍するVitest ➔ Node.jsアプリが作れるvite-node ➔ まとめ
Viteってなぁに?
まず「Vite」ってなぁに? • Vueの創始者Evan You氏開発の ”次世代のフロントエンドツール” ◦ 「ヴィート」と読みます (フランス語の「高速」に由来) • 高速な開発サーバーやHMR(Hot
Module Replacement)をサポート • RollupなどをベースとしておりネイティブESMで処理される • TypeScriptを標準でサポートする • ほとんどの場合には細かい設定は不要 • VueだけでなくReactやSvelte、VanillaJSなどもサポート • Nuxt.js 3 のビルドシステムとして実験的に採用された
~ 基本使用時のVite周りのざっくりとした関係図 ~ TSX CSS PNG HTML TS エントリに なるHTML
ビルド結果
Webpackで試される設定パズル力の例 .ts を babel-loaderで 処理する設定 webpackで処理する 対象に ts と js
を設定 出力先の設定
ViteでReactを使用する例 react を使う宣言だけ!
ViteでVueを使用する例 vue を使う宣言だけ!
設定がとにかくカンタン!
公式サイトは日本語対応!ブラウザ or1コマンドからはじめられる! 〜 https://ja.vitejs.dev/ 〜
• Viteプラグインの vite-plugin-node を使えば ViteのSSR機構のみを使ってAPIサーバーを開発できる ◦ https://www.npmjs.com/package/vite-plugin-node • ViteがHMRに対応しているので、 開発中には実装の変更はシームレスに反映される
• Express や Koa、Nest、fastify などの メジャーなフレームワークに対応 • フロントエンド部分がいらないよーという場合は便利 【余談】ViteでWebAPIをつくりたいときは?
テストで使えるVitest
Vitestってなあに? • Viteのビルドスタックを使ったテストフレームワーク • テストの世界にもViteの高速なビルドスタックを持ち込める ◦ もちろんESMにも標準対応 • Jestとある程度APIに互換性があり テストファイルの大きな書き換えの必要がない
• やはり設定はほとんどいらない ◦ TypeScriptで書いたテストもそのまま実行できる ◦ jest.config.json 業から解放される
Jestでも試される設定パズル力の例 TSでテストを書きたい けどたくさんの設定を 正しく書くことは難しい
細かい設定が必要なければ vite.config.ts も不要 Vitest向けのViteの設定例 かんたんだね!
expect などの テスト用関数の 参照先を変えればOK テストコードの構造 は大きな変化がない JestのテストをVitestに書き換えた例
テストが約50%高速になった! 実行時間が 約半分に! JestからVitestに移行した事例
Vitest公式でJestからの移行ガイドが用意されています ~ https://vitest.dev/guide/migration.html ~
Node.jsアプリが作れるvite-node
vite-nodeってなあに? • Vitestのコアコンポーネントの一つ ◦ Vitestが更新され続ける間は安泰(かも?) • Viteの高速なビルドスタックを使ってNode.jsアプリを作れる ◦ もちろんESMにも標準対応 •
TypeScriptで書いたコードをそのまま実行できる ◦ ts-node-esm のように使える • Viteの便利な部分をフロントエンドだけではなく、 サーバーアプリやCLIアプリの作成でも活用できる
vite-node を使ったCLIアプリの作成手法をご紹介しています! 〜 vite-nodeでNode.js製のCLIアプリを作る 〜
まとめ
まとめ • ViteはRollupなどをベースとした次世代のビルドシステム • ほとんどの場合に設定がいらない! (ほぼゼロコンフィグ) ◦ 設定ファイルのメンテナンスからの解放 • TypeScriptがすぐかけて実行できる
◦ 何かと面倒な初期設定をズバズバスキップ • 対応パッケージを使用すると、フロントエンド以外でも大活躍 ◦ vitest: 超高速でESMに対応したテストランナー! ◦ vite-node: Node.jsアプリの開発に!
Viteでもっと手軽な開発を!
None