Viteはいいぞ/Vite is Good

Slide 1

Slide 1 text

Viteはいいぞ 2022-05-18 FukuokaJS @dojineko

Slide 2

Slide 2 text

どじねこ @dojineko GMOペパボ / よろず屋

Slide 3

Slide 3 text

今日お話しする内容

Slide 4

Slide 4 text

もくじ ➔ Viteってなぁに？ ➔ テストで活躍するVitest ➔ Node.jsアプリが作れるvite-node ➔ まとめ

Slide 5

Slide 5 text

Viteってなぁに？

Slide 6

Slide 6 text

まず「Vite」ってなぁに？ ● Vueの創始者Evan You氏開発の ”次世代のフロントエンドツール” ○ 「ヴィート」と読みます (フランス語の「高速」に由来) ● 高速な開発サーバーやHMR(Hot Module Replacement)をサポート ● RollupなどをベースとしておりネイティブESMで処理される ● TypeScriptを標準でサポートする ● ほとんどの場合には細かい設定は不要 ● VueだけでなくReactやSvelte、VanillaJSなどもサポート ● Nuxt.js 3 のビルドシステムとして実験的に採用された

Slide 7

Slide 7 text

～基本使用時のVite周りのざっくりとした関係図～ TSX CSS PNG HTML TS エントリになるHTML ビルド結果

Slide 8

Slide 8 text

Webpackで試される設定パズル力の例 .ts を babel-loaderで処理する設定 webpackで処理する対象に ts と js を設定出力先の設定

Slide 9

Slide 9 text

ViteでReactを使用する例 react を使う宣言だけ！

Slide 10

Slide 10 text

ViteでVueを使用する例 vue を使う宣言だけ！

Slide 11

Slide 11 text

設定がとにかくカンタン！

Slide 12

Slide 12 text

公式サイトは日本語対応！ブラウザ or１コマンドからはじめられる！〜 https://ja.vitejs.dev/ 〜

Slide 13

Slide 13 text

● Viteプラグインの vite-plugin-node を使えば ViteのSSR機構のみを使ってAPIサーバーを開発できる ○ https://www.npmjs.com/package/vite-plugin-node ● ViteがHMRに対応しているので、開発中には実装の変更はシームレスに反映される ● Express や Koa、Nest、fastify などのメジャーなフレームワークに対応 ● フロントエンド部分がいらないよーという場合は便利【余談】ViteでWebAPIをつくりたいときは？

Slide 14

Slide 14 text

テストで使えるVitest

Slide 15

Slide 15 text

Vitestってなあに？ ● Viteのビルドスタックを使ったテストフレームワーク ● テストの世界にもViteの高速なビルドスタックを持ち込める ○ もちろんESMにも標準対応 ● Jestとある程度APIに互換性がありテストファイルの大きな書き換えの必要がない ● やはり設定はほとんどいらない ○ TypeScriptで書いたテストもそのまま実行できる ○ jest.conﬁg.json 業から解放される

Slide 16

Slide 16 text

Jestでも試される設定パズル力の例 TSでテストを書きたいけどたくさんの設定を正しく書くことは難しい

Slide 17

Slide 17 text

細かい設定が必要なければ vite.conﬁg.ts も不要 Vitest向けのViteの設定例かんたんだね！

Slide 18

Slide 18 text

expect などのテスト用関数の参照先を変えればOK テストコードの構造は大きな変化がない JestのテストをVitestに書き換えた例

Slide 19

Slide 19 text

テストが約50%高速になった！実行時間が約半分に！ JestからVitestに移行した事例

Slide 20

Slide 20 text

Vitest公式でJestからの移行ガイドが用意されています ~ https://vitest.dev/guide/migration.html ~

Slide 21

Slide 21 text

Node.jsアプリが作れるvite-node

Slide 22

Slide 22 text

vite-nodeってなあに？ ● Vitestのコアコンポーネントの一つ ○ Vitestが更新され続ける間は安泰(かも？) ● Viteの高速なビルドスタックを使ってNode.jsアプリを作れる ○ もちろんESMにも標準対応 ● TypeScriptで書いたコードをそのまま実行できる ○ ts-node-esm のように使える ● Viteの便利な部分をフロントエンドだけではなく、サーバーアプリやCLIアプリの作成でも活用できる

Slide 23

Slide 23 text

vite-node を使ったCLIアプリの作成手法をご紹介しています！〜 vite-nodeでNode.js製のCLIアプリを作る〜

Slide 24

Slide 24 text

まとめ

Slide 25

Slide 25 text

まとめ ● ViteはRollupなどをベースとした次世代のビルドシステム ● ほとんどの場合に設定がいらない！ (ほぼゼロコンフィグ) ○ 設定ファイルのメンテナンスからの解放 ● TypeScriptがすぐかけて実行できる ○ 何かと面倒な初期設定をズバズバスキップ ● 対応パッケージを使用すると、フロントエンド以外でも大活躍 ○ vitest: 超高速でESMに対応したテストランナー！ ○ vite-node: Node.jsアプリの開発に！