diff --git a/_i18n/ja/_posts/2024/2024-03-19-storybook-8-nuxt-3.11-cloudflare-workers-vitest.md b/_i18n/ja/_posts/2024/2024-03-19-storybook-8-nuxt-3.11-cloudflare-workers-vitest.md new file mode 100644 index 00000000000..06a59d146e9 --- /dev/null +++ b/_i18n/ja/_posts/2024/2024-03-19-storybook-8-nuxt-3.11-cloudflare-workers-vitest.md @@ -0,0 +1,215 @@ +--- +title: "2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest" +author: "azu" +layout: post +date: 2024-03-19T03:24:43.652Z +category: JSer +tags: +- React +- test +- CSS +- vite +- Tools + +--- + +JSer.info #685 - Storybook 8.0がリリースされました。 + +- [Storybook 8](https://storybook.js.org/blog/storybook-8/) +- [Storybook: UI component explorer for frontend developers](https://storybook.js.org/releases/8.0) + +破壊的な変更として、`storiesOf` APIの削除、`*.stories.mdx`の削除、StoryShots addonの削除、Yarn v1のサポート終了などが行われています。 +詳細はマイグレーションガイドを参照してください。 + +- [Migration guide for Storybook 8.0 • Storybook docs](https://storybook.js.org/docs/migration-guide?ref=storybookblog.ghost.io) + +機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。 +そのほかには、SWCを使うことでビルドパフォーマンスの改善、`react-docgen`がデフォルトとなるように変更、`react`をpeerDependenciesから除外するなどの変更が行われています。 + +--- + +Nuxt 3.11がリリースされました。 + +- [Nuxt 3.11 · Nuxt Blog](https://nuxt.com/blog/v3-11) + +ログ表示の改善、`usePreviewMode`の追加、`appMiddleware`の追加が行われています。 +また、サーバ専用の`.server.vue`とクライアント専用の`.client.vue`というファイル名による定義がサポートされています。 + +---- + +次の記事では、Vitestを使ったCloudflare Workersのテストについて紹介されています。 + +- [Improved Cloudflare Workers testing via Vitest and workerd](https://blog.cloudflare.com/workers-vitest-integration/) +- [Vitest integration · Cloudflare Workers docs](https://developers.cloudflare.com/workers/testing/vitest-integration/) + +Vitestはテストを分離したWorkerなどで実行できますが、[Custom Pool](https://vitest.dev/advanced/pool.html)を使うことでテストを実行する環境を独自に定義することができます。 +[@cloudflare/vitest-pool-workers](https://www.npmjs.com/package/@cloudflare/vitest-pool-workers)では、Miniflareでテストコードを実行できるCustom Poolが実装されています。 +これによって、ローカルでもCloudflre Workersのテストを実行することができるようになったという話が紹介されています。 + +---- + +{% include inline-support.html %} + +---- + +

ヘッドライン

+ +---- + +## Release 5.11.0 · prisma/prisma +[github.com/prisma/prisma/releases/tag/5.11.0](https://github.com/prisma/prisma/releases/tag/5.11.0 "Release 5.11.0 · prisma/prisma") +

prisma ReleaseNote

