Viteっておいしいの？

Viteとは

Viteは2020年に発表された新しいフロントエンドのビルドツールです。
https://ja.vitejs.dev/

プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。

jQueryからTypeScript・Reactまで！ Viteで始めるモダンで高速な開発環境構築

また、フロントエンドだけのツールとしてだけでなく
バックエンドとの統合も視野に入れられています。

バックエンドとの統合

従来のバックエンド（例: Rails, Laravel）を使用してHTMLを配信し、
アセットの配信にViteを使用したい場合は以下を参照してください

Awesome Vite

議題/話をしたい内容

Viteに興味を持ったきっかけ(ワテ)

背景から書くと長くなりすぎるので、細かいところは話をしつつ、
いったん、調べた時に見つけた参考資料のリンクだけを記載しておきます。

  • システムのライフサイクルは5年ぐらいじゃないか（式年遷宮）

Vitest に興味あり (アカベコ)

  • Jest の Native ESM 対応が厄介で、よい代替ないかな？と検討していたら Vitest の評判をききました
  • Jest の課題は解決したのですが、競合技術として Vitest を含む Vite に興味を持ちました
  • 実際の使用感を聞いてみたいです

スナップショットテスト

E2Eテスト

テストの話

  • Jest
  • CodeseptJS

PRの時にテストがないと怒られる

テストにコメントを書いてください
expectに対して、何を目的に書いてるのかを明らかにする

単体テスト

関数レベルのテスト

mockが重要

1個の関数で完結していたらテストは悩まずに書けるが、reactとか使っているとその中でさらに依存が、入れ子が・・・となるとDIが必要になってくる。

DIをやってくれるのがJestだとmockと呼ばれている。

mockまでいけるとすごく万能

スナップショットテスト

GUIが関わる、Viewのテスト
Reactの場合はHooksを使う

機能退行（デグレ）を見る
レグレッションテスト

E2Eテスト

Seleniumとか使うやつ

GitHubActionsだと回しにくいので、playwriteやpuppeteerを使うといい
ヘッドレスブラウザ系

CLIでchromeを立ち上げて、カーソルぐりぐりとかできる

Storybook

Viewの単位で実際にコンポーネントを呼んで描画パターンを見せてくれる

これに対してスナップショットテストもできる

でも、これは人間が見る用だと思っている

Renovate地獄

  • Renovate
  • Dependabot
  • みんな気軽にnpm追加しすぎだから。ちゃんと考えて使いましょう。

ViteでSSGするテンプレートを作ってしまいたい （yabonary）

--template-react-ts だと SSG が最初から組み込みだった。

GraphQLのような仕組みを使うアプローチをちゃんとやったことがないのでその知見を得たい （yabonary）

  • フロント側から使うサンプルはよくあるけど、GraphQLサーバとバック側の実装がいまいち見えてこない

  • レスポンスのキャッシュができるらしい？

  • 定義ファイルを作るらしい？

  • GraphQLスキーマからテーブル構造を画像化してくれるものがある

その他、メモなど

アカベコの主な活動紹介

Select a repo