Cybozu Frontend Monthly #43

イベント概要

サイボウズフロントエンドマンスリーは、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエンジニアのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。

開催日

2024年01月30日

イベントページ

https://cybozu.connpass.com/event/307555/

メンバー

---

コンテンツ

👀 Notable Articles

Chromium では Prefetch や Prerender を総称して Speculative Loading と呼ぶことになった話

• 共有者: @nakajmg

Chromium が「Preloading」という単語の代わりに今後は「Speculative Loading」を使っていくという話題。

これは Web の文脈で単に「Preloading」といったときに何を指すのかが伝わりづらくなってきたという背景があります。DevTools にもこの変更が入っており、Application パネルで Preloading が Speculative loads という項目名に変わっています。

現状は Chromium の独自用語という位置づけですが、MDN にSpeculative loadingというページがあったり、Speculation Rules APIが Chromium で実験的に実装が進んでいたりと、一般化していきそうな雰囲気があるように感じます。

---

A definition update for Baseline

• 共有者: @mugi_uno

Google I/O 2023 にて、ブラウザにおける機能サポートのステータスの新しい考え方として Baseline が発表されました。 当初は、主要ブラウザの直近２バージョンでサポートされているものが Baseline 機能として含まれていましたが、次のように定義が更新されました。

• Newly available : Baseline の対象ブラウザすべてで利用可能になった機能
• Widely available : Newly available に加わってから 30 ヶ月が経過した機能
• Baseline の対象ブラウザ
  • Safari (macOS and iOS)
  • Firefox (Desktop and Android)
  • Chrome (Desktop and Android)
  • Edge (Desktop)

日々ブラウザでは新しい機能が利用可能になっていますが、現実的にどこまで使って良いのかの判断は難しく、 Transpile や Polyfill の設定で悩まされた経験を持つ方も多いのではないかなと思います。 Baseline が一つの指標として示され、かつ今回の定義の更新で詳細化されたことで、 「Widely available に入っているのでこの機能を採用しよう」という判断ができるようになるのは嬉しいポイントになりそうです。

---

TypeScript 5.4 Iteration Plan

• 共有者: @sajikix

TypeScript の 5.4 beta が発表されます。（収録時にはブログがあがっていませんが動画公開のタイミングでは発表されている予定です。）このバージョンでは型推論の強化や新しい記法などが追加される予定です。その中でも面白い機能を紹介します。

• Type Narrowing for Variables in Closures Occurring After Last Assignments

  • mutable な変数や catch 節の引数などにおいて最後の代入された結果を元に、その変数を利用したクロージャの推論を厳しくする機能が追加されます。

  • function f1() {
      let x: string | number
      x = "abc"
      action(() => {
        x
      }) // x は string | number
      x = 42
      action(() => {
        x
      }) // x は number に推論される
    }

• The NoInfer Intrinsic

  • 型引数の推論をするときに参照をブロックするNoInfer<T>という記法が新しく追加されます。

  • declare function fooInfer<T extends string>(a: T, b: T): void
    declare function fooNoInfer<T extends string>(a: T, b: NoInfer<T>): void
    
    fooInfer("foo", "bar") // OK  Tは "foo" | "bar" に推論される
    fooNoInfer("foo", "bar") // error  "bar" の方の推論がブロックされて Tは "foo" に推論されるため

  • これにより他の型引数を使っているところなどに影響を与えずに部分的に型引数による推論を拒否することができます。

• Make isTypeAssignableTo public on TypeChecker

  • 今まで内部的にあった typeChecker のisTypeAssignableToメソッドがちゃんと export されて使えるようになります。
  • ts-eslint などのツールでは型チェックをするときに代入可能かどうかを調べたいユーケースが非常に多くツール開発者にとって嬉しい変更といえます。(実際この修正自体が ts-eslint からの強い要請を受けたもののようです。)

このほか TS5.4 に入るかどうかは怪しいですが意欲的な改善やオプションの追加が IterationPlan には並んでいます。

---

🗓 Monthly Articles

📖 Framework, Library

• facebook/stylex: StyleX is the styling system for ambitious user interfaces.
  • StyleX のリリースに合わせて、GitHub で StyleX のコードが公開
• future of library & maintenance · Issue #1194 · clauderic/dnd-kit
  • dnd-kit に対して、メンテナンスは継続してやっていくのか、これからのロードマップがどうなるのか確認する issue
• Storybook for React Server Components
  • Storybook で React Server Components（RSC）のサポートが experimental な機能として追加された
• React Forget がもうすぐ来るかも？
  • React DevTools v5.0 には新たに Forget というバッジが表示されるようになっており、Web 版 Instagram ではすでにこのバッジが表示されており、近々 React Forget が来るのでは？という話
• Announcing SvelteKit 2
  • SvelteKit 2 がリリースされた。Vite 5 への対応や、Shallow routing の追加など
• Oxlint General Availability | The JavaScript Oxidation Compiler
  • Oxc の Linter である oxlint が使えるようになった。記事内では ESLint の実行速度の違いなどに触れられている
• React Aria Components v1 リリース
  • Adobe の提供するコンポーネントライブラリ React Aria Components の v1.0.0 がリリースされた
