Cybozu Frontend Monthly #47

タイトル画像

イベント概要

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

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

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

※フロントエンドウィークリーとは

毎週火曜の 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

メンバー

@b4h0_c4t@b4h0_c4t
@sajikix@sajikix
@mugi_uno@mugi_uno
@nus3_@nus3_

コンテンツ

👀 Notable Articles

About “slow types” - Docs - JSR

新しいパッケージレジストリである JSR では「明示的に記述されていない型」や、「理解するために広範な推論を必要とするほど複雑な型」を slow typesとしてマークし、このようなような型を利用していないかをチェックするようにしているという記事です。

slow types の問題

JSR ではドキュメントの自動生成や 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 の公開

React 19 Beta が公開され、多くの機能が利用可能になりました。以前から Canary チャンネルに含まれていて、Next.js ユーザーなどは先行して利用していた機能が多く含まれています。

機能追加・変更の一部を抜粋すると次のようなものが挙げられます。

また、React 18.3 も公開されました。これは 18.2 と機能的にはほぼ同一ですが、React 19 へ移行した場合に警告を出してくれるため、問題点の事前検出に役立ちます。

React Compiler

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

React Router v7 で Remix が統合され、Remix で提供されていたすべての機能が React Router で使えるようになりそうです。

React Router v7 がリリースされたタイミングで、インポート先を@remix-run/*からreact-routerに変更することで移行が可能。codemod も提供予定。Remix パッケージの今後については、なるべく早く共有するとのことです。

🗓 Monthly Articles

📖 Framework, Library

⚡️ Services

💬 Languages

🖥 Browsers

🤖 Runtimes

🦆 Others

フロントエンドエキスパートチームについて

https://speakerdeck.com/cybozuinsideout/frontendexpert-team