はじめまして！ サイボウズ株式会社 フロントエンドエンジニア（内定者バイト）の mehm8128 (@mehm8128) です。
はじめに
サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。
今回は、2024/10/22 の Frontend Weekly で取り上げた記事や話題を紹介します。
取り上げた記事・話題
Announcing Deno 2
Deno v2.0 がリリースされました。
v2.0 には次の内容が含まれます。
- Node.js および npm との後方互換性
-
package.jsonとnode_modulesをネイティブでサポート - Next.js、Astro、Remix、SvelteKit など多くのフレームワークをサポート
-
-
deno fmtで HTML、CSS、YAML をフォーマットできるように - ワークスペースとモノレポのサポート
- プライベートな npm レジストリのサポート
- ロゴの変更
- 種類が多く統一したかったことと、小さいサイズで雨の背景が見づらくなるなどといった理由でリニューアルされたようです
| 旧ロゴ | 新ロゴ |
|---|---|
 |
 |
Announcing TypeScript 5.7 Beta
TypeScript v5.7 Beta が利用可能になりました。
主な変更点は以下の通りです。
-
Checks for Never-Initialized Variables
- 今までは、初期化されていない変数が別の関数内で使用される場合に型エラーになっていませんでしたが、今回改善されました
- 具体的には、条件分岐などで変数が初期化される可能性がある場合には今まで通り型エラーにならないのですが、変数の初期化が全く行われない状況では型エラーになるようになりました
-
Path Rewriting for Relative Paths
- 今までは相対パスで ts ファイルを import するときには拡張子を
.jsにしなければならなかったのが、--rewriteRelativeImportExtensionsオプションを使うことで.tsで書けるようになります - ただし、uhyo さんのTS 5.7 の --rewriteRelativeImportExtensions オプションを使う前に読む記事で利用上の注意事項が解説されています
- 今までは相対パスで ts ファイルを import するときには拡張子を
-
Support for
--target es2024and--lib es2024- ECMAScript 2024 をサポートするようになりました
-
Object.groupByやPromise.withResolversなど
RFC 9651 on Structured Field Values for HTTP
HTTP ヘッダの値を構造化する RFC が更新されました。
現在 HTTP ヘッダの各値のフォーマットはフィールドによってバラバラですが、それを標準化する RFC です。
RFC 8941 Structured Field Values for HTTP で Structured Field Values (SFV) について既に定義されていたのですが、新たに Date 型と UTF8 型が追加されたようです。
SFV についての詳細は少し前の記事ですが、jxck さんの記事が参考になります。
React Compiler Beta Release
React Compiler が React v17 と v18 でも利用できるようになりました。
利用するには追加でreact-compiler-runtime@betaをインストールし、compiler の設定を変える必要があります。
Google's New CrUX Vis Tool: Explore Core Web Vitals Data
Google から新しく、 CrUX Vis という Core Web Vitals ツールがリリースされました。
Google がユーザーから収集している CrUX (Chrome UX report) のデータから、指定したサイトの CWV などのメトリクスを時系列で閲覧することができます。
関連して、Chrome 129 から DevTools の Performance パネルで同様に CrUX が閲覧できるようになっています。ローカル環境でのパフォーマンスを実際のユーザー体験と比較でき、より詳細にチューニングするのに役立てることができます。
Zustand v5 release
Zustand v5 がリリースされました。
新機能の追加は特にないようですが、古い機能が削除されてバンドルサイズが削減されました。具体的には、minified のサイズが v4.5.5 では 3.1kB だったのが、v5.0.0 では 1.2kB まで減りました。
また、一部の動作が変更されて無限ループが発生するようになる可能性があるので、アップデート時にはマイグレーションガイドを参照してください。
Next.js 15 release
Next.js 15 がリリースされました。一部アップデート内容を抜粋します。
- Async Request APIs
-
cookiesやheadersなどの API が非同期関数に変更されました
-
- Caching Semantics
-
fetchリクエストやGETルートハンドラーなどがデフォルトでキャッシュされなくなりました
-
- React 19 のサポート
-
instrumentation.js(Stable)- OpenTelemetry などを用いたエラー監視の初期化に使うことができる
instrumentation.jsが stable になりました
- OpenTelemetry などを用いたエラー監視の初期化に使うことができる
-
<Form>Component- HTML の
<form>タグを拡張した<Form>コンポーネントが導入されました - フォームの送信時に client navigation ができたりと、パフォーマンスなどの向上が見込めます
- HTML の
- Support for
next.config.ts-
NextConfigという型を用いて nextConfig に型をつけることができるようになりました
-
- Improvements for self-hosting
-
Cache-Controlヘッダの細かい制御が可能になりました
-
あとがき
個人的に Next.js 15 がリリースされたのが嬉しかったです。
また、Structured Field Values for HTTP については噂を聞いたことあるくらいだったので、詳しく知ることができてよかったです。
Discussion