こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。
はじめに
サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。
今回は、2023/04/18 の Frontend Weekly で取り上げた記事や話題を紹介します。
取り上げた記事・話題
入れ子構造を自由に拡張する – TypeScript 版「Trees that Grow」 | IIJ Engineers Blog
以下のような型を TypeScript でどのように扱うか、様々なパターンや Haskell の例など交えて解説している記事になります。
- 共通のプロパティを持ちながら独自に型引数をとるる型の Union を扱う
- 上記の型が再起的に現れる
記事では 抽象構文木(AST)の取り扱いを例にしていますが、型引数をもらうようなメンバーが多い Union 型 を入れ子構造で持つようなデータ・API の設計では実装の参考にできそうです。
Next.js の app dir で Vanilla Extract が サポート予定
Next.js の app ディレクトリで Vanilla Extract がサポートされる予定です。(対応するPRは執筆時点の 2023/04/20 で最新バージョンの Canary にのみ入っています。)
今後 Next.js を利用する上で、いわゆる Zero-runtime css を採用したい場合に選択肢となりそうです。
2023-03 の TC39 meeting - moriken's project
3 月の TC 39 の会議の細かいログについてまとまっています。
内容は多岐にわたりますが、社内のメンバーからは以下の内容について触れられました。
-
Test262(ECMAScript の仕様を網羅したテストスイート)の funding が大きく減りそうである - Stage3 の
Iterator helpersの仕様が徐々に固まってきている
PWAs in app stores
PWA を Google Play Store や Apple App Store に公開する PWABuilder の紹介です。
Safari が WebPushAPI に対応し、実用性の高まった PWA ですが、AppStore への公開などは依然として難しい状態でした。
この PWABuilder を利用すると PWA で構築したアプリを各プラットフォーム向けに簡単にビルドできます。
Announcing Deno SaaSKit: an open-source SaaS template built with Fresh
Deno による web フレームワークである Fresh を使った Deno SaaSKit の beta 版がリリースしました。
SaaS として必要な機能が包括されたテンプレートで、決済系は Stripe 、認証は Supabase Auth、DB は Supabase Database が利用されています。また今後 Deno Deploy との連携も追記されそうです。
CSS の @import で supports()が Firefox の nightly で実装
CSS の @import ルールの中で supports()が Firefox の nightly で実装されました。
以下の例のように、「supports の引数で指定した条件に合致した際、 @import で指定した CSS ファイルをインポートする」といった動作が実現できるようになります。
@import url("fallback-layout.css") supports(not (display: flex));
なお執筆時点(2023/04 末)では Chrome と Safari でサポートされておらず実装も始まっていないので、主要ブラウザでサポートが揃うにはもう少しかかりそうです。
More ways we’re making Chrome faster
Chrome のスピードアップに向けた取り組みの紹介記事です。
具体的には以下のような改善をすることでデスクトップ・モバイル双方のパフォーマンスや体験を改善しました。
- 使用頻度の高い
Object.prototype.toStringなどのいくつかの関数で最適化手法が見つかったので、実装を修正。 -
innerHTMLメソッドのために専用の高速パーサーを追加。(この実装は Webkit にも導入された。) - メモリ消費を削減するポインタ圧縮最適を、高トラフィックな項目にあえて適用しないことで、圧縮にかかる時間を速度向上に回した。
- Android 向けの Chrome では、性能の低い端末も考慮し、サイズの小ささを重視したバイナリを作っていたが、ハイエンドモデル向けには速度重視のバイナリを提供するようにする
freee 会計での Module Federation によるマイクロフロントエンドの実践
freee 会計で Module Federation によるマイクロフロントエンドの構成を行なった際の背景や検討事項、課題についてまとめられています。今後画面をマイクロフロントエンド化する上での 1 つの選択肢として参考になりそうです。
あとがき
サイボウズでは毎月、最終火曜日の 17 時から Frontend Monthly というイベントを YouTube Live で開催しています。その月のフロントエンド注目ニュースや、ゲストを呼んでの対談など、フロントエンドに関する発信をしていますので是非どうぞ！
Discussion