<p data-line="0" class="code-line">こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの <a href="https://twitter.com/mugi_uno" target="_blank" rel="nofollow noopener noreferrer">@mugi_uno</a> です。</p>
<h1 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> はじめに</h1>
<p data-line="4" class="code-line">サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。</p>
<p data-line="6" class="code-line">今回は、2024 年 11 月 19 日 の Frontend Weekly で取り上げた記事や話題を紹介します。</p>
<h1 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> 取り上げた記事・話題</h1>
<h2 id="deno-deploy-%E3%81%A7-next.js-%E3%81%8C%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB" data-line="10" class="code-line">
<a class="header-anchor-link" href="#deno-deploy-%E3%81%A7-next.js-%E3%81%8C%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB" aria-hidden="true"></a> Deno Deploy で Next.js がデプロイできるように</h2>
<p data-line="12" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__f05c0e8c0d4a6" src="https://embed.zenn.studio/tweet#zenn-embedded__f05c0e8c0d4a6" data-content="https%3A%2F%2Fx.com%2Fdeno_land%2Fstatus%2F1849469080257900704%3Fs%3D12%26t%3DRreh9a4Ymw8GBLg-X9K6iw" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://x.com/deno_land/status/1849469080257900704?s=12&amp;t=Rreh9a4Ymw8GBLg-X9K6iw" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/deno_land/status/1849469080257900704?s=12&amp;t=Rreh9a4Ymw8GBLg-X9K6iw</a></p>
<p data-line="14" class="code-line">Node.js との互換性が日々向上している Deno ですが、Deno Deploy に対して Next.js がデプロイできるようになりました。<a href="https://github.com/nextjs/deploy-deno" target="_blank" rel="nofollow noopener noreferrer">テンプレートリポジトリ</a>も用意されているようです。</p>
<h2 id="we're-forking-flutter.-this-is-why." data-line="16" class="code-line">
<a class="header-anchor-link" href="#we're-forking-flutter.-this-is-why." aria-hidden="true"></a> We're forking Flutter. This is why.</h2>
<p data-line="18" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__892c38817f3b3" src="https://embed.zenn.studio/card#zenn-embedded__892c38817f3b3" data-content="https%3A%2F%2Fgetflocked.dev%2Fblog%2Fposts%2Fwe-are-forking-flutter-this-is-why%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://getflocked.dev/blog/posts/we-are-forking-flutter-this-is-why/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://getflocked.dev/blog/posts/we-are-forking-flutter-this-is-why/</a></p>
<p data-line="20" class="code-line">Flock と呼ばれる Flutter の Fork プロジェクトの立ち上げについてのブログです。Google 側の Flutter への開発がやや停滞気味になっており、レビューなども遅れていることなどが理由として挙げられています。Flock では Flutter チームが実装しないバグ修正や機能追加を行い、コントリビュートしやすい環境整備も行っていくとのことです。</p>
<h2 id="state-of-css-2024" data-line="22" class="code-line">
<a class="header-anchor-link" href="#state-of-css-2024" aria-hidden="true"></a> State of CSS 2024</h2>
<p data-line="24" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__086950e232b4e" src="https://embed.zenn.studio/card#zenn-embedded__086950e232b4e" data-content="https%3A%2F%2F2024.stateofcss.com%2Fen-US" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://2024.stateofcss.com/en-US" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://2024.stateofcss.com/en-US</a></p>
<p data-line="26" class="code-line">CSS の利用状況などに関してのサーベイである State of CSS の 2024 年度版が公開されました。サーベイ対象の機能の中では CSS Filter Effects や <code>:has()</code> などが特に多く利用されるようになったようです。機能単位での Baseline 状況も確認でき、知らない機能を知るきっかけにもなりそうです。</p>
<h2 id="save-the-date-for-jsconf-north-america-2025%3A-where-javascript-meets-adventure-on-the-chesapeake-bay" data-line="28" class="code-line">
<a class="header-anchor-link" href="#save-the-date-for-jsconf-north-america-2025%3A-where-javascript-meets-adventure-on-the-chesapeake-bay" aria-hidden="true"></a> Save the Date for JSConf North America 2025: Where JavaScript Meets Adventure on the Chesapeake Bay</h2>
<p data-line="30" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__61ffb5c1753a" src="https://embed.zenn.studio/card#zenn-embedded__61ffb5c1753a" data-content="https%3A%2F%2Fopenjsf.org%2Fblog%2Fwhy-attend-jsconf-na-2025" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://openjsf.org/blog/why-attend-jsconf-na-2025" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://openjsf.org/blog/why-attend-jsconf-na-2025</a></p>
<p data-line="32" class="code-line">2025 年 10 月 14 日から 16 日にかけて、JSConf North America が開催されるとのことです。</p>
<h2 id="should-javascript-be-split-into-two-languages%3F-new-google-driven-proposal-divides-opinion" data-line="34" class="code-line">
<a class="header-anchor-link" href="#should-javascript-be-split-into-two-languages%3F-new-google-driven-proposal-divides-opinion" aria-hidden="true"></a> Should JavaScript be split into two languages? New Google-driven proposal divides opinion</h2>
<p data-line="36" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7c669c2be09bb" src="https://embed.zenn.studio/card#zenn-embedded__7c669c2be09bb" data-content="https%3A%2F%2Fdevclass.com%2F2024%2F10%2F22%2Fshould-javascript-be-split-into-two-languages-new-google-driven-proposal-divides-opinion%2F%3Fref%3Dhackernoon.com" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://devclass.com/2024/10/22/should-javascript-be-split-into-two-languages-new-google-driven-proposal-divides-opinion/?ref=hackernoon.com" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://devclass.com/2024/10/22/should-javascript-be-split-into-two-languages-new-google-driven-proposal-divides-opinion/?ref=hackernoon.com</a></p>
<p data-line="38" class="code-line">JavaScript を JS0・JSSugar と呼ばれる Engine と Tooling の 2 つに分割するという TC39 への提案に関する解説記事です。</p>
<h2 id="we%E2%80%99re-building-the-future-of-javascript-packages" data-line="40" class="code-line">
<a class="header-anchor-link" href="#we%E2%80%99re-building-the-future-of-javascript-packages" aria-hidden="true"></a> We’re building the future of JavaScript packages</h2>
<p data-line="42" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0cd8ea22839a3" src="https://embed.zenn.studio/card#zenn-embedded__0cd8ea22839a3" data-content="https%3A%2F%2Fwww.vlt.sh%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.vlt.sh/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.vlt.sh/</a></p>
<p data-line="44" class="code-line">新しい JavaScript 向けのパッケージマネージャである vlt が公開されました。</p>
<h2 id="amazon-route-53-announces-https%2C-sshfp%2C-svcb%2C-and-tlsa-dns-resource-record-support---aws" data-line="46" class="code-line">
<a class="header-anchor-link" href="#amazon-route-53-announces-https%2C-sshfp%2C-svcb%2C-and-tlsa-dns-resource-record-support---aws" aria-hidden="true"></a> Amazon Route 53 announces HTTPS, SSHFP, SVCB, and TLSA DNS resource record support - AWS</h2>
<p data-line="48" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__367b468d8a11b" src="https://embed.zenn.studio/card#zenn-embedded__367b468d8a11b" data-content="https%3A%2F%2Faws.amazon.com%2Fjp%2Fabout-aws%2Fwhats-new%2F2024%2F10%2Famazon-route-53-https-sshfp-svcb-tlsa-dns-support%2F%257C" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://aws.amazon.com/jp/about-aws/whats-new/2024/10/amazon-route-53-https-sshfp-svcb-tlsa-dns-support/%7C" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://aws.amazon.com/jp/about-aws/whats-new/2024/10/amazon-route-53-https-sshfp-svcb-tlsa-dns-support/|</a></p>
<p data-line="50" class="code-line">Amazon Route 53 が HTTPS、SSHFP、SVCB、TLSA DNS リソースレコードのサポートを発表しました。</p>
<h2 id="q3-2024-summary-from-chrome-security" data-line="52" class="code-line">
<a class="header-anchor-link" href="#q3-2024-summary-from-chrome-security" aria-hidden="true"></a> Q3 2024 Summary from Chrome Security</h2>
<p data-line="54" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__239aa03272238" src="https://embed.zenn.studio/card#zenn-embedded__239aa03272238" data-content="https%3A%2F%2Fgroups.google.com%2Fa%2Fchromium.org%2Fg%2Fchromium-dev%2Fc%2FKOmfh5BW6Mw%3Fpli%3D1" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://groups.google.com/a/chromium.org/g/chromium-dev/c/KOmfh5BW6Mw?pli=1" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://groups.google.com/a/chromium.org/g/chromium-dev/c/KOmfh5BW6Mw?pli=1</a></p>
<p data-line="56" class="code-line">Chrome での 2024 Q3 におけるセキュリティに関する情報のサマリです。<a href="https://wicg.github.io/dbsc/" target="_blank" rel="nofollow noopener noreferrer">Device Bound Session Credentials</a>や 2 つの Root CA の削除などを紹介されています。</p>
<h2 id="cascade-layers%2F%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%81%AB%E3%82%88%E3%82%8B%E5%84%AA%E5%85%88%E9%A0%86%E4%BD%8D%E3%81%AE%E5%88%B6%E5%BE%A1" data-line="58" class="code-line">
<a class="header-anchor-link" href="#cascade-layers%2F%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%81%AB%E3%82%88%E3%82%8B%E5%84%AA%E5%85%88%E9%A0%86%E4%BD%8D%E3%81%AE%E5%88%B6%E5%BE%A1" aria-hidden="true"></a> Cascade Layers/レイヤーによる優先順位の制御</h2>
<p data-line="60" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__44c770a24d39c" src="https://embed.zenn.studio/card#zenn-embedded__44c770a24d39c" data-content="https%3A%2F%2Fgihyo.jp%2Farticle%2F2024%2F11%2Fride-modern-frontend-03" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://gihyo.jp/article/2024/11/ride-modern-frontend-03" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://gihyo.jp/article/2024/11/ride-modern-frontend-03</a></p>
<p data-line="62" class="code-line">Cascade Layers に関しての機能自体やユースケースに関しての解説記事です。書きました！</p>
<h2 id="docusaurus-3.6" data-line="64" class="code-line">
<a class="header-anchor-link" href="#docusaurus-3.6" aria-hidden="true"></a> Docusaurus 3.6</h2>
<p data-line="66" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__97208be0fad19" src="https://embed.zenn.studio/card#zenn-embedded__97208be0fad19" data-content="https%3A%2F%2Fdocusaurus.io%2Fblog%2Freleases%2F3.6" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docusaurus.io/blog/releases/3.6" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docusaurus.io/blog/releases/3.6</a></p>
<p data-line="68" class="code-line">ドキュメントサイトに特化した静的サイトジェネレータの Docusaurus の 3.6 がリリースされました。Rust ベースのツールへの移行によるビルド時間やメモリ消費の改善などが含まれます。</p>
<h2 id="intent-to-prototype%3A-aria-actions" data-line="70" class="code-line">
<a class="header-anchor-link" href="#intent-to-prototype%3A-aria-actions" aria-hidden="true"></a> Intent to Prototype: aria-actions</h2>
<p data-line="72" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a43352efa980f" src="https://embed.zenn.studio/card#zenn-embedded__a43352efa980f" data-content="https%3A%2F%2Fgroups.google.com%2Fa%2Fchromium.org%2Fg%2Fblink-dev%2Fc%2FcYs7hgcwgcU" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/cYs7hgcwgcU" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://groups.google.com/a/chromium.org/g/blink-dev/c/cYs7hgcwgcU</a></p>
<p data-line="74" class="code-line">新たな aria 属性である <code>aria-actions</code> に関する提案です。タブの閉じるボタンなどのような、セカンダリであるアクションボタンの発見を容易にすることが目的のようです。</p>
<h2 id="the-different-(and-modern)-ways-to-toggle-content-%7C-css-tricks" data-line="76" class="code-line">
<a class="header-anchor-link" href="#the-different-(and-modern)-ways-to-toggle-content-%7C-css-tricks" aria-hidden="true"></a> The Different (and Modern) Ways To Toggle Content | CSS-Tricks</h2>
<p data-line="78" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e7c1a9a9a4d2" src="https://embed.zenn.studio/card#zenn-embedded__e7c1a9a9a4d2" data-content="https%3A%2F%2Fcss-tricks.com%2Fthe-different-and-modern-ways-to-toggle-content%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://css-tricks.com/the-different-and-modern-ways-to-toggle-content/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://css-tricks.com/the-different-and-modern-ways-to-toggle-content/</a></p>
<p data-line="80" class="code-line">トグルしてコンテンツを表示する要素や API（Details/Summary, Dialog API, Popover）などについて、使用方法やユースケースについて具体例を交えて解説されている記事です。</p>
<h2 id="storybook-8.4" data-line="82" class="code-line">
<a class="header-anchor-link" href="#storybook-8.4" aria-hidden="true"></a> Storybook 8.4</h2>
<p data-line="84" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f6ade76abe7bd" src="https://embed.zenn.studio/card#zenn-embedded__f6ade76abe7bd" data-content="https%3A%2F%2Fstorybook.js.org%2Fblog%2Fstorybook-8-4%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://storybook.js.org/blog/storybook-8-4/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://storybook.js.org/blog/storybook-8-4/</a></p>
<p data-line="86" class="code-line">Storybook 8.4 がリリースされました。テストを一括実行するボタンの追加や、依存パッケージの大幅な削減、Svelte 5 のサポートなどが含まれます。</p>
<h2 id="typescript-5.8-%E3%81%A7%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E6%88%BB%E3%82%8A%E5%80%A4%E5%9E%8B%E3%81%AB%E5%AF%BE%E3%81%99%E3%82%8B%E3%83%8A%E3%83%AD%E3%83%BC%E3%82%A4%E3%83%B3%E3%82%B0%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%9D%E3%81%86%EF%BC%88%E7%89%B9%E5%AE%9A%E3%81%AE%E5%88%B6%E7%B4%84%E3%82%92%E6%BA%80%E3%81%9F%E3%81%99%E5%A0%B4%E5%90%88%EF%BC%89" data-line="88" class="code-line">
<a class="header-anchor-link" href="#typescript-5.8-%E3%81%A7%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E6%88%BB%E3%82%8A%E5%80%A4%E5%9E%8B%E3%81%AB%E5%AF%BE%E3%81%99%E3%82%8B%E3%83%8A%E3%83%AD%E3%83%BC%E3%82%A4%E3%83%B3%E3%82%B0%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%9D%E3%81%86%EF%BC%88%E7%89%B9%E5%AE%9A%E3%81%AE%E5%88%B6%E7%B4%84%E3%82%92%E6%BA%80%E3%81%9F%E3%81%99%E5%A0%B4%E5%90%88%EF%BC%89" aria-hidden="true"></a> TypeScript 5.8 で条件付き戻り値型に対するナローイングができるようになりそう（特定の制約を満たす場合）</h2>
<p data-line="90" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__24cafc6b4d744" src="https://embed.zenn.studio/card#zenn-embedded__24cafc6b4d744" data-content="https%3A%2F%2Fbufferings.hatenablog.com%2Fentry%2F2024%2F11%2F11%2F232139" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://bufferings.hatenablog.com/entry/2024/11/11/232139" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://bufferings.hatenablog.com/entry/2024/11/11/232139</a></p>
<p data-line="92" class="code-line">TypeScript 5.8 で追加される可能性のある、関数の戻り値での Conditional Type の利用に関しての紹介ブログです。同機能については、先日開催された TS Kaigi Kansai での uhyo さんの登壇資料「<a href="https://speakerdeck.com/uhyo/typescriptnoci-naruda-jin-hua-naruka-tiao-jian-xing-wofan-rizhi-tosuruguan-shu-noxing-tui-lun" target="_blank" rel="nofollow noopener noreferrer">TypeScript の次なる大進化なるか！？　条件型を返り値とする関数の型推論</a>」も参考になりそうです。</p>
<h2 id="framer-motion-is-now-independent%2C-introducing-motion" data-line="94" class="code-line">
<a class="header-anchor-link" href="#framer-motion-is-now-independent%2C-introducing-motion" aria-hidden="true"></a> Framer Motion is now independent, introducing Motion</h2>
<p data-line="96" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8182a4a7cbad3" src="https://embed.zenn.studio/card#zenn-embedded__8182a4a7cbad3" data-content="https%3A%2F%2Fmotion.dev%2Fblog%2Fframer-motion-is-now-independent-introducing-motion" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://motion.dev/blog/framer-motion-is-now-independent-introducing-motion" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://motion.dev/blog/framer-motion-is-now-independent-introducing-motion</a></p>
<p data-line="98" class="code-line">React のアニメーションライブラリである Framer Motion が Framer から独立し、Motion と呼ばれるプロジェクトで開発されることになりました。React 以外での利用に向けた API セットの提供や、サポート・ドキュメントの改善などに取り組んでいくとのことです。</p>
<h2 id="%E3%81%82%E3%81%A8%E3%81%8C%E3%81%8D" data-line="100" class="code-line">
<a class="header-anchor-link" href="#%E3%81%82%E3%81%A8%E3%81%8C%E3%81%8D" aria-hidden="true"></a> あとがき</h2>
<p data-line="102" class="code-line">State of XXX のサーベイや公開が始まると年末だなという感じがしてきますね。</p>


State of CSS 2024 公開など : Cybozu Frontend Weekly (2024-11-19号)

Deno Deploy で Next.js がデプロイできるように

Save the Date for JSConf North America 2025: Where JavaScript Meets Adventure on the Chesapeake Bay

Should JavaScript be split into two languages? New Google-driven proposal divides opinion

We’re building the future of JavaScript packages

Amazon Route 53 announces HTTPS, SSHFP, SVCB, and TLSA DNS resource record support - AWS

Cascade Layers/レイヤーによる優先順位の制御

The Different (and Modern) Ways To Toggle Content | CSS-Tricks

TypeScript 5.8 で条件付き戻り値型に対するナローイングができるようになりそう（特定の制約を満たす場合）

Discussion