Cybozu Frontend Monthly #23

イベント概要
サイボウズフロントエンドマンスリーは、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。
その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエキスパートチームのメンバーが共有していきます。
このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。
※フロントエンドウィークリーとは
毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ #サイボウズフロントエンドウィークリー で実況しています。
開催日
2022年05月31日
イベントページ
https://cybozu.connpass.com/event/248124/
タイムテーブル
07:50 - 08:00 | 配信開始 |
08:00 - 08:05 | オープニング |
08:05 - 08:55 | 本編 |
08:55 - 09:00 | クロージング |
メンバー
紹介記事
👀 Notable Articles
A Community Group for Web-interoperable JavaScript runtimes @shisama_
- 非Webブラウザの標準化されたWebAPIの相互運用可能な実装にフォーカスしたコミュニティが設立
- 公式: https://wintercg.org/
-
以下のorgに所属するメンバーがいる(参照)
- Bloomberg
- Cloudflare
- Deno
- Igalia
- Node.js
- Shopify
- Vercel
-
GitHubにはproposalやdiscussionがある
-
- WinterCGが取り組んでいるProposal
- 非WebブラウザのJSランタイムが実装すべきWeb APIの一覧が定義されている
- ほとんどがNode.js や Denoにはすでに実装されてそう
- もしまだ実装されていないものがあればコントリビューションチャンスです💪
- 今後はWHATWGで仕様定義→WinterCGで議論→NodeやDenoで実装みたいな流れになるかも
Announcing TypeScript 4.7 @sajikix
-
ESM対応がついに入った
-
そのほか注目機能
Talks | Rendering Patterns @nus3_
- レンダリングパターンについての話
- 5月2~5日に開催されたReactathonの講演の中の一つが記事になった
- 各レンダリングパターンのメリット・デメリットがわかりやすくまとめられている
Announcing D1: our first SQL database @mugi_uno
Cloudflare のエッジで動作する DB サービスが発表されました。
- Cloudflare のネットワークを利用し、エッジ上に SQLite がリードレプリカとして配布
- Cloudflare Workers からは env 経由でバインディングが提供されアクセスできる
- バックアップは Cloudflare R2ストレージ に自動保存
- 転送帯域幅に関しての課金は無く、ストレージサイズや操作自体への課金になる予定
💬 Languages
-
- Node.js や Deno の Original Author である Ryan Dahl が書いた JavaScript が Universal Language になってきているという話
📖 Framework, Library
-
- React, Vue とかのコンポーネントテスト
- 標準で ARIA role, ARIA attribute, Accessible Name で要素取得ができる
- スクショ撮影時にアニメーションとかCSS Scaleを無効化する
-
JestがMetaからOpenJS Foundationに移管
- もともとmetaの人はほとんどコントリビュートしていなかったので開発には影響がほぼ無さそう
-
Hotwireの良かった点、辛かった点、向いているケース、向いていないケース - 猫Rails
- RailsのHotwireの話
-
- オフラインで使える音声認識ライブラリ。nodeでも使える
- https://twitter.com/meganetaaan/status/1525855166284861440
- RFC: useEvent by gaearon · Pull Request #220 · reactjs/rfcs
☁️ Services
-
Announcing D1: our first SQL database
- Cloudflare のエッジ環境で動作するDB
- SQLiteをリード専用にレプリケーションしエッジに配布する
-
A New Hope for Object Storage: R2 enters open beta
- S3互換なCloudflare のobject storage
-
- pnpmはViteやVitestで使われている
- Netlifyの公式ページが刷新された
🖥 Browsers
-
Celebrating Firefox: How we got to 100
- Firefox が version 100 に到達
🎨 Design
-
Free Open Source Tailwind CSS Components | HyperUI
- オープンソースのTailwind CSSのコンポーネント集
-
- 最近のCSSについて一気に紹介されているまとめページ
- What’s new for the web platform
-
Bringing Adobe’s Creative Cloud to the web: Starting with Photoshop
- PhotoshopのWeb版つくったはなし
-
- Web および React Native で利用可能なUIコンポーネント
📢 Events
-
- 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で確認する方法について紹介されている
🦆 Others
-
- SSRしたとき Client Hydration がムダという問題を解決するアプローチとして、イベントハンドラのJSを遅延読み込みするライブラリを開発した話
-
Storybook Performance: Vite vs Webpack
- Storybook の builder が Vite と Webpack だった場合のパフォーマンスの違いについて
-
- レンダリングパターン別での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で見れる