+ +Prisma 5.11.0リリース。 +Cloudflare Workers(Vercel Edge)などのEdge functionがプレビューサポートされた。 + +- [Prisma ORM support for Edge functions is now in Preview](https://www.prisma.io/blog/prisma-orm-support-for-edge-functions-is-now-in-preview "Prisma ORM support for Edge functions is now in Preview") + +---- + +## Storybook 8 +[storybook.js.org/blog/storybook-8/](https://storybook.js.org/blog/storybook-8/ "Storybook 8") +

storybook JavaScript Design debug ReleaseNote

+ +Storybook 8リリース。 +破壊的な変更として、`storiesOf` APIの削除、`*.stories.mdx`の削除、StoryShots addonの削除、Yarn v1のサポート終了。 +機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。 +そのほかには、SWCを使うことでビルドパフォーマンスの改善、`react-docgen`がデフォルトとなるように変更、`react`をpeerDependenciesから除外するなど + +- [Storybook: UI component explorer for frontend developers](https://storybook.js.org/releases/8.0 "Storybook: UI component explorer for frontend developers") +- [storybook/MIGRATION.md at next · storybookjs/storybook](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-7x-to-800 "storybook/MIGRATION.md at next · storybookjs/storybook") + +---- + +## Bun v1.0.31 | Bun Blog +[bun.sh/blog/bun-v1.0.31](https://bun.sh/blog/bun-v1.0.31 "Bun v1.0.31 | Bun Blog") +

Bun ReleaseNote

+ +Bun v1.0.31リリース。 +`bun --print`の追加、Stdinからコードを実行できるように、`bun add --trust `の追加、`bun pm trust`/`bun pm untrusted`の追加。 +`fetch()`に`unix`オプションを追加しUnix Socketsをサポート。 +Node.js 21.7.0で追加された`util.styleText`のサポートなど + +- [Node.js — Node v21.7.0 (Current)](https://nodejs.org/en/blog/release/v21.7.0 "Node.js — Node v21.7.0 (Current)") + +---- + +## Nuxt 3.11 · Nuxt Blog +[nuxt.com/blog/v3-11](https://nuxt.com/blog/v3-11 "Nuxt 3.11 · Nuxt Blog") +

Vue library ReleaseNote

+ +Nuxt v3.11リリース。 +ログ表示の改善、`usePreviewMode`の追加、`appMiddleware`の追加。 +サーバ専用の`.server.vue`とクライアント専用の`.client.vue`をサポートなど + + +---- + +## Elysia 1.0 - Lament of the Fallen | ElysiaJS +[elysiajs.com/blog/elysia-10](https://elysiajs.com/blog/elysia-10 "Elysia 1.0 - Lament of the Fallen | ElysiaJS") +

Bun server ReleaseNote

+ +Bun向けのHTTPサーバフレームワークのElysia 1.0リリース。 +起動時間の改善、Type Checkのパフォーマンス改善、`onBeforeHandle`などに`as`オプションを追加など + + +---- +

アーティクル

+ +---- + +## Server Actions時代のformライブラリconform +[zenn.dev/akfm/articles/server-actions-with-conform](https://zenn.dev/akfm/articles/server-actions-with-conform "Server Actions時代のformライブラリconform") +

Next.js React article

+ +Server Actionsに対応したフォームライブラリであるConformについて + +- [Conform / Overview](https://conform.guide/ "Conform / Overview") + +---- + +## Improved Cloudflare Workers testing via Vitest and workerd +[blog.cloudflare.com/workers-vitest-integration/](https://blog.cloudflare.com/workers-vitest-integration/ "Improved Cloudflare Workers testing via Vitest and workerd") +

cloudflare vite test article

+ +VitestでCloudflare Workersのテストを行う方法について。 +`@cloudflare/vitest-pool-workers`を使うことで、Workerに対するUnit Testができる仕組みについて。 +VitestのCustom Poolを使うことで、テストをworkerdのプロセス内で実行している。 + +- [Vitest integration · Cloudflare Workers docs](https://developers.cloudflare.com/workers/testing/vitest-integration/ "Vitest integration · Cloudflare Workers docs") + +---- + +## Best Practices for Writing Tests with React Testing Library | ClarityDev blog +[claritydev.net/blog/improving-react-testing-library-tests](https://claritydev.net/blog/improving-react-testing-library-tests "Best Practices for Writing Tests with React Testing Library | ClarityDev blog") +

React test article

+ +React Testing LibraryでのReactコンポーネントのテストについて。 +コンポーネントをRoleでselectする方法やデバッグ方法、`userEvent`、"not wrapped in act(...)"の警告についてなど + + +---- + +## Implementing Vertical Form Controls | WebKit +[www.webkit.org/blog/15190/implementing-vertical-form-controls/](https://www.webkit.org/blog/15190/implementing-vertical-form-controls/ "Implementing Vertical Form Controls | WebKit") +

webkit CSS safari article

+ +WebKitでのCSS `writing-mode`による縦書きフォームのサポートについて。 + + +---- +

スライド、動画関係

+ +---- + +## エディター付きのReact開発環境を ブラウザーだけで実装した話 - Speaker Deck +[speakerdeck.com/steelydylan/edeitafu-kinoreactkai-fa-huan-jing-wo-burauzadakedeshi-zhuang-sitahua](https://speakerdeck.com/steelydylan/edeitafu-kinoreactkai-fa-huan-jing-wo-burauzadakedeshi-zhuang-sitahua "エディター付きのReact開発環境を ブラウザーだけで実装した話 - Speaker Deck") +

React ServiceWorker slide

+ +プレビュー機能付きのエディタの実装についてのスライド。 +エディタ上の重たい処理をWeb Worker上に逃す方法、Service Worker内でTypeScriptのトランスパイルの実装などについて + + +---- +

サイト、サービス、ドキュメント

+ +---- + +## ECSS — Simple Rules for efficient CSS +[ecss.info/en/](https://ecss.info/en/ "ECSS — Simple Rules for efficient CSS") +

CSS document Tools

+ +予測可能なCSSを書くためのデザインガイドとstylelintのルール + + +---- +

ソフトウェア、ツール、ライブラリ関係

+ +---- + +## guidepup/virtual-screen-reader: Virtual Screen Reader is a screen reader simulator for unit tests. +[github.com/guidepup/virtual-screen-reader](https://github.com/guidepup/virtual-screen-reader "guidepup/virtual-screen-reader: Virtual Screen Reader is a screen reader simulator for unit tests.") +

accessibility test library

+ +Unit Testに利用できるスクリーンリーダのシミュレータライブラリ + +- [Simple setup: Virtual Screen Reader in Storybook - DEV Community](https://dev.to/scottnath/simple-setup-virtual-screen-reader-in-storybook-2efo "Simple setup: Virtual Screen Reader in Storybook - DEV Community") + +---- + +## MistCSS +[typicode.github.io/mistcss/](https://typicode.github.io/mistcss/ "MistCSS") +

CSS React Tools

+ +CSSからReactコンポーネントを作成するツール。 +CSSを書いて、そのCSSからRectコンポーネントを生成する仕組みになっている。 +data属性をPropsとして扱う、`@scope`でスコープを扱うなど + +---- + +## devongovett/unplugin-parcel-macros +[github.com/devongovett/unplugin-parcel-macros](https://github.com/devongovett/unplugin-parcel-macros "devongovett/unplugin-parcel-macros") +

parcel plugin webpack rollup vite esbuild

+ +Parcelのmacroと同じものをwebpack/rollup/Vite/esbuildで利用できるようにするプラグイン。 +import attributesの構文を使いビルド時にマクロ的な処理を行う仕組み