🏄
Matsuri-tech Frontend Weekly 2023-12-01

hrdtbs

hrdtbs

2023年12月1日
BiomeStorybookMFW

社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。

社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# Biome v1.4.0 - Biome formatter wins the Prettier challenge

2023年11月27日にBiome v1.4.0がリリースされました。

Biome formatter wins the Prettier challenge

Prettier を Rust で書き換えたプロジェクトに報奨金$20k を支払うプログラムは Biomeが勝ち取りました。

$20k Bounty was Claimed! · PrettierPrettier, a JavaScript code formatter, has seen an incredible adoption thanks to its careful handling of the very, very, long tail of ways people can write code. At this point, the formatting logic has been solid and after our work on [ternaries](https://prettier.io/blog/2023/11/13/curious-ternaries) lands, it will be in a happy state.$20k Bounty was Claimed! · Prettier

Biome v1.4.0では、JS/TS/JSXのフォーマットが96%以上Prettier互換になりました。

# Storybook 7.6

2023年11月29日にStorybook 7.6がリリースされました。

Storybook 7.6

Storybook 8に向けたパフォーマンスやUXの改善が行われています。Webpackプロジェクトでは、BabelからSWCへ移行することで、start timeが50%以上短縮されます。

// .storybook/main.js
export default {
  framework: {
    name: '@storybook/your-framework', // react-webpack5|next|vue-webpack5|etc
    options: { builder: { useSWC: true } }
  }
};

テストの改善も行われています。@storybook/test はJestではなくVitestのexpectを利用するようになりました。またテストモード --testにより、docgen分析の実行やドキュメントのコンパイルなどを省いてテストを実行することが出来るようになりました。

# Getting started with CSS container queries | MDN Blog

MDNによるCSSのContainer queryの紹介記事。基本的な使い方が丁寧に解説されている。

Getting started with CSS container queries | MDN BlogCSS container queries are a powerful new tool for our CSS layout toolbox. In this post we'll dive into the practicalities of building a layout with container queries.Getting started with CSS container queries | MDN Blog