Frontend Weekly 2024-03-15
Storybook v8
2024 年 3 月 11 日に、Storybook 8 がリリースされました。
RSC のサポート
React Server Component がサポートされました。
Build a Next.js app in Storybook with React Server Components and Mock Service Worker
Vite5 のサポート及び Vitest によるテスト
Vite5 がサポートされ、Vitest がフレームワークの一部として統合されました。Vitest による@storybook/test は、@storybook/jest と@storybook/testing-library と互換性が置き換えるものです。
Test flag
テスト用にドキュメントなどの標準機能を無効にする—-testフラグが追加されました。これによりテストが高速化されます。
Built-in visual testing
Chromatic によるビジュアルテストを Storybook 上から実行できるようになりました。
破壊的な変更
storiesOf API、*.stories.mdxフォーマット、Storyshots が削除されました。
Rolldown
Vite の次世代バンドラとして開発されてきた Rolldown が公開。Vite のバンドラが置き換わったわけではない。
https://github.com/rolldown/rolldown
Vite は内部的に 2 つのバンドラ Rollup、esbuild が利用されている。Rolldown は、これによる問題を解消するために作られている Rollup 互換のバンドラ。
Biome v1.6
extends プロパティで他の構成ファイルを解決できるようになった。Prettier から移行するスクリプトの追加など。
unplugin-parcel-macros
Parcel の macro と同じことを webpack や rollup、Vite、esbuild で出来るようにするプラグインです。
https://github.com/devongovett/unplugin-parcel-macros
マクロはバンドル時に実行される。
元は Bun の機能。
Others
JSON Canvas
Obsidian Canvas のフォーマットが JSON Canvas と名付けられてオープンソースとして公開された。このフォーマットは解析が容易で、ユーザーにデータの所有権を与えるように設計されている。
Announcing JSON Canvas: an open file format for infinite canvas data
Astro Studio
<!— 他の人が詳しいと思うのでやらない —>
良い。TDD の考案者 Kent Beck が TDD の定義を改めて明確化した文章を t-wada さんが翻訳した記事。t-wada さんの”翻訳してみて”を見てから、翻訳を見るとより理解しやすいかも。
Similarly, an id starting with a digit (E.g., 1234-322-678) or a hyphen followed by a digit (E.g., -123), though valid in HTML, may lead to problems when used in CSS, JavaScript, and Web APIs:
id - HTML: HyperText Markup Language | MDN
<!— 誰か話してた気がする —>
SameSite Cookie にして Origin ヘッダーのチェック、 Sec-Fetch-* ヘッダーも有効
CSRF 対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
Lean と DevOps の科学は、流し読みでも思ってたのと違うなと思えるので良いぞ。これは今井さんのスライド。
『Lean と DevOps の科学』をきちんと解読する 〜Four Keys だけじゃ絶対もったいなくなる話〜
本読むの面倒であれば、この辺でも。
https://yigarashi.hatenablog.com/entry/2022/05/30/093000#Four-Keys の妥当性
https://engineering.visional.inc/blog/412/devops-days-tokyo-2022-after/
サバイバル TypeScript GPTs
React Compiler の講演をもとにした解説記事
Test に利用できるスクリーンリーダーのシミュレーターライブラリ
https://github.com/guidepup/virtual-screen-reader
Cloudflare アプリケーションと React サーバー コンポーネントもサポートする最速の Javascript Web サーバーらしい。Firefox のエンジンである SpiderMonkey をベースにしている。
Deno、Node.js、Cloudflare Workers などが参画する、非 Web ブラウザ系 JavaScript ランタイムのコード互換を目指す WinterCG 互換
面白そう。読んでない。