Cybozu Frontend Monthly #22

タイトル画像

イベント概要

サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエキスパートチームのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。

※フロントエンドウィークリーとは

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ #サイボウズフロントエンドウィークリー で実況しています。

zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend

開催日

2022年04月26日

イベントページ

https://cybozu.connpass.com/event/246037/

配信URL

https://www.youtube.com/watch?v=iac7CI7_G8k

メンバー


コンテンツ

👀 Notable Articles

nuxt3 の rc 版がリリースされました @nakajmg

当初 3 月リリースが予定されていましたが、2 回の延期を経て rc 版が 4/20 にリリースされました!

Migration Guide には 2 と Bridge 版と 3 の機能比較が掲載されていますが、Nuxt 2 からの進化に対する自信が見えて非常に楽しみです。

https://v3.nuxtjs.org/getting-started/migration/

今後の Web フロントエンドにどのような影響が出てくるのか注目です。

Performance Tool in Firefox DevTools Reloaded @b4h0-c4t

Firefox 98 から Dev Tools に新しいパフォーマンス計測機能が実装されました。 新しいパフォーマンス計測機能では、以下の新しい機能群によって不具合等を発見・共有する体験が向上します。

また、新しい UI のリリースと合わせて UI Tour も公開されているため、使い方に困ったらドキュメントで詳しく確認できるのも良いですよね。

現時点では対応言語に日本語は含まれていませんが、本機能は OSS として公開されているので貢献のチャンスですよ。 firefox-devtools/profiler

Test component interactions with Storybook @nus3_

Storybook 上でのコンポーネントのインタラクションのテスト方法についての解説記事です。

@storybook/addon-interactionsを使ったinteractions panelや、@storybook/testing-libraryを使って Story の play 関数にユーザー操作を定義したり、実際に定義したユーザー操作のテストを@storybook/test-runner使った実行。また、その定義したテストを CI 上で実行する方法などが紹介されています。

単にコンポーネントのカタログとして Storybook を利用するだけではなく、コンポーネントのテスト戦略も Storybook をベースとして考えることができそうです。

このほかにも Storybook のブログでは今月(3 末のもある)、次の記事が出たので気になる方は読んでみてください!

React 18 リリースと周辺ライブラリのバージョンアップ @__sakito__

React 18 がリリースされました(3 末だけど)、これに伴い React 18 対応を基本として周辺ライブラリでも変更が多くあります。 多くの人が関係ありそうなものをまとめてみました。

まだまだ周辺ライブラリは Concurrent Features 使用時の対応などがあるようなので、しばらく更新が多くなりそうです。

💬 Languages


📖 Framework, Library


🖥 Browsers


📏 Web Standard


🎨 Design


👮‍♀️ Security


🦆 Others

フロントエンドエキスパートチームについて

https://speakerdeck.com/cybozuinsideout/frontendexpert-team