<p data-line="0" class="code-line">こんにちは! サイボウズ株式会社フロントエンドエンジニアの <a href="https://twitter.com/sajikix" target="_blank" rel="nofollow noopener noreferrer">Saji (@sajikix)</a> です。</p>
<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="2" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p data-line="4" class="code-line">サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。</p>
<p data-line="6" class="code-line">今回は、2024/9/10 の Frontend Weekly で取り上げた記事や話題を紹介します。</p>
<h2 id="%E5%8F%96%E3%82%8A%E4%B8%8A%E3%81%92%E3%81%9F%E8%A8%98%E4%BA%8B%E3%83%BB%E8%A9%B1%E9%A1%8C" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%96%E3%82%8A%E4%B8%8A%E3%81%92%E3%81%9F%E8%A8%98%E4%BA%8B%E3%83%BB%E8%A9%B1%E9%A1%8C" aria-hidden="true"></a> 取り上げた記事・話題</h2>
<h3 id="paragraphs-%7C-scottohara.me" data-line="10" class="code-line">
<a class="header-anchor-link" href="#paragraphs-%7C-scottohara.me" aria-hidden="true"></a> Paragraphs | scottohara.me</h3>
<p data-line="12" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__66177406347c9" src="https://embed.zenn.studio/card#zenn-embedded__66177406347c9" data-content="https%3A%2F%2Fwww.scottohara.me%2Fblog%2F2024%2F08%2F29%2Fparagraphs.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.scottohara.me/blog/2024/08/29/paragraphs.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.scottohara.me/blog/2024/08/29/paragraphs.html</a></p>
<p data-line="14" class="code-line">HTML における「段落（paragraph）」の概念と、その適切な使用について解説した記事です。</p>
<p data-line="16" class="code-line">HTML の paragraph は、<code>&lt;p&gt;</code> 要素だけでなく他の要素も含む広い概念で、スクリーンリーダーは <code>&lt;p&gt;</code> 要素だけでなく、<code>&lt;span&gt;</code>, <code>&lt;div&gt;</code>,<code>&lt;li&gt;</code> なども段落として認識します。そのため role=paragraph のような ARIA ロールは、HTML 要素との整合性を保つために存在するが、一般的には不要であり誤用するとスクリーンリーダーでの読み上げに問題が生じることもあります。</p>
<h3 id="server-first-web-components-with-dsd%2C-htmx%2C-and-islands-%7C-codrops" data-line="18" class="code-line">
<a class="header-anchor-link" href="#server-first-web-components-with-dsd%2C-htmx%2C-and-islands-%7C-codrops" aria-hidden="true"></a> Server-first Web Components with DSD, HTMX, and Islands | Codrops</h3>
<p data-line="20" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8bb06a6854cb3" src="https://embed.zenn.studio/card#zenn-embedded__8bb06a6854cb3" data-content="https%3A%2F%2Ftympanus.net%2Fcodrops%2F2024%2F08%2F20%2Fserver-first-web-components-with-dsd-htmx-and-islands%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://tympanus.net/codrops/2024/08/20/server-first-web-components-with-dsd-htmx-and-islands/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://tympanus.net/codrops/2024/08/20/server-first-web-components-with-dsd-htmx-and-islands/</a></p>
<p data-line="22" class="code-line">Declarative Shadow DOM（DSD）、HTMX、Express を活用して Web Components を SSR することで、クライアントサイド JS のサイズを最小限に抑える方法を紹介した記事です。</p>
<h3 id="chrome-129-beta-%E3%81%A7%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%9F-css-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3-interpolate-size-%E3%81%A8-calc-size()%E3%81%A8%E3%81%AF%EF%BC%9F" data-line="24" class="code-line">
<a class="header-anchor-link" href="#chrome-129-beta-%E3%81%A7%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%9F-css-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3-interpolate-size-%E3%81%A8-calc-size()%E3%81%A8%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> Chrome 129 Beta で追加された CSS プロパティ interpolate-size と calc-size()とは？</h3>
<p data-line="26" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__098b99c859e2a" src="https://embed.zenn.studio/card#zenn-embedded__098b99c859e2a" data-content="https%3A%2F%2Fzenn.dev%2Fcybozu_frontend%2Farticles%2F20240906_chrome129beta" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/cybozu_frontend/articles/20240906_chrome129beta" style="display:none" target="_blank">https://zenn.dev/cybozu_frontend/articles/20240906_chrome129beta</a></p>
<p data-line="28" class="code-line">Chrome 129beta で入った CSS プロパティ interpolate-size と calc-size() についての記事です。</p>
<p data-line="30" class="code-line">要素に含まれるコンテンツの大きさを基準にしたサイズ指定のキーワードから数値へのアニメーションをサポートしつつ、既存の仕様と共存するためのしくみを理解することで今まで以上に柔軟なアニメーション定義が実現できそうです。</p>
<h3 id="open-ui-component-certified-checklist" data-line="32" class="code-line">
<a class="header-anchor-link" href="#open-ui-component-certified-checklist" aria-hidden="true"></a> Open UI Component Certified Checklist</h3>
<p data-line="34" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d3863aa37b103" src="https://embed.zenn.studio/card#zenn-embedded__d3863aa37b103" data-content="https%3A%2F%2Fdocs.google.com%2Fdocument%2Fd%2F1eTSxCWd3yRMxTCAs3a74NzQ6C9gikYQLZeVdCMODwOg%2Fedit%3Fpli%3D1" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.google.com/document/d/1eTSxCWd3yRMxTCAs3a74NzQ6C9gikYQLZeVdCMODwOg/edit?pli=1" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.google.com/document/d/1eTSxCWd3yRMxTCAs3a74NzQ6C9gikYQLZeVdCMODwOg/edit?pli=1</a></p>
<p data-line="36" class="code-line">OpenUI が Component やデザインシステムを作る上でのチェックリストを作成しています。</p>
<p data-line="38" class="code-line">Accessibility やプライバシー、国際化、パフォーマンスなど様々な観点が網羅的に並べられています。OpenUI 内ではデザインシステムについて議論はじめており、このチェックリスもその議論の中で出てきたものです。</p>
<p data-line="40" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ddf4260ff3d0a" src="https://embed.zenn.studio/card#zenn-embedded__ddf4260ff3d0a" data-content="https%3A%2F%2Fgithub.com%2Fopenui%2Fopen-ui%2Fissues%2F1017" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/openui/open-ui/issues/1017" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/openui/open-ui/issues/1017</a></p>
<h3 id="what%E2%80%99s-new-in-react-19-%E2%80%93-vercel" data-line="42" class="code-line">
<a class="header-anchor-link" href="#what%E2%80%99s-new-in-react-19-%E2%80%93-vercel" aria-hidden="true"></a> What’s new in React 19 – Vercel</h3>
<p data-line="44" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c5ff17971a186" src="https://embed.zenn.studio/card#zenn-embedded__c5ff17971a186" data-content="https%3A%2F%2Fvercel.com%2Fblog%2Fwhats-new-in-react-19" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vercel.com/blog/whats-new-in-react-19" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vercel.com/blog/whats-new-in-react-19</a></p>
<p data-line="46" class="code-line">Vercel が React19 で増えた新しい機能や仕様について解説した記事です。</p>
<p data-line="48" class="code-line">Server Components や Actions をはじめとした機能や useActionState/useFormStatus のような新しい Hooks、API の変更などを包括的かつ図やサンプルコードを添えて丁寧に解説しています。改めて React19 についてキャッチアップするのにおすすめの記事と言えそうです。</p>
<h3 id="devtools-%E3%81%AE%E6%96%B0%E6%A9%9F%E8%83%BD%EF%BC%88chrome-129%EF%BC%89-%7C-blog-%7C-chrome-for-developers" data-line="50" class="code-line">
<a class="header-anchor-link" href="#devtools-%E3%81%AE%E6%96%B0%E6%A9%9F%E8%83%BD%EF%BC%88chrome-129%EF%BC%89-%7C-blog-%7C-chrome-for-developers" aria-hidden="true"></a> DevTools の新機能（Chrome 129） | Blog | Chrome for Developers</h3>
<p data-line="52" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__07ff503fe8db2" src="https://embed.zenn.studio/card#zenn-embedded__07ff503fe8db2" data-content="https%3A%2F%2Fdeveloper.chrome.com%2Fblog%2Fnew-in-devtool-129%3Fhl%3Dja" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.chrome.com/blog/new-in-devtool-129?hl=ja" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.chrome.com/blog/new-in-devtool-129?hl=ja</a></p>
<p data-line="54" class="code-line">Chrome DevTools 129 から experimental でパフォーマンスタブにローカル上のリアルタイムな CWV の値と ChromeUX レポートの field data の両方が表示されるようになります。</p>
<p data-line="56" class="code-line">これにより自分以外のユーザーとの差分や代表的な問題の特定がより行いやすくなるとしています。</p>
<h3 id="version-support---eslint" data-line="58" class="code-line">
<a class="header-anchor-link" href="#version-support---eslint" aria-hidden="true"></a> Version Support - ESLint</h3>
<p data-line="60" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__65b8c74f71c3c" src="https://embed.zenn.studio/card#zenn-embedded__65b8c74f71c3c" data-content="https%3A%2F%2Feslint.org%2Fblog%2F2024%2F09%2Feslint-v8-eol-version-support%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://eslint.org/blog/2024/09/eslint-v8-eol-version-support/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://eslint.org/blog/2024/09/eslint-v8-eol-version-support/</a></p>
<p data-line="62" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4de4e05f468c2" src="https://embed.zenn.studio/card#zenn-embedded__4de4e05f468c2" data-content="https%3A%2F%2Feslint.org%2Fversion-support%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://eslint.org/version-support/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://eslint.org/version-support/</a></p>
<p data-line="64" class="code-line">ESLint が v8 系のサポートポリシーを発表しました。</p>
<p data-line="66" class="code-line">ESLint v8 EOL は 2024-10-05（来月）に予定されています。直近では<a href="https://github.com/eslint/eslint/issues/18391" target="_blank" rel="nofollow noopener noreferrer">有名な Plugin の v9 サポートも進んでおり</a>、利用者側もアップデートを急ぐ必要がありそうです。</p>
<h3 id="configuring%3A-progressive-web-applications-(pwa)-%7C-next.js" data-line="68" class="code-line">
<a class="header-anchor-link" href="#configuring%3A-progressive-web-applications-(pwa)-%7C-next.js" aria-hidden="true"></a> Configuring: Progressive Web Applications (PWA) | Next.js</h3>
<p data-line="70" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e87903804a615" src="https://embed.zenn.studio/card#zenn-embedded__e87903804a615" data-content="https%3A%2F%2Fnextjs.org%2Fdocs%2Fapp%2Fbuilding-your-application%2Fconfiguring%2Fprogressive-web-apps" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps</a></p>
<p data-line="72" class="code-line">Next.js App Router に PWA に関するページが増えました。</p>
<p data-line="74" class="code-line">Manifest の設定や通知など PWA 特有な部分についても Next.js どう設定すれば良いか詳しく書かれています。</p>
<h3 id="prototype%3A-blocking-third-party-cookies" data-line="76" class="code-line">
<a class="header-anchor-link" href="#prototype%3A-blocking-third-party-cookies" aria-hidden="true"></a> Prototype: Blocking third-party cookies</h3>
<p data-line="78" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2d04ad1132387" src="https://embed.zenn.studio/card#zenn-embedded__2d04ad1132387" data-content="https%3A%2F%2Fgroups.google.com%2Fa%2Fmozilla.org%2Fg%2Fdev-platform%2Fc%2F9ILA7dMn_XA%2Fm%2F14IfWWvADwAJ" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://groups.google.com/a/mozilla.org/g/dev-platform/c/9ILA7dMn_XA/m/14IfWWvADwAJ" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://groups.google.com/a/mozilla.org/g/dev-platform/c/9ILA7dMn_XA/m/14IfWWvADwAJ</a></p>
<p data-line="80" class="code-line">third-party cookies を Block してきた Firefox が他のブラウザと挙動を合わせて、「third-party cookies を原則ブロックしつつ、CHIPS で Partition 付きで有効化できる」形に変更していくというアナウンスです。</p>
<h3 id="solidhack-2024" data-line="82" class="code-line">
<a class="header-anchor-link" href="#solidhack-2024" aria-hidden="true"></a> SolidHack 2024</h3>
<p data-line="84" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d61fbc26c4e" src="https://embed.zenn.studio/card#zenn-embedded__d61fbc26c4e" data-content="https%3A%2F%2Fhack.solidjs.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://hack.solidjs.com/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://hack.solidjs.com/</a></p>
<p data-line="86" class="code-line">SolidJS のオンラインハッカソン、SolidHack 2024 が開催されます。</p>
<p data-line="88" class="code-line">スポンサーとして Sentry と Netlify が協賛しており、賞金総額 15, 000 ドルとかなり規模の大きいハッカソンとなっています。</p>
<h3 id="%E5%85%B1%E6%9C%89%E8%BE%9E%E6%9B%B8%E3%81%A7%E5%9C%A7%E7%B8%AE%E5%8A%B9%E7%8E%87%E3%82%92%E5%90%91%E4%B8%8A-%7C-blog-%7C-chrome-for-developers" data-line="90" class="code-line">
<a class="header-anchor-link" href="#%E5%85%B1%E6%9C%89%E8%BE%9E%E6%9B%B8%E3%81%A7%E5%9C%A7%E7%B8%AE%E5%8A%B9%E7%8E%87%E3%82%92%E5%90%91%E4%B8%8A-%7C-blog-%7C-chrome-for-developers" aria-hidden="true"></a> 共有辞書で圧縮効率を向上 | Blog | Chrome for Developers</h3>
<p data-line="92" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9a0b54c220709" src="https://embed.zenn.studio/card#zenn-embedded__9a0b54c220709" data-content="https%3A%2F%2Fdeveloper.chrome.com%2Fblog%2Fshared-dictionary-compression%3Fhl%3Dja" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.chrome.com/blog/shared-dictionary-compression?hl=ja" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.chrome.com/blog/shared-dictionary-compression?hl=ja</a></p>
<p data-line="94" class="code-line">Chrome でリソースの圧縮効率を高めるための取り組みを紹介した記事です。</p>
<p data-line="96" class="code-line">現在 Chrome で使われている圧縮アルゴリズムである Brotli や ZStandard と合わせて利用されている圧縮辞書についてやその辞書を共有する仕組みについて解説しています。</p>


ESLint v8のEOLなど: Cybozu Frontend Weekly (2024-09-10号)

Server-first Web Components with DSD, HTMX, and Islands | Codrops

Chrome 129 Beta で追加された CSS プロパティ interpolate-size と calc-size()とは？

DevTools の新機能（Chrome 129） | Blog | Chrome for Developers

Configuring: Progressive Web Applications (PWA) | Next.js

共有辞書で圧縮効率を向上 | Blog | Chrome for Developers

Discussion