Cybozu Frontend Monthly #35

タイトル画像

イベント概要

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

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

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

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

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ #サイボウズフロントエンドウィークリー で実況しています。

zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend

開催日

2023年05月30日

イベントページ

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

配信URL

https://www.youtube.com/watch?v=1y6cAVTiuh8

メンバー

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

コンテンツ

👀 Notable Articles

Announcing TypeScript 5.1 RC

TypeScript 5.1 の RC が出たので主要なアップデートを紹介します。

Easier Implicit Returns for undefined-Returning Functions

return 文のない関数の返り値の型として undefined が許容されるようになりました。

Unrelated Types for Getters and Setters

「get の返り値の型」 が 「set の引数の型」 の subtype でなくてはならなという制約がなくなりました。

Decoupled Type-Checking Between JSX Elements and JSX Tag Types

JSX の要素として許容可能な型をカスタマイズできるようになりました。

背景

TS5.0 まではコンポーネントが JSX.Element よりも広い型や異なる型を返したり render したりすると型エラーになります。 例として React は ServerComponents に関連して promise の first class support を提案していますが Promise は現在 JSX.Element の型に含まれません。

TS5.0 までの挙動

TS5.0 まででは JSX 要素をチェックする時に JSX 名前空間の Element 型を利用していました。具体的には JSX 要素がタグ名として有効かどうかをチェックするために、その要素が宣言されているところを参照し返す型や構築する型を取得して、JSX.Element（or JSX.ElementClass）と互換性があるかどうかをチェックしていました。

変更後

TS5.1 からは、JSX.ElementType という型をチェックに利用するように変更され、JSX.ElementType がない場合に　 JSX.Element 型を利用するようになります。この変更により、ライブラリ側で JSX.ElementType を拡張すれば、既存の JSX.Element 型を変更したり、無視したりすることなく、JSX 要素として許容する型を拡張できます。

これらの変更以外にも typeRoots 周りの挙動変更や、パフォーマンス改善、vscode 上での補完がより便利になるなどのアップデートが入っています。

Cache the World: Turbo Charging Firefox Accessibility Performance and Maintainability

Firefox 113 で刷新されたアクセシビリティエンジンについて、刷新の経緯を解説した記事です。

Web ブラウザの進化とともに、次第にアクセシビリティエンジンが低速化していき問題となっていました。 アクセビリティエンジンが低速になってしまった大きな要因として、ブラウザがセキュリティに対して厳格になり、サンドボックス化や特権の制限によって支援技術がアクセシビリティツリー等のプロセスに関与することができなくなったためと言われています。

当初、Firefox の既存アクセビリティエンジンでは COM 通信等の OS 固有である技術を利用して高速化を図っていましたが、複雑化によって次第にメンテナンスコストが大きくなっていきました。 再検討の末、アクセシビリティエンジンを刷新するプロジェクト「Cache the World」が発足しました。

新しいアクセシビリティエンジンでは、メイン UI プロセスがアクセシビリティツリーのキャッシュを保持します。 そして、その他のプロセスはそのキャッシュに対して非同期でプッシュを実施する、という手法を導入しました。 これにより、OS ごとに実施していた細かな最適化処理を共通化しています。

また、キャッシュの再設計に加えて、いくつかの作業も実施したようです。

Chrome のアクセシビリティエンジンとの違い

Announcing Deno KV

Deno v1.33 のリリースの一つとして Deno KV の beta が発表されました。

Deno KV は Deno にビルトインされているので、依存関係を追加せずにすぐに利用できます。例えば、次のように Deno KV にデータを保存する処理を実装すると

const kv = await Deno.openKv()

const key = ["users", crypto.randomUUID()]
const value = { name: "Alice", created: new Date() }
await kv.set(key, value)

const result = await kv.get(key)
console.log(result.value)

ローカル環境では SQLite にデータが保存され、Deno Deploy にデプロイすると、Deno KV データベースは、FoundationDBを使って Deno 社によって管理されます。

トランザクションを含むデータベースの操作もシンプルに実装できそうでしたし、現在はまだベータ版ですが、Deno Deploy + Deno KV を使うことで、Edge からアクセスできるデータベース込みのアプリケーションを簡単に構築できて良さそうですね。

🗓 Monthly Articles

📖 Framework, Library

💬 Languages

🖥 Browsers

🦆 Others

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

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