<p data-line="0" class="code-line">はじめまして！ サイボウズ株式会社 フロントエンドエンジニア（内定者バイト）の <a href="https://x.com/mehm8128" target="_blank" rel="nofollow noopener noreferrer">mehm8128 (@mehm8128)</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/10/22 の 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="announcing-deno-2" data-line="10" class="code-line">
<a class="header-anchor-link" href="#announcing-deno-2" aria-hidden="true"></a> Announcing Deno 2</h3>
<p data-line="12" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f7190576492e4" src="https://embed.zenn.studio/card#zenn-embedded__f7190576492e4" data-content="https%3A%2F%2Fdeno.com%2Fblog%2Fv2.0" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://deno.com/blog/v2.0" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://deno.com/blog/v2.0</a></p>
<p data-line="14" class="code-line">Deno v2.0 がリリースされました。<br>
v2.0 には次の内容が含まれます。</p>
<ul data-line="17" class="code-line">
<li data-line="17" class="code-line">Node.js および npm との後方互換性
<ul data-line="18" class="code-line">
<li data-line="18" class="code-line">
<code>package.json</code>と<code>node_modules</code>をネイティブでサポート</li>
<li data-line="19" class="code-line">Next.js、Astro、Remix、SvelteKit など多くのフレームワークをサポート</li>
</ul>
</li>
<li data-line="20" class="code-line">
<code>deno fmt</code>で HTML、CSS、YAML をフォーマットできるように</li>
<li data-line="21" class="code-line">ワークスペースとモノレポのサポート</li>
<li data-line="22" class="code-line">プライベートな npm レジストリのサポート</li>
<li data-line="23" class="code-line">ロゴの変更
<ul data-line="24" class="code-line">
<li data-line="24" class="code-line">種類が多く統一したかったことと、小さいサイズで雨の背景が見づらくなるなどといった理由でリニューアルされたようです</li>
</ul>
</li>
</ul>
<table data-line="26" class="code-line">
<thead data-line="26" class="code-line">
<tr data-line="26" class="code-line">
<th>旧ロゴ</th>
<th>新ロゴ</th>
</tr>
</thead>
<tbody data-line="28" class="code-line">
<tr data-line="28" class="code-line">
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--vM_1C5Zk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/517de28360163881acd23cbc.png%3Fsha%3D246d3357efbace2b9e98cf8f2a304b2e4976179e" alt="雨が降っている背景に、左向きの恐竜のロゴ" loading="lazy" class="md-img"></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--Ed4-Qgcc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d004b757a0914fdd9d09fa1c.png%3Fsha%3De69e71d6322f4eb8d4b6135b22f4420f54938b9b" alt="背景に雨は降っておらず、右向きの恐竜のロゴ" loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<h3 id="announcing-typescript-5.7-beta" data-line="30" class="code-line">
<a class="header-anchor-link" href="#announcing-typescript-5.7-beta" aria-hidden="true"></a> Announcing TypeScript 5.7 Beta</h3>
<p data-line="32" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7969c03c06d0a" src="https://embed.zenn.studio/card#zenn-embedded__7969c03c06d0a" data-content="https%3A%2F%2Fdevblogs.microsoft.com%2Ftypescript%2Fannouncing-typescript-5-7-beta%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/</a></p>
<p data-line="34" class="code-line">TypeScript v5.7 Beta が利用可能になりました。<br>
主な変更点は以下の通りです。</p>
<ul data-line="37" class="code-line">
<li data-line="37" class="code-line">
<a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/#checks-for-never-initialized-variables" target="_blank" rel="nofollow noopener noreferrer">Checks for Never-Initialized Variables</a>
<ul data-line="38" class="code-line">
<li data-line="38" class="code-line">今までは、初期化されていない変数が別の関数内で使用される場合に型エラーになっていませんでしたが、今回改善されました</li>
<li data-line="39" class="code-line">具体的には、条件分岐などで変数が初期化される可能性がある場合には今まで通り型エラーにならないのですが、変数の初期化が全く行われない状況では型エラーになるようになりました</li>
</ul>
</li>
<li data-line="40" class="code-line">
<a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/#path-rewriting-for-relative-paths" target="_blank" rel="nofollow noopener noreferrer">Path Rewriting for Relative Paths</a>
<ul data-line="41" class="code-line">
<li data-line="41" class="code-line">今までは相対パスで ts ファイルを import するときには拡張子を<code>.js</code>にしなければならなかったのが、<code>--rewriteRelativeImportExtensions</code>オプションを使うことで<code>.ts</code>で書けるようになります</li>
<li data-line="42" class="code-line">ただし、uhyo さんの<a href="https://zenn.dev/uhyo/articles/rewrite-relative-import-extensions-read-before-use" target="_blank">TS 5.7 の --rewriteRelativeImportExtensions オプションを使う前に読む記事</a>で利用上の注意事項が解説されています</li>
</ul>
</li>
<li data-line="43" class="code-line">
<a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/#support-for---target-es2024-and---lib-es2024" target="_blank" rel="nofollow noopener noreferrer">Support for <code>--target es2024</code> and <code>--lib es2024</code></a>
<ul data-line="44" class="code-line">
<li data-line="44" class="code-line">ECMAScript 2024 をサポートするようになりました</li>
<li data-line="45" class="code-line">
<code>Object.groupBy</code>や<code>Promise.withResolvers</code>など</li>
</ul>
</li>
</ul>
<h3 id="rfc-9651-on-structured-field-values-for-http" data-line="47" class="code-line">
<a class="header-anchor-link" href="#rfc-9651-on-structured-field-values-for-http" aria-hidden="true"></a> RFC 9651 on Structured Field Values for HTTP</h3>
<p data-line="49" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8921de0ea2b8c" src="https://embed.zenn.studio/card#zenn-embedded__8921de0ea2b8c" data-content="https%3A%2F%2Flists.w3.org%2FArchives%2FPublic%2Fietf-http-wg%2F2024JulSep%2F0316.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://lists.w3.org/Archives/Public/ietf-http-wg/2024JulSep/0316.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://lists.w3.org/Archives/Public/ietf-http-wg/2024JulSep/0316.html</a></p>
<p data-line="51" class="code-line">HTTP ヘッダの値を構造化する RFC が更新されました。<br>
現在 HTTP ヘッダの各値のフォーマットはフィールドによってバラバラですが、それを標準化する RFC です。<br>
<a href="https://www.rfc-editor.org/rfc/rfc8941.html" target="_blank" rel="nofollow noopener noreferrer">RFC 8941 Structured Field Values for HTTP</a> で Structured Field Values (SFV) について既に定義されていたのですが、新たに Date 型と UTF8 型が追加されたようです。</p>
<p data-line="55" class="code-line">SFV についての詳細は少し前の記事ですが、jxck さんの記事が参考になります。</p>
<p data-line="57" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8857e4f03f058" src="https://embed.zenn.studio/card#zenn-embedded__8857e4f03f058" data-content="https%3A%2F%2Fblog.jxck.io%2Fentries%2F2021-01-31%2Fstructured-field-values.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.jxck.io/entries/2021-01-31/structured-field-values.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.jxck.io/entries/2021-01-31/structured-field-values.html</a></p>
<h3 id="react-compiler-beta-release" data-line="59" class="code-line">
<a class="header-anchor-link" href="#react-compiler-beta-release" aria-hidden="true"></a> React Compiler Beta Release</h3>
<p data-line="61" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__dc1a81bad977b" src="https://embed.zenn.studio/card#zenn-embedded__dc1a81bad977b" data-content="https%3A%2F%2Freact.dev%2Flearn%2Freact-compiler%23using-react-compiler-with-react-17-or-18" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18</a></p>
<p data-line="63" class="code-line">React Compiler が React v17 と v18 でも利用できるようになりました。<br>
利用するには追加で<code>react-compiler-runtime@beta</code>をインストールし、compiler の設定を変える必要があります。</p>
<h3 id="google's-new-crux-vis-tool%3A-explore-core-web-vitals-data" data-line="66" class="code-line">
<a class="header-anchor-link" href="#google's-new-crux-vis-tool%3A-explore-core-web-vitals-data" aria-hidden="true"></a> Google's New CrUX Vis Tool: Explore Core Web Vitals Data</h3>
<p data-line="68" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__067ab0a46ffff" src="https://embed.zenn.studio/card#zenn-embedded__067ab0a46ffff" data-content="https%3A%2F%2Fwww.debugbear.com%2Fblog%2Fgoogle-crux-vis" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.debugbear.com/blog/google-crux-vis" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.debugbear.com/blog/google-crux-vis</a></p>
<p data-line="70" class="code-line">Google から新しく、 CrUX Vis という Core Web Vitals ツールがリリースされました。<br>
Google がユーザーから収集している CrUX (Chrome UX report) のデータから、指定したサイトの CWV などのメトリクスを時系列で閲覧することができます。</p>
<p data-line="73" class="code-line">関連して、Chrome 129 から DevTools の Performance パネルで同様に CrUX が閲覧できるようになっています。ローカル環境でのパフォーマンスを実際のユーザー体験と比較でき、より詳細にチューニングするのに役立てることができます。</p>
<p data-line="75" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__365185d863b3e" src="https://embed.zenn.studio/card#zenn-embedded__365185d863b3e" data-content="https%3A%2F%2Fdeveloper.chrome.com%2Fblog%2Fdevtools-realtime-cwv%23field-data" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.chrome.com/blog/devtools-realtime-cwv#field-data" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.chrome.com/blog/devtools-realtime-cwv#field-data</a></p>
<h3 id="zustand-v5-release" data-line="77" class="code-line">
<a class="header-anchor-link" href="#zustand-v5-release" aria-hidden="true"></a> Zustand v5 release</h3>
<p data-line="79" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5a5f22d4e81f6" src="https://embed.zenn.studio/card#zenn-embedded__5a5f22d4e81f6" data-content="https%3A%2F%2Fgithub.com%2Fpmndrs%2Fzustand%2Freleases%2Ftag%2Fv5.0.0" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/pmndrs/zustand/releases/tag/v5.0.0" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/pmndrs/zustand/releases/tag/v5.0.0</a></p>
<p data-line="81" class="code-line">Zustand v5 がリリースされました。<br>
新機能の追加は特にないようですが、古い機能が削除されてバンドルサイズが削減されました。具体的には、minified のサイズが v4.5.5 では 3.1kB だったのが、v5.0.0 では 1.2kB まで減りました。</p>
<p data-line="84" class="code-line">また、一部の動作が変更されて無限ループが発生するようになる可能性があるので、アップデート時にはマイグレーションガイドを参照してください。</p>
<p data-line="86" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__46b6a455706a9" src="https://embed.zenn.studio/card#zenn-embedded__46b6a455706a9" data-content="https%3A%2F%2Fzustand.docs.pmnd.rs%2Fmigrations%2Fmigrating-to-v5%23changes-in-v5" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zustand.docs.pmnd.rs/migrations/migrating-to-v5#changes-in-v5" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://zustand.docs.pmnd.rs/migrations/migrating-to-v5#changes-in-v5</a></p>
<h3 id="next.js-15-release" data-line="88" class="code-line">
<a class="header-anchor-link" href="#next.js-15-release" aria-hidden="true"></a> Next.js 15 release</h3>
<p data-line="90" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c9929faaf62e9" src="https://embed.zenn.studio/card#zenn-embedded__c9929faaf62e9" data-content="https%3A%2F%2Fnextjs.org%2Fblog%2Fnext-15" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nextjs.org/blog/next-15" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/blog/next-15</a></p>
<p data-line="92" class="code-line">Next.js 15 がリリースされました。一部アップデート内容を抜粋します。</p>
<ul data-line="94" class="code-line">
<li data-line="94" class="code-line">Async Request APIs
<ul data-line="95" class="code-line">
<li data-line="95" class="code-line">
<code>cookies</code>や<code>headers</code>などの API が非同期関数に変更されました</li>
</ul>
</li>
<li data-line="96" class="code-line">Caching Semantics
<ul data-line="97" class="code-line">
<li data-line="97" class="code-line">
<code>fetch</code>リクエストや<code>GET</code>ルートハンドラーなどがデフォルトでキャッシュされなくなりました</li>
</ul>
</li>
<li data-line="98" class="code-line">React 19 のサポート</li>
<li data-line="99" class="code-line">
<code>instrumentation.js</code> (Stable)
<ul data-line="100" class="code-line">
<li data-line="100" class="code-line">OpenTelemetry などを用いたエラー監視の初期化に使うことができる<code>instrumentation.js</code>が stable になりました</li>
</ul>
</li>
<li data-line="101" class="code-line">
<code>&lt;Form&gt;</code> Component
<ul data-line="102" class="code-line">
<li data-line="102" class="code-line">HTML の<code>&lt;form&gt;</code>タグを拡張した<code>&lt;Form&gt;</code>コンポーネントが導入されました</li>
<li data-line="103" class="code-line">フォームの送信時に client navigation ができたりと、パフォーマンスなどの向上が見込めます</li>
</ul>
</li>
<li data-line="104" class="code-line">Support for <code>next.config.ts</code>
<ul data-line="105" class="code-line">
<li data-line="105" class="code-line">
<code>NextConfig</code>という型を用いて nextConfig に型をつけることができるようになりました</li>
</ul>
</li>
<li data-line="106" class="code-line">Improvements for self-hosting
<ul data-line="107" class="code-line">
<li data-line="107" class="code-line">
<code>Cache-Control</code>ヘッダの細かい制御が可能になりました</li>
</ul>
</li>
</ul>
<h2 id="%E3%81%82%E3%81%A8%E3%81%8C%E3%81%8D" data-line="109" 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="111" class="code-line">個人的に Next.js 15 がリリースされたのが嬉しかったです。<br>
また、Structured Field Values for HTTP については噂を聞いたことあるくらいだったので、詳しく知ることができてよかったです。</p>


Next.js 15 のリリースなど: Cybozu Frontend Weekly (2024-10-22号)

RFC 9651 on Structured Field Values for HTTP

Google's New CrUX Vis Tool: Explore Core Web Vitals Data

Discussion