Cybozu Frontend Monthly #22

イベント概要

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

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

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

開催日

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 末のもある)、次の記事が出たので気になる方は読んでみてください！

• Figma plugin beta
• Storybook Lazy Compilation for Webpack

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
  • React.FC などの暗黙的な children がなくなりました、この変更のためのtypes-react-codemodがあります
  • 同時にReact.VFC が Deprecateになります

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

💬 Languages

• Announcing TypeScript 4.7 Beta
  • TypeScript4.7 beta のリリース
• Doing It All With Deno
  • クライアントサイドからサーバーサイドまで全てを Deno で作ってみよう
• Operator Lookup
  • JS の演算子の名前なんだっけなってなったらこちらをどうぞ
• TypeScript 解読アシスタント
  • TS Syntax の名前なんだっけなってなったらこちらをどうぞ

---

📖 Framework, Library

• jest-light-runner
  • vm での isolation なしで実行するので速い。もともと Babel の internal package だったものが npm にパブリッシュされた( https://github.com/babel/babel/pull/14419 )。実は Prettier もパクってた( https://github.com/prettier/prettier/pull/12592 )
• Introducing Ladle
  • Vite をベースに使用した Storybook のようなツール
• Remix Stacks
  • CICD、データベース、ユーザー認証を含んだアプリケーションが簡単に構築できるセットのようなもの
• Figma plugin beta
  • Storybook の plugin が Figma についに出たぞ！
• Master Styles
  • 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
• 350 行でつくる Vite⚡
  • 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 を自動生成する話
• #100CoolWebMoments
  • 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 とかにも使いたい仕様の小さな一歩的な感じ。
• SvelteKit で Turborepo が採用
  • そろそろ v1 が出そうなのでそのための準備の一環か？

---

📏 Web Standard

• When or If
  • CSS の条件構文の標準化の話し合いで @if ~ @else にするか @when ~ @else にするかで議論が起こっている
• Agenda for the 89th meeting of Ecma TC39
  • 結果
• 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 のプロパティの値を理解するだけでなく、レイアウトアルゴリズムを理解するのも大事だよって記事
• Colors that make sense
  • 色の命名規則についてのお話、Element.State の命名方法はなんかわかりやすそうな気がした

---

👮‍♀️ Security

• Security alert: Attack campaign involving stolen OAuth user tokens issued to two third-party integrators
  • 「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 週号

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

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