こんにちは。株式会社HRBrainでフロントエンドエンジニアをしているしっぽくんです。
私たち HRBrain では週に1度30分、フロントエンドトークという「1週間の間に発見したフロントエンドに関するネタを共有もしくは相談する会」を社内で開催しています。
今回は公開第 4 回目です。過去の記事はこちら。
news
React Spectrum May 31, 2022 Release
Adobe のデザインシステムである React Spectrum のリリースノートが更新されました。
今回注目したポイントとして React v18 の対応 PR の内容です。
各種ライブラリのアップデートしつつ、完全に移行できない部分は自作されていたり[1]など参考になります。
React18 では Suspense やその他魅力的なアップデートも多くマイグレーション対応したいものの、必要な周辺ライブラリのアップデート作業が多いのでできるところから対応したいですね。
Release v7.30.0 · jsx-eslint/eslint-plugin-react
eslint-plugin-react の v7.30.0 がリリースされました。
このリリースでは新しいオプションが追加されていて、特に気になったオプションを紹介してもらいました。
In React, you might end up rendering unexpected values like 0 or NaN. In React Native, your render method will crash if you render 0, '', or NaN:
0 や NaN ではそのままレンダリングしてしまうため、lint で指摘してくれるルールです。
この仕様は知らず思わずその場で確認しました。
実際に 0 や NaN がレンダリングされているのが確認できました。
意外と知らない仕様をツールで教えてくれるのはとてもありがたいですね。
know-how
Automate accessibility tests with Storybook
先週お話したStorybook v6.5 で追加された test-runner を使った a11y 自動テストについての公式ブログ記事。
Addon 自体は前から存在しており、Storybook のパネルに Axe を実行した結果を視覚的に確認ができます。
今回の test-runner の登場により CI 上でチェックできるため、都度 Storybook を直接確認しにいく必要もなく、また気付かぬうちに壊れている状態になることも事前に防ぐことができます。
違反内容を JSON や CLI 上で表示したり、a11y tree のスナップショットを作成するなど色々とできることもあり、より a11y に配慮したコードを書くための補助ツールとして利用ができそうです。
discussion
LT で喋るテーマに悩んでいる
弊社社員の中で外部の LT に参加する人がいて、その方からの切実な相談事が持ち込まれました。
実際にどんなテーマがいいのか、こういうのはどう？みたいにディスカッションをしました。
ここでは詳細は省きますが、気になる方はぜひ実際の LT イベントに参加してみてください。
No.3 の purpleeeee さんの枠です。
あとがき
HRBrain では毎週このような内容で会をしています。他にも様々なイベントごとを毎週実施しているので気になった方は下記のリンクをクリック！
Discussion