Cybozu Frontend Monthly #22

イベント概要

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

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

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

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

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

開催日

2022年04月26日

イベントページ

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

タイムテーブル

07:50 - 08:00配信開始
08:00 - 08:05オープニング
08:05 - 08:55本編
08:55 - 09:00クロージング

メンバー


紹介記事

👀 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 対応を基本として周辺ライブラリでも変更が多くあります。 多くの人が関係ありそうなものをまとめてみました。

  • React Testing Library

    • react-hooks-testing-library にあったrenderHook関数が提供されるようになり、RHTL は非推奨に向かうようです
    • とはいえ現状は RHTL にある機能が全部カバーできるわけではないようです
  • React Redux

    • 内部の TS 化により@types/react-reduxが不要になり、ターゲットが ES2017 になり IE11 非対応になります
  • @types/react

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

💬 Languages


📖 Framework, Library


🖥 Browsers


📏 Web Standard


🎨 Design

  • Understanding Layout Algorithms

    • CSS のプロパティの値を理解するだけでなく、レイアウトアルゴリズムを理解するのも大事だよって記事
  • Colors that make sense

    • 色の命名規則についてのお話、Element.State の命名方法はなんかわかりやすそうな気がした

👮‍♀️ Security


🦆 Others

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

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