Viteっておいしいの？

Viteっておいしいの？ ======================= Viteとは ---------------------- Viteは2020年に発表された新しいフロントエンドのビルドツールです。 https://ja.vitejs.dev/ プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 [jQueryからTypeScript・Reactまで！ Viteで始めるモダンで高速な開発環境構築](https://ics.media/entry/210708/) また、フロントエンドだけのツールとしてだけでなくバックエンドとの統合も視野に入れられています。 [バックエンドとの統合](https://ja.vitejs.dev/guide/backend-integration.html) 従来のバックエンド（例: Rails, Laravel）を使用してHTMLを配信し、アセットの配信にViteを使用したい場合は以下を参照してください [Awesome Vite](https://github.com/vitejs/awesome-vite#integrations-with-backends) 議題/話をしたい内容 ---------------------- ### Viteに興味を持ったきっかけ(ワテ) 背景から書くと長くなりすぎるので、細かいところは話をしつつ、いったん、調べた時に見つけた参考資料のリンクだけを記載しておきます。 * [Using Vite with Inertia — Laravel, Vue & Tailwind](https://dev.to/kodeas/using-vite-with-inertia-laravel-vue-tailwind-2h5k) * 記事の冒頭部をGoogle先生に翻訳してもらった結果が以下の通り > **TLDR; ホットリロードで 5800ms (Laravel Mix) から 224ms (Vite⚡️) に！** > > 私たちは何年もLaravel-Mixを使用してきましたが、かなりうまくいっています。 > しかし、最近、Inertia.jsを使用してプロジェクトを構築することにしました > (これはすばらしい決断でした)。 > > プロジェクトが成長し始めると、開発はwebpackのコンパイルを待つのが苦痛になりました。 > > 次に、Vite(Vueの作成者であるEvan Youから)を提供することにしました。 > その結果は…驚くべきものでした! TwitterでViteをよく見かけますが、 > 正直なところ、これほどのスピードがあるとは思っていませんでした。 > > **Laravel-Mixが遅すぎました。** * [Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。](https://qiita.com/minato-naka/items/bfc3bbd9a388084e6f17) * [Laravelを使わなくても利用できるlaravel-mixでTypeScriptとSassの簡単なコンパイル環境を作ろう](https://qiita.com/igossou/items/6c0edf083bf491c63201) * [Laravel 9.x アセットの構築(Vite)](https://readouble.com/laravel/9.x/ja/vite.html) * [Inertia.js - The Modern Monolith](https://inertiajs.com) * [Redwood](https://redwoodjs.com/) * [CakePHP のリクエストサイクル](https://book.cakephp.org/4/ja/intro.html#request-cycle) - システムのライフサイクルは5年ぐらいじゃないか（式年遷宮） ### Vitest に興味あり (アカベコ) - Jest の Native ESM 対応が厄介で、よい代替ないかな？と検討していたら Vitest の評判をききました - Jest の課題は解決したのですが、競合技術として Vitest を含む Vite に興味を持ちました - 実際の使用感を聞いてみたいです #### スナップショットテスト - https://jestjs.io/ja/docs/snapshot-testing - スナップショットを持っておいて差分を検出する #### E2Eテスト - https://github.com/microsoft/playwright - https://github.com/puppeteer/puppeteer - 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](https://storybook.js.org/) Viewの単位で実際にコンポーネントを呼んで描画パターンを見せてくれるこれに対してスナップショットテストもできるでも、これは人間が見る用だと思っている ### Renovate地獄 - Renovate - Dependabot - みんな気軽にnpm追加しすぎだから。ちゃんと考えて使いましょう。 ### ViteでSSGするテンプレートを作ってしまいたい（yabonary） - 画像圧縮 + https://github.com/vbenjs/vite-plugin-imagemin `--template-react-ts` だと SSG が最初から組み込みだった。 ### GraphQLのような仕組みを使うアプローチをちゃんとやったことがないのでその知見を得たい（yabonary） - フロント側から使うサンプルはよくあるけど、GraphQLサーバとバック側の実装がいまいち見えてこない - レスポンスのキャッシュができるらしい？ - 定義ファイルを作るらしい？ - GraphQLスキーマからテーブル構造を画像化してくれるものがある ### その他、メモなど - [endoflife](https://endoflife.date/) - [Codecov - The Leading Code Coverage Solution](https://about.codecov.io/) - [循環的複雑度について](https://qiita.com/yut_arrows/items/16749e02313109071338) - [循環的複雑度でフローの複雑性を把握する](https://minor.hatenablog.com/entry/20110207/1297083896) - [PhpMetrics](https://phpmetrics.org/) - [lizard](http://www.lizard.ws/) - [PHPUnitテストコードのカバレッジを取得してみたら、85%あった話](https://zenn.dev/manalink/articles/manalink-xdebug-coverage) - [言語サーバープロトコル](https://docs.microsoft.com/ja-jp/visualstudio/extensibility/language-server-protocol?view=vs-2022) - [プロを目指す人のためのTypeScript入門安全なコードの書き方から高度な型の使い方まで](https://gihyo.jp/book/2022/978-4-297-12747-3) - [構造的部分型 (structural subtyping)](https://typescriptbook.jp/reference/values-types-variables/structural-subtyping) - [What is Gradual Typing: 漸進的型付けとは何か](https://qiita.com/t2y/items/0a604384e18db0944398) - [テンプレートメタプログラミング](https://ja.wikipedia.org/wiki/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%A1%E3%82%BF%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0) - [MUI (Material-UI) v5 のスタイリング方法 - Qiita](https://qiita.com/cieloazul310/items/d630da98439c89d773ba) - [Perforce | アプリケーション開発者向けソリューション](https://www.perforce.com/ja) https://zenn.dev/tak_dcxi/articles/26280e7607bcd2 - [Subversionリポジトリと連携できるgit-svn](https://mag.osdn.jp/09/03/26/0834222) - [Rome Toolchain](https://rome.tools/) #### アカベコの主な活動紹介 - [akabeko.me](https://akabeko.me/) - [akabekobeko (akabeko)](https://github.com/akabekobeko) - [redmine-theme-minimalflat2/README.ja.md at main · akabekobeko/redmine-theme-minimalflat2](https://github.com/akabekobeko/redmine-theme-minimalflat2/blob/main/README.ja.md) - [icon-gen - npm](https://www.npmjs.com/package/icon-gen) - [Vivliostyle — 楽しく CSS 組版！](https://vivliostyle.org/ja/) - [vivliostyle/vfm: ⬇️ Open and extendable Markdown syntax and toolchain.](https://github.com/vivliostyle/vfm) - [vivliostyle/create-book: ⚡️ Fast & frictionless book template generator.](https://github.com/vivliostyle/create-book)