$30 off During Our Annual Pro Sale. View Details »

Viteはいいぞ/Vite is Good

Viteはいいぞ/Vite is Good

dojineko

May 18, 2022
Tweet

More Decks by dojineko

Other Decks in Programming

Transcript

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

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

  3. 今日お話しする内容

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

  5. Viteってなぁに?

  6. まず「Vite」ってなぁに? • Vueの創始者Evan You氏開発の ”次世代のフロントエンドツール” ◦ 「ヴィート」と読みます (フランス語の「高速」に由来) • 高速な開発サーバーやHMR(Hot

    Module Replacement)をサポート • RollupなどをベースとしておりネイティブESMで処理される • TypeScriptを標準でサポートする • ほとんどの場合には細かい設定は不要 • VueだけでなくReactやSvelte、VanillaJSなどもサポート • Nuxt.js 3 のビルドシステムとして実験的に採用された
  7. ~ 基本使用時のVite周りのざっくりとした関係図 ~ TSX CSS PNG HTML TS エントリに なるHTML

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

    を設定 出力先の設定
  9. ViteでReactを使用する例 react を使う宣言だけ!

  10. ViteでVueを使用する例 vue を使う宣言だけ!

  11. 設定がとにかくカンタン!

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

  13. • Viteプラグインの vite-plugin-node を使えば ViteのSSR機構のみを使ってAPIサーバーを開発できる ◦ https://www.npmjs.com/package/vite-plugin-node • ViteがHMRに対応しているので、 開発中には実装の変更はシームレスに反映される

    • Express や Koa、Nest、fastify などの メジャーなフレームワークに対応 • フロントエンド部分がいらないよーという場合は便利 【余談】ViteでWebAPIをつくりたいときは?
  14. テストで使えるVitest

  15. Vitestってなあに? • Viteのビルドスタックを使ったテストフレームワーク • テストの世界にもViteの高速なビルドスタックを持ち込める ◦ もちろんESMにも標準対応 • Jestとある程度APIに互換性があり テストファイルの大きな書き換えの必要がない

    • やはり設定はほとんどいらない ◦ TypeScriptで書いたテストもそのまま実行できる ◦ jest.config.json 業から解放される
  16. Jestでも試される設定パズル力の例 TSでテストを書きたい けどたくさんの設定を 正しく書くことは難しい

  17. 細かい設定が必要なければ vite.config.ts も不要 Vitest向けのViteの設定例 かんたんだね!

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

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

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

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

  22. vite-nodeってなあに? • Vitestのコアコンポーネントの一つ ◦ Vitestが更新され続ける間は安泰(かも?) • Viteの高速なビルドスタックを使ってNode.jsアプリを作れる ◦ もちろんESMにも標準対応 •

    TypeScriptで書いたコードをそのまま実行できる ◦ ts-node-esm のように使える • Viteの便利な部分をフロントエンドだけではなく、 サーバーアプリやCLIアプリの作成でも活用できる
  23. vite-node を使ったCLIアプリの作成手法をご紹介しています! 〜 vite-nodeでNode.js製のCLIアプリを作る 〜

  24. まとめ

  25. まとめ • ViteはRollupなどをベースとした次世代のビルドシステム • ほとんどの場合に設定がいらない! (ほぼゼロコンフィグ) ◦ 設定ファイルのメンテナンスからの解放 • TypeScriptがすぐかけて実行できる

    ◦ 何かと面倒な初期設定をズバズバスキップ • 対応パッケージを使用すると、フロントエンド以外でも大活躍 ◦ vitest: 超高速でESMに対応したテストランナー! ◦ vite-node: Node.jsアプリの開発に!
  26. Viteでもっと手軽な開発を!

  27. None