2024-06-13のJS: Storybook 8.1、Turborepo 2.0、Node v22.3.0(Snapshot Testing)

_i18n/ja/_posts/2024/2024-06-13-storybook-8.1-turborepo-2.0-node-v22.3.0snapshot-testing.md

@@ -0,0 +1,210 @@
+---
+title: "2024-06-13のJS: Storybook 8.1、Turborepo 2.0、Node v22.3.0(Snapshot Testing)"
+author: "azu"
+layout: post
+date: 2024-06-13T04:55:14.651Z
+category: JSer
+tags:
+- nodejs
+- TypeScript
+- Tools
+- test
+- RegExp
+
+---
+
+JSer.info #696 - Storybook 8.1がリリースされました。
+
+- [Storybook 8.1](https://storybook.js.org/blog/storybook-8-1/)
+
+Storyファイルを作成するUIの追加、Subpath importsを使ったモックの対応、Playwright Component Testの対応しています。
+
+`pacakge.json`の`imports`フィールドで特定のモジュールを条件分岐して読み分けるための仕組みである[Subpath imports](https://nodejs.org/api/packages.html#subpath-imports)については、次の記事でも解説されています。
+
+- [Type-safe module mocking in Storybook](https://storybook.js.org/blog/type-safe-module-mocking/?ref=storybookblog.ghost.io)
+- [Mocking modules • Storybook docs](https://storybook.js.org/docs/writing-stories/mocking-modules?ref=storybookblog.ghost.io)
+
+その他には、React 19/Angular 18のサポートなども含まれています。
+
+---
+
+Turborepo 2.0がリリースされました。
+
+- [Turborepo 2.0](https://turbo.build/blog/turbo-2-0)
+
+Turborepoはmonorepo向けのビルド/タスク管理ツールです。
+Turborepo 2.0ではターミナルUIの刷新、`persistent`オプションの追加、`turbo watch`の追加、ドキュメントの刷新などが行われています。
+
+---
+
+Node.js 22.3.0がリリースされました。
+
+- [Node.js — Node v22.3.0 (Current)](https://nodejs.org/en/blog/release/v22.3.0)
+
+`Buffer`に`bytes()`を実装、experimentalフラグ付きでTest RunnerでのSnapshot Testingが実装されています。
+
+- https://nodejs.org/api/test.html#snapshot-testing
+- [test_runner: add snapshot testing by cjihrig · Pull Request #53169 · nodejs/node](https://github.com/nodejs/node/pull/53169)
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Announcing TypeScript 5.5 RC - TypeScript
+[devblogs.microsoft.com/typescript/announcing-typescript-5-5-rc/](https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-rc/ "Announcing TypeScript 5.5 RC - TypeScript")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">ReleaseNote</span></p>
+
+TypeScript 5.5 RCリリース。
+関数からtype predicatesを推論できるようになり、`Array.prototype.filter`などでの絞り込みが簡潔に書けるように。
+Stage 3のSet Methodsをサポート。
+JSDocで`@import {foo} from "foo"`をサポート、正規表現の基本的な構文チェックをサポート、`isolatedDeclarations`をサポート。
+設定ファイル内で`${configDir}`のテンプレート値をサポート。
+`typescript`パッケージのサイズを削減、Named Importをサポート、`transpileDeclaration` APIの追加。
+`transpileModule`と`transpileDeclaration`でのビルド時間を改善。
+`out`や`target: ES3`などの非推奨となっていたオプションが無効化され、`ignoreDeprecations`オプションを指定しないと利用できなくなる変更など
+
+
+----
+
+## Release CLI v1.8.0 · biomejs/biome
+[github.com/biomejs/biome/releases/tag/cli%2Fv1.8.0](https://github.com/biomejs/biome/releases/tag/cli%2Fv1.8.0 "Release CLI v1.8.0 · biomejs/biome")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Biome v1.8.0リリース。
+`biome clean`コマンドを追加、`biome lint`に`--only`と`--skip`フラグを追加、CSSのformatとlintをサポートなど
+
+
+----
+
+## power-assert-monorepo/packages/node at main · twada/power-assert-monorepo
+[github.com/twada/power-assert-monorepo/tree/main/packages/node](https://github.com/twada/power-assert-monorepo/tree/main/packages/node "power-assert-monorepo/packages/node at main · twada/power-assert-monorepo")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">test</span> <span class="jser-tag">library</span></p>
+
+Node.jsの`--import`に対応したpower-assert
+
+
+----
+
+## Storybook 8.1
+[storybook.js.org/blog/storybook-8-1/](https://storybook.js.org/blog/storybook-8-1/ "Storybook 8.1")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">UI</span> <span class="jser-tag">test</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Storybook 8.1リリース。
+Storyファイルを作成するUIの追加、Subpath importsを使ったモックの対応、Playwright Component Testの対応。
+React 19/Angular 18のサポートなど
+
+
+----
+
+## Release v1.0.0 · tinylibs/tinypool
+[github.com/tinylibs/tinypool/releases/tag/v1.0.0](https://github.com/tinylibs/tinypool/releases/tag/v1.0.0 "Release v1.0.0 · tinylibs/tinypool")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+tinypool 1.0.0リリース。
+Node.jsの`worker_threads`のWorker Poolの実装ライブラリ
+
+
+----
+
+## Turborepo 2.0
+[turbo.build/blog/turbo-2-0](https://turbo.build/blog/turbo-2-0 "Turborepo 2.0")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">monorepo</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Turborepo 2.0リリース。
+ターミナルUIの刷新、`persistent`オプションの追加、`turbo watch`の追加、ドキュメントの刷新など。
+
+
+----
+
+## Firefox 127.0, See All New Features, Updates and Fixes
+[www.mozilla.org/en-US/firefox/127.0/releasenotes/](https://www.mozilla.org/en-US/firefox/127.0/releasenotes/ "Firefox 127.0, See All New Features, Updates and Fixes")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Firefox</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Firefox 127リリース。
+`<base>`要素に`data:`と`javascript:`が指定できないように変更、Stage 3のSet Methodsをサポート、async Clipboard APIのサポートなど
+
+- [Firefox 127 for developers - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/127 "Firefox 127 for developers - Mozilla | MDN")
+
+----
+
+## Node.js — Node v22.3.0 (Current)
+[nodejs.org/en/blog/release/v22.3.0](https://nodejs.org/en/blog/release/v22.3.0 "Node.js — Node v22.3.0 (Current)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v22.3.0リリース。
+`Buffer`に`bytes()`を実装、experimentalフラグ付きでTest RunnerでのSnapshot Testingを実装、`NODE_RUN_SCRIPT_NAME`を追加など
+
+
+----
+
+## News from WWDC24: WebKit in Safari 18 beta | WebKit
+[webkit.org/blog/15443/news-from-wwdc24-webkit-in-safari-18-beta/](https://webkit.org/blog/15443/news-from-wwdc24-webkit-in-safari-18-beta/ "News from WWDC24: WebKit in Safari 18 beta | WebKit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">webkit</span> <span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Safari 18 bettaの変更点について。
+View Transition APIのサポート、Style Queriesのサポート、`@starting-style`と　`display: none`の組み合わせをサポート。
+`justify-content: safe center`のサポート、`content-visibility`をサポート。
+`<input type=date>`のアクセシビリティの改善、`URL.parse()`のサポート、JPEG2000のサポートを削除など
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Data Fetching Patterns in Single-Page Applications
+[martinfowler.com/articles/data-fetch-spa.html](https://martinfowler.com/articles/data-fetch-spa.html "Data Fetching Patterns in Single-Page Applications")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">article</span></p>
+
+ReactのクライアントサイドでのData Fetchのパターンについて
+
+
+----
+
+## Mastering Node.js Performance Hooks
+[pavel-romanov.com/nodejs-performance-hooks-mastering-the-mental-model](https://pavel-romanov.com/nodejs-performance-hooks-mastering-the-mental-model "Mastering Node.js Performance Hooks")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p>
+
+ユーザーの端末の影響を受けるwall clockとパフォーマンスの計測に適したmonotonic clockについて。
+Node.jsの`perf_hooks`モジュールで利用できる`PerformanceObserver`では monotonic clockの時間を取得でき、基本的な使い方についてなど
+
+
+----
+
+## WebAssembly JSPI has a new API · V8
+[v8.dev/blog/jspi-newapi](https://v8.dev/blog/jspi-newapi "WebAssembly JSPI has a new API · V8")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebAssembly</span> <span class="jser-tag">Promises</span> <span class="jser-tag">article</span></p>
+
+WebAssemblyのJavaScript Promise Integrationについて
+
+
+----
+
+## TypeScriptの型と値とバリデーション
+[zenn.dev/mizchi/articles/typescript-type-value-validation](https://zenn.dev/mizchi/articles/typescript-type-value-validation "TypeScriptの型と値とバリデーション")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span></p>
+
+TypeScriptは基本的にはJavaScriptへ型情報を付与するだけであるため、Runtimeの動作としてはJavaScriptと変わらないという話。
+バリデーションと型について
+
+- [TypeScript Design Goals · microsoft/TypeScript Wiki](https://github.com/microsoft/TypeScript/wiki/TypeScript-Design-Goals "TypeScript Design Goals · microsoft/TypeScript Wiki")
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## slevithan/regex: Context-aware regex template tag with best practices built-in and advanced features
+[github.com/slevithan/regex](https://github.com/slevithan/regex "slevithan/regex: Context-aware regex template tag with best practices built-in and advanced features")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">RegExp</span> <span class="jser-tag">library</span></p>
+
+正規表現をTagged Templateで書けるライブラリ
+
+
+----