• Release Version 23.2.0 · jsdom/jsdom
  • jsdom の 23.2.0 がリリースされた。CSS セレクタエンジンが nwsapi から@asamuzakjp/dom-selector に変更されたのが主な変更点
• Astro ゆく年くる年
  • Astro の 2023 に実装された機能や 2024 のロードマップのまとめ
• Future of Storybook in 2024
  • Storybook が 2023 年にやったことのまとめや 2024 年のロードマップ
• Rolldown の OSS 化の時期について
  • Evan You が、自身の開発するモジュールバンドラ Rolldown のステータスに関して昨年末に言及。OSS 化は 2024 年 1Q の OSS 化の見込みとのこと
• Announcing Vue 3.4 | The Vue Point
  • Vue 3.4（コードネーム「🏀 Slam Dunk」）がリリース。SFC（単一ファイルコンポーネント）のビルドの改善や、ReactivitySystem の効率化、Reactivity Transform の完全な削除など
• Release v0.4.0 - Beta 2 · solidjs/solid-start
  • SolidJS のフレームワーク SolidStart の v0.4.0-Beta2 がリリースされた
• Rust-Based JavaScript Linters: Fast, But No Typed Linting Right Now | Goldblog
  • Rust ベースの Linter に関する 2023 年現在の状況を整理した記事
• ESLint v9.0.0-alpha.1 released - ESLint - Pluggable JavaScript Linter
  • ESLint v9.0.0 のアルファ版がリリースされました。v9.0.0 からは ESLint の設定ファイルに Flat Config が導入される

---

💬 Languages

• ECMAScript 考古学をするときに
  • FEE チームの sajikix が JSConf JP 2023 での発表の過程で得た「ECMAScript の仕様の歴史を追う方法」をまとめた記事
• Announcing Deno Cron
  • スケジュールされたジョブを簡単に作成できる Deno Cron がリリースされた
• CSS Snapshot 2023
  • CSS Snapshot 2023 が Note として公開。CSS の各モジュールの仕様が 2023 現在どういう状態なのかまとめられている
• CSS ラップ: 2023 年
  • Chrome による、2023 年の CSS に関するまとめ記事
• Deno 1.39: The Return of WebGPU
  • Deno 1.39 がリリースされた。過去にパフォーマンスの問題から削除された WebGPU が問題を解消して再度追加、Node.js との互換性の向上など
• 2023 JavaScript Rising Stars
  • 2023 年の間でスター数が増加したリポジトリのランキング

---

🖥 Browsers

• WebKit Features in Safari 17.2 | WebKit
  • Safari 17.2 がリリースされた。Custom Highlights API など新機能の追加や、Interop 2023 の活動の一環として大量の CSS の修正がこのリリースに含まれている
• V8 is Faster and Safer than Ever! · V8
  • 2023 年に行った V8 の改善内容などの紹介記事。パフォーマンスの最適化、パーサーの改善、JavaScript や WASM への新機能の追加などなど、V8 に多くの改善が入ったことで速度とセキュリティが向上したとのこと
• 主要ブラウザでサポートされつつある WasmGC とは何なのか
  • 主要ブラウザでサポートがそろいつつある WasmGC についての紹介記事
• A definition update for Baseline
  • Web プラットフォームの機能が安全に使えるかどうかの情報を提供する Baseline の定義が更新された
• Chrome ユーザーの 1% に対して、デフォルトでサードパーティ Cookie の使用が制限されている
  • Chrome では 2024 年後半に全てのユーザーのサードパーティ Cookie を段階的に廃止する予定で、2024/1/4 から 1%のユーザーに対して制限が開始された
• Chromium では Prefetch や Prerender を総称して Speculative Loading と呼ぶことになった話
  • Chromium において、Prefetch や Prerender を Preloading と総称していたが、これを Speculative Loading に改めた

---

🦆 Others

• Web Performance Calendar » 2023
  • パフォーマンスに関するアドベントカレンダーが今年も開催された
• 【月間 9000 万 PV の PR TIMES】プレスリリース掲載ページの Next.js 移行でやったこと | PR TIMES 開発者ブログ
  • PR TIMES が PHP・Smarty・jQuery というスタックから Next.js へ移行した際の詳細などを紹介している記事
• 一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
  • 一休レストランのサイトのフロントエンドを Next.js から Remix に移行した際の背景や経緯について紹介している記事
• 1 年かけて Next.js の app router へ完全移行した話
  • Next.js で Pages Router から App Router に移行した事例の紹介記事
• PR TIMES のフロントエンドを支える技術 2023 | PR TIMES 開発者ブログ
  • PR TIMES で進められているフロントエンド刷新の技術構成を紹介
• eBPF を使った自動テストツール「Keploy」がすごい
  • 外部通信を伴うテストの自動化を支援するツール「Keploy」の紹介記事
• 型を少し工夫して、より安全なコードへ - エムスリーテックブログ
  • TypeScript で活用できる型テクニックが詳細な実例を添えて紹介した記事
• JSer.info 13 周年: JavaScript の情報源を整理する - JSer.info
  • JavaScript に関する情報を発信している Web サイト「JSer.info」が 13 周年を迎えた