こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。
はじめに
サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。
今回は、2024/9/10 の Frontend Weekly で取り上げた記事や話題を紹介します。
取り上げた記事・話題
Paragraphs | scottohara.me
HTML における「段落（paragraph）」の概念と、その適切な使用について解説した記事です。
HTML の paragraph は、<p> 要素だけでなく他の要素も含む広い概念で、スクリーンリーダーは <p> 要素だけでなく、<span>, <div>,<li> なども段落として認識します。そのため role=paragraph のような ARIA ロールは、HTML 要素との整合性を保つために存在するが、一般的には不要であり誤用するとスクリーンリーダーでの読み上げに問題が生じることもあります。
Server-first Web Components with DSD, HTMX, and Islands | Codrops
Declarative Shadow DOM（DSD）、HTMX、Express を活用して Web Components を SSR することで、クライアントサイド JS のサイズを最小限に抑える方法を紹介した記事です。
Chrome 129 Beta で追加された CSS プロパティ interpolate-size と calc-size()とは？
Chrome 129beta で入った CSS プロパティ interpolate-size と calc-size() についての記事です。
要素に含まれるコンテンツの大きさを基準にしたサイズ指定のキーワードから数値へのアニメーションをサポートしつつ、既存の仕様と共存するためのしくみを理解することで今まで以上に柔軟なアニメーション定義が実現できそうです。
Open UI Component Certified Checklist
OpenUI が Component やデザインシステムを作る上でのチェックリストを作成しています。
Accessibility やプライバシー、国際化、パフォーマンスなど様々な観点が網羅的に並べられています。OpenUI 内ではデザインシステムについて議論はじめており、このチェックリスもその議論の中で出てきたものです。
What’s new in React 19 – Vercel
Vercel が React19 で増えた新しい機能や仕様について解説した記事です。
Server Components や Actions をはじめとした機能や useActionState/useFormStatus のような新しい Hooks、API の変更などを包括的かつ図やサンプルコードを添えて丁寧に解説しています。改めて React19 についてキャッチアップするのにおすすめの記事と言えそうです。
DevTools の新機能（Chrome 129） | Blog | Chrome for Developers
Chrome DevTools 129 から experimental でパフォーマンスタブにローカル上のリアルタイムな CWV の値と ChromeUX レポートの field data の両方が表示されるようになります。
これにより自分以外のユーザーとの差分や代表的な問題の特定がより行いやすくなるとしています。
Version Support - ESLint
ESLint が v8 系のサポートポリシーを発表しました。
ESLint v8 EOL は 2024-10-05（来月）に予定されています。直近では有名な Plugin の v9 サポートも進んでおり、利用者側もアップデートを急ぐ必要がありそうです。
Configuring: Progressive Web Applications (PWA) | Next.js
Next.js App Router に PWA に関するページが増えました。
Manifest の設定や通知など PWA 特有な部分についても Next.js どう設定すれば良いか詳しく書かれています。
Prototype: Blocking third-party cookies
third-party cookies を Block してきた Firefox が他のブラウザと挙動を合わせて、「third-party cookies を原則ブロックしつつ、CHIPS で Partition 付きで有効化できる」形に変更していくというアナウンスです。
SolidHack 2024
SolidJS のオンラインハッカソン、SolidHack 2024 が開催されます。
スポンサーとして Sentry と Netlify が協賛しており、賞金総額 15, 000 ドルとかなり規模の大きいハッカソンとなっています。
共有辞書で圧縮効率を向上 | Blog | Chrome for Developers
Chrome でリソースの圧縮効率を高めるための取り組みを紹介した記事です。
現在 Chrome で使われている圧縮アルゴリズムである Brotli や ZStandard と合わせて利用されている圧縮辞書についてやその辞書を共有する仕組みについて解説しています。
Discussion