Cybozu Frontend Monthly #47
![タイトル画像](/frontend-monthly/_astro/header.fbc93836_1LeOhz.webp)
イベント概要
サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。
その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエキスパートチームのメンバーが共有していきます。
このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。
※フロントエンドウィークリーとは
毎週火曜の 17:00 〜 18:00
で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ
#サイボウズフロントエンドウィークリー
で実況しています。
zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend
開催日
2024年05月28日
イベントページ
https://cybozu.connpass.com/event/318405/
配信URL
https://www.youtube.com/watch?v=YHFDpCrXrrM
メンバー
コンテンツ
👀 Notable Articles
About “slow types” - Docs - JSR
- 共有者: @sajikix
新しいパッケージレジストリである JSR では「明示的に記述されていない型」や、「理解するために広範な推論を必要とするほど複雑な型」を slow types
としてマークし、このようなような型を利用していないかをチェックするようにしているという記事です。
slow types
の問題
JSR ではドキュメントの自動生成や npm 互換の型宣言生成のために多くの型解析を行っており、推論コストの高い型が含まれると以下のような問題が発生します。
- 多くのパッケージで 1.5~2 倍近い解析時間がかかる
- 一部 npm 互換の型宣言生成が行えない場合がある
- 型からドキュメントを生成することができない場合がある
またそもそも完全に TypeScript の型推論を行うことができるのはTypeScript compiler(tsc)
のみで、この tsc の複雑な推論機能は頻繁にアップデートされます。自動的に型宣言やドキュメントを生成する JSR にとって、明示的でなく型推論の必要な型を利用することは生成物の冪等性を保証できないことにつながります。このような理由から、JSR では slow types
を使用せず明示的に型をつけることを推奨しており、これを Scoring にも反映させています。
詳しくはこの記事について言及した github issue も詳しいです。
何が slow types
なのか
では具体的に slow types
はどのようなものが該当するのでしょうか。JSR においては export されている関数、クラス、const, let に 明示的な型記述がない場合や、型が単純に推測できるものより複雑な場合に slow types
としてマークされます。(内部的に import/export しているもので明示的な型記述がないものは JSR としてはslow types
としていません。slow types
はあくまで外部に export されている変数や関数・オブジェクトの推論の難しさに焦点を当てています。)
例えば返り値の方を方を明示していない関数や初期化部分を参照しないと算出できないプロパティやメソッドなどが該当します。
export function foo() {
return Math.random().toString()
}
またパッケージはグローバル・スコープや他のモジュールを拡張するために、declare global
、declare module
、export as namespace
を使用することはできないなどの制約もあります。
slow types
を防ぐ
deno-lint を利用している環境では no-slow-types
というルールによって意図しない slow types の発生を防ぐことができるとしています。
また必ずしもslow types
を防げるとは限りませんが、同じような思想から考案された --isolatedDeclaration option
が TypeScript 5.5 で導入されています。
React 19 Beta の公開
- 共有者: @mugi_uno
React 19 Beta が公開され、多くの機能が利用可能になりました。以前から Canary チャンネルに含まれていて、Next.js ユーザーなどは先行して利用していた機能が多く含まれています。
機能追加・変更の一部を抜粋すると次のようなものが挙げられます。
- Action (非同期トランジションを用いた関数のサポート)
use()
・useActionState()
・useFormStatus()
・useOptimistic()
などの hooks- Server Component / Server Action
ref
の Props アクセス (forwardRef
が不要に)<Context>
を直接プロバイダとして利用可能に- ドキュメントメタデータやスタイルシートのサポート
- など
また、React 18.3 も公開されました。これは 18.2 と機能的にはほぼ同一ですが、React 19 へ移行した場合に警告を出してくれるため、問題点の事前検出に役立ちます。
React Compiler
- 共有者: @b4h0_c4t
React 19 Beta から利用可能な実験的機能として React Compiler が登場しました。
React Compiler は一般的な JavaScript のセマンティクスと Rules of React に適合したコードベースに対して自動的にメモ化を差し込むことができます。
現在は、コードベースが React Compiler に適合しているかチェックできる react-compiler-healthcheck
と Vite 用のプラグインである vite-plugin-react
、Babel プラグインの babel-pluin-react-compiler
、eslint プラグインとして同様の機能を備えた eslint-plugin-react-compiler
が公開されています。
Merging Remix and React Router
- 共有者: @nus3_
React Router v7 で Remix が統合され、Remix で提供されていたすべての機能が React Router で使えるようになりそうです。
React Router v7 がリリースされたタイミングで、インポート先を@remix-run/*
からreact-router
に変更することで移行が可能。codemod も提供予定。Remix パッケージの今後については、なるべく早く共有するとのことです。
- React Router から Remix の移行を簡単にするためのブリッジを作りすぎた結果、Remix と React Router の違いがなくなってきた
- React Router のアプリを Remix に移行することの難易度が高い
- React Router から Remix の移行を簡単にしたとして、書き換えの印象を与えてしまう
- そこで React Router のメジャーバージョンアップデートであればどうだろうか?
- React が提供する最新で最高な機能を活用できるような React エコシステムを作りたい
- 今は React Router v7 の安定化に取り組んでいる
- Remix プロジェクトでは今後取り組む予定のエキサイティングな計画がある。Remix はしばらくお休みの予定
- Remix をよりサーバー中心のものにして、その上に React Router プロジェクトを使用するようなアイデアも考え中
🗓 Monthly Articles
📖 Framework, Library
- React の
fetch()
拡張が削除- React に標準で含まれていた
fetch()
に対するパッチが削除されました。Next.js では別のパッチとして対応が維持されるようです。
- React に標準で含まれていた
- Deep Dive into Rspack & Webpack Tree Shaking
- Webpack と Webpack 互換の Rspack の Tree Shaking 概念について解説されています。
- eslint-plugin-import をフォークした eslint-plugin-i が eslint-plugin-import-x にリネームし、独立パッケージとして開発が開始される
- eslint-plugin-import をフォークした eslint-plugin-i が以前から存在していましたが、課題解決などに限界があることから、独立した eslint-plugin-import-x というパッケージとして開発が開始されました。
- Tracking: ESLint v9 support
- ESLint プラグインの ESLint v9 対応状況をトラッキングするページです。
- React 19 Beta の公開
- React 19 Beta が公開されました。Actions,
use()
, ref の Prop アクセスなどが含まれています。
- React 19 Beta が公開されました。Actions,
- React Spectrum - May 1, 2024 Release
- React Aria の 5 月のリリース内容をまとめた記事です。Submenu, DropZone, File Trigger などが正式版になるなどの変更が加えられています。
- @headlessui/react@v2.0.0
- HeadlessUI@react v2.0 の新機能や変更点を紹介する記事です。Checkbox や Form に関連するコンポーネントが追加されるなどの変更が加えられています。
- Libraries with issues #25
- React を取り巻く一部の周辺ライブラリで起票した React19 対応 Issue をまとめた Issue です。
- Hey everyone, thank you for sharing some of the challenges with accessing pathname.
- Next.js で、Server Components や Layout が URL/Pathname にアクセスできない理由を記した Issue コメントです。共通レイアウトのレンダリングの都合によるものと説明されています。
- In a future React release, it’s likely we’ll patch the Date API during SSR and hydration to prevent mismatches.
- 今後の React のリリースにて、React の SSR とハイドレーションの間で生じる Date 値のミスマッチを防ぐために、Date API へパッチを適用することを検討している旨を知らせるツイートです。
⚡️ Services
- JSR Is Not Another Package Manager
- npm パッケージ・レジストリがほとんど進化していない現状を指摘して、JSR が目指すところを表明した記事です。
💬 Languages
- Announcing TypeScript 5.5 Beta
- TypeScript 5.5 Beta が公開されました。新しい型推論や正規表現の構文チェックなどが含まれます。
- JavaScript: 最初の 20 年
- Allen Wirfs-Brock, Brendan Eich 著『JavaScript: the first 20 years』の翻訳ページです。
🖥 Browsers
- Google、サードパーティ cookie 廃止を 3 度目の延期
- Chrome でのサードパーティクッキー廃止が延期されました。2025 年初頭からの廃止が予定されています。
- Intent to Ship: View Transitions Same-Origin Navigation
- Chrome にて、View Transition が MPA でも利用できるようになりました。利用するには
viewTransition API for navigations
のフラグを有効化する必要があります。
- Chrome にて、View Transition が MPA でも利用できるようになりました。利用するには
- Intent to Prototype: Find-in-page highlight pseudos
- ページ内検索されてヒットした要素のスタイルを
::search-text
で変更できるようにする仕様です。
- ページ内検索されてヒットした要素のスタイルを
- Intent to Prototype: Multi-argument alt text in CSS Generated Content
- CSS の content 属性で画像を指定したときに設定できる alt テキスト(例:
content: url("cat.jpg") / "A cute cat";
の"A cute cat"
)に関数値を含む複数の引数値を指定できるようにする仕様です。
- CSS の content 属性で画像を指定したときに設定できる alt テキスト(例:
- Intent to Prototype and Ship: Align navigator.cookieEnabled with spec
navigator.cookieEnabled
の挙動を元の仕様に合わせる変更が行われます。今までは、3rd Party Cookie 非推奨化に伴いパーティション化されていないクッキーへのアクセス可否を示していましたが、単にそのサイトで Cookie が使用できるかどうかを返すようになります。
- Chromium Blog: How Machine Learning improved the Chrome address bar on Windows, Mac and ChromeOS
- Chrome 124 からアドレスバー(omnibox)に入力を与えた時のサジェストに機械学習モデルが使用されることを紹介した記事です。
- Google Chrome’s new post-quantum cryptography may break TLS connections
- Chrome 124 から耐量子暗号(Post-quantum cryptography)を使用した TLS 通信が有効になったことを伝える記事です。
- Ship: navigator.clipboard.read() and navigator.clipboard.write()
- クリップボード操作を行う
navigator.clipboard.read/write()
が Firefox127 からデフォルトで利用できることに触れています。
- クリップボード操作を行う
- Ship: New Set Methods
- 新しい Set メソッドが Firefox127 からデフォルトで利用できることに触れています。
- Prototype: CSS Anchor Positioning
- CSS Anchor Positioning に関して、Safari の WebKit は公式見解がないものの、仕様の共同編集はしていることに触れています。
🤖 Runtimes
- Node.js — Node.js 22 is now available!
- 近々リリースされる Node.js 22 の新機能や変更点を紹介する記事です。
require()
を使った ESModule の読み込みが一部条件下で可能になるなどの変更が加えられています。
- 近々リリースされる Node.js 22 の新機能や変更点を紹介する記事です。
- Bun v1.1.5 | Bun Blog
- Bun v1.1.5 の新機能や変更点を紹介する記事です。クロスコンパイルのサポートなどが追加されています。
🦆 Others
- Accessibility Visualizer Browser Extension
- アクセシビリティ情報を可視化するブラウザ拡張機能です。代替テキストや見出しレベルなどを視覚的に確認できます。
- Creating a pointer-friendly submenu experience
- メニューをホバーしているときにサブメニューが表示される UI において、ポインターの操作性を向上させるためのアプローチを紹介した記事です。ホバー範囲の工夫のみならず、ポインターの速度なども勘案されています。
- TSKaigi のタイムテーブルが公開
- 2024 年 5 月 11 日に開催される TSKaigi のタイムテーブルが公開されました。
- builderscon 2024 をやります!
- 2024 年 8 月 10 日に builderscon 2024 開催が発表されました。現在トークを募集中です。
- The Front End Developer/Engineer Handbook 2024
- 2024 年のフロントエンド周辺の領域に関する解説を網羅的に扱ったドキュメントです。
- WebAssembly は次世代のコンテナ技術になれるか?
- WebAssembly のコンテナ代替としての可能性と問題点について考察しています。
- Web フロントエンド版 DX Criteria が公開
- Web フロントエンドの技術領域観点について、全 100 項目からなるガイドラインが公開されました。