📝

Weekly Frontend News 2022年4月1週目

2022/04/04に公開

4月がはじまった、新生活、新しい会社。いろいろとおめでとうございます🙇‍♂🌸
自分が今週見たフロントエンド記事のまとめ。

React v18.0

https://reactjs.org/blog/2022/03/29/react-v18.html

Concurrent Reactの機能を備えたReact 18のリリース。
Server Componentsはv18のどこかで追加される予定。

周辺ライブラリの更新もはじまっている。このzennのスクラップを参考にするといいかもしれない。
https://zenn.dev/arayaryoma/scraps/3845eb077129b6

Storybook builder for ViteがStorybook orgに含まれた

https://github.com/storybookjs/builder-vite

StorybookをViteで起動するbuilderである、builder for ViteがStorybook orgに入った。
いままでは有志が作ったものだったので、Storybookの機能リリースに追いつけず、バグがなおっていないことがあったが、Storybookの機能リリースでケアされることが期待される。

Figma plugin beta

https://storybook.js.org/blog/figma-plugin-beta/

StorybookをFigmaに連携するFigma plugin。
Figma上で実装とデザインを確認することができる。

New in Chrome 100

https://developer.chrome.com/blog/new-in-chrome-100/

Chrome 100の更新🎉

Astro Beta Launch Week

https://astro.build/blog/launch-week/

Astroのv1 Betaが控えているとのこと。

pixiv のデザインシステム実装『charcoal』を OSS 化します

https://inside.pixiv.blog/2022/03/31/120000

pixivのデザインシステムライブラリの話。
三層構造やスタイルの取り回しなどの解説がされている。

typescript-generatorを利用して、HTML に埋め込んだ JSON データをフロントエンドで型安全に扱う

https://blog.cybozu.io/entry/2022/03/30/174250

HTMLに埋め込んだJSONデータをフロントエンドで型安全に扱う施策について説明されている。
バックエンドとフロントエンドの型共有や生成は既存プロダクトへ導入するならさまざまな解決策を考えなければいけないが、その1つの手段が説明されている。

Ubie Design Tokensを公開しました

https://zenn.dev/ubie/articles/7a6413af237eae

Style DictionaryとFigma APIを使用してFigmaのデータをフロントエンドに落とし込む解説。

Discussion