Cybozu Frontend Monthly #23

イベント概要

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

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

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

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

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

2022年05月31日

非 Web ブラウザの標準化された WebAPI の相互運用可能な実装にフォーカスしたコミュニティが設立
公式: https://wintercg.org/
以下の org に所属するメンバーがいる（参照）
- Bloomberg
- Cloudflare
- Deno
- Igalia
- Node.js
- Shopify
- Vercel
GitHub には proposal や discussion がある
- https://github.com/wintercg
Minimum Common API
- WinterCG が取り組んでいる Proposal
- 非 Web ブラウザの JS ランタイムが実装すべき Web API の一覧が定義されている
- ほとんどが Node.js や Deno にはすでに実装されてそう
- もしまだ実装されていないものがあればコントリビューションチャンスです 💪
今後は WHATWG で仕様定義 →WinterCG で議論 →Node や Deno で実装みたいな流れになるかも

Cloudflare のエッジで動作する DB サービスが発表されました。

JavaScript Containers
- Node.js や Deno の Original Author である Ryan Dahl が書いた JavaScript が Universal Language になってきているという話

Playwright v1.22.0
- React, Vue とかのコンポーネントテスト
- 標準で ARIA role, ARIA attribute, Accessible Name で要素取得ができる
- スクショ撮影時にアニメーションとか CSS Scale を無効化する
Jest が Meta から OpenJS Foundation に移管
- もともと meta の人はほとんどコントリビュートしていなかったので開発には影響がほぼ無さそう
Hotwire の良かった点、辛かった点、向いているケース、向いていないケース - 猫 Rails
- Rails の Hotwire の話
alphacep/vosk-api
- オフラインで使える音声認識ライブラリ。node でも使える
- https://twitter.com/meganetaaan/status/1525855166284861440
RFC: useEvent by gaearon · Pull Request #220 · reactjs/rfcs

Announcing D1: our first SQL database
- Cloudflare のエッジ環境で動作する DB
- SQLite をリード専用にレプリケーションしエッジに配布する
A New Hope for Object Storage: R2 enters open beta
- S3 互換な Cloudflare の object storage
Vercel で pnpm の v7 がサポートされた
- pnpm は Vite や Vitest で使われている
Netlify の公式ページが刷新された

Free Open Source Tailwind CSS Components | HyperUI
- オープンソースの Tailwind CSS のコンポーネント集
State of CSS 2022
- 最近の CSS について一気に紹介されているまとめページ
What’s new for the web platform
Bringing Adobe’s Creative Cloud to the web: Starting with Photoshop
- Photoshop の Web 版つくったはなし
Tamagui Beta
- Web および React Native で利用可能な UI コンポーネント

Web at I/O 2022
- Google I/O 2022 のアーカイブ動画がまとまっている
TechFeed Conference 2022 で React の useEvent について話した
- @koba04 が TechFeed Conference で登壇した内容のブログ
- useEvent は命名で議論になった。よく使われる API は長い名前だとユーザーから不満が出てくることがあるので短い名前にしたとのこと。また、Event Functions という概念を取り入れたいという意図も含まれているとのこと。
- Suspense はまだ Ready じゃないので使わないほうがよいとのこと
React でアプリケーションを構築する多様化 - Speaker Deck
- @__sakito__ が TechFeed Conference で登壇した資料
- React のフレームワークが一気に紹介されている。
アクセシビリティツリーを読む
- サイボウズアクセシビリティエキスパートの小林大輔さんが TechFeed Conference で発表した資料
- アクセシビリティツリーについてやそれを DevTools で確認する方法について紹介されている

Hydration is Pure Overhead
- SSR したとき Client Hydration がムダという問題を解決するアプローチとして、イベントハンドラの JS を遅延読み込みするライブラリを開発した話
Storybook Performance: Vite vs Webpack
- Storybook の builder が Vite と Webpack だった場合のパフォーマンスの違いについて
Talks | Rendering Patterns
- レンダリングパターン別での Pros、Cons がまとめられた記事
Weekly Frontend News 2022 年 5 月 1 週目/useEvent,Next.js router,Skia…
A Community Group for Web-interoperable JavaScript runtimes
- Cloudflare,Vercel,Shopify と Node.js,Deno のコアコントリビューターで Web-interoperable Runtimes Community Group を設立。
- 非 Web ブラウザーの標準化された WebAPI の相互運用可能な実装に焦点を当てる。
Your GitHub story in 3D - GitHub Skyline
- GitHub でのコントリビューション数が 3D で見れる