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-hooks-testing-library にあった
renderHook
関数が提供されるようになり、RHTL は非推奨に向かうようです - とはいえ現状は RHTL にある機能が全部カバーできるわけではないようです
- react-hooks-testing-library にあった
-
- 内部の TS 化により
@types/react-redux
が不要になり、ターゲットが ES2017 になり IE11 非対応になります
- 内部の TS 化により
-
- React.FC などの暗黙的な children がなくなりました、この変更のためのtypes-react-codemodがあります
- 同時にReact.VFC が Deprecateになります
まだまだ周辺ライブラリは Concurrent Features 使用時の対応などがあるようなので、しばらく更新が多くなりそうです。
💬 Languages
-
Announcing TypeScript 4.7 Beta
- TypeScript4.7 beta のリリース
-
- クライアントサイドからサーバーサイドまで全てを Deno で作ってみよう
-
- JS の演算子の名前なんだっけなってなったらこちらをどうぞ
-
- TS Syntax の名前なんだっけなってなったらこちらをどうぞ
📖 Framework, Library
-
- vm での isolation なしで実行するので速い。もともと Babel の internal package だったものが npm にパブリッシュされた( https://github.com/babel/babel/pull/14419 )。実は Prettier もパクってた( https://github.com/prettier/prettier/pull/12592 )
-
- Vite をベースに使用した Storybook のようなツール
-
- CICD、データベース、ユーザー認証を含んだアプリケーションが簡単に構築できるセットのようなもの
-
- Storybook の plugin が Figma についに出たぞ!
-
- CSS のスタイリングを全て class 名で完結させる軽量の CSS ライブラリ
-
docs: Japanese translation v0.1 - still needs brush-up
- Lint の日本語翻訳プロジェクトが進行中。誤字とか表現が微妙なところを見つけたら貢献できるかも
-
Release v8.0.0 reduxjs/react-redux
- react-redux v8 リリース。React 18 対応や内部の TS 化等
- Release v2.0,0-beta.1 vercel/swr
-
- Vite の仕組みをざっくり理解するのに良さそう
-
Amazon Kindle UI is switching from Java to React Native
- Kindle の UI が新しく ReactNative で実装されている
🖥 Browsers
-
主要ブラウザで使える!CSS Cascade Layers で新しい CSS 設計の手法を考える
- Chrome, Firefox, Edge, Safari の最新版で導入された Cascade Layers の解説記事(nus3 作)
-
Appears to say: Microsoft Edge now provides auto-generated image labels
- Edge で Alt を自動生成する話
-
- Chrome 100 までの思い出
-
Intent to Experiment: Remove clamping of setTimeout(..., 0)
- setTimeout(fn, 0)は今まで 1ms 扱いになっていたが、標準に合わせて 0 としてすぐコールバックされるように。今までと合わせるなら setTimeout(fn, 1) にする。
-
Introducing DuckDuckGo for Mac: A Private, Fast, and Secure Browsing App
- プライベートで高速なブラウザらしい DuckDuckGo for Mac のベータ版がリリース
-
Intent to Ship: Subresource Loading with Web Bundles
- サブリソースを WebBundle して fetch いっぱつでロードする話
-
Intent to Ship: Media Queries Level 4 Syntax & Evaluation
- @media 条件を良い感じに書けるようになるやつ
-
Intent to Ship: Navigation API
- History API の改善版。特に SPA 全盛の今の Web に必要な多くの機能を入れようとしてる。
-
Intent to Ship: Speculation Rules (Prefetch)
- このページは Prefetch しておいてね、って Declarative に定義する API。これ自体は、小さい仕様だけど、最終的に Prerendering とかにも使いたい仕様の小さな一歩的な感じ。
-
- そろそろ v1 が出そうなのでそのための準備の一環か?
📏 Web Standard
-
- CSS の条件構文の標準化の話し合いで
@if ~ @else
にするか@when ~ @else
にするかで議論が起こっている
- CSS の条件構文の標準化の話し合いで
-
Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties
- メディアクエリの
forced-colors
の紹介
- メディアクエリの
-
Intent to Prototype and Ship: RFC 9225
- バグを実装してはいけないという RFC 9225 に対応するという intents(ジョーク RFC)
🎨 Design
-
Understanding Layout Algorithms
- CSS のプロパティの値を理解するだけでなく、レイアウトアルゴリズムを理解するのも大事だよって記事
-
- 色の命名規則についてのお話、
Element.State
の命名方法はなんかわかりやすそうな気がした
- 色の命名規則についてのお話、
👮♀️ Security
-
- 「Heroku」と「Travis CI」から OAuth のアクセストークンが流出して、「npm」などのプライベートリポジトリに対して不正アクセスが発生した話
-
なぜ我々は session.cookie を変更しなければならなかったのか
- Public Suffix List への追加とそれによって起きた障害?について
🦆 Others
-
CSS-Tricks joins DigitalOcean, expanding our commitment to community
- DigitalOcean が CSS -Tricks を買収した話。DigitalOcean はコミュニティを通して、バックエンドやインフラのコンテンツを提供してきたけど、今後は CSS-Tricks を介してフロントエンド関連のコンテンツも提供するよ的な話が書かれてる。
-
AWS Lambda 関数 URL: Lambda 関数用の組み込み HTTPS エンドポイント
- AWS Lambda が 単体で HTTPS エンドポイント生やせるようになった
-
When Try-Catch Doesn’t Catch Errors in Node.js
- Node.js で EventEmitter 利用時に try-catch で catch できないケースの話
-
Weekly Frontend News 2022 年 4 月 2 週目/Redwood v1,Rome Formatter,Astro v1...
- sakito weekly 4 月第 2 週号
-
Weekly Frontend News 2022 年 4 月 3 週目/react-testing-library に renderHook が追加、など
- sakito weekly 4 月第 3 週号