Articles / few 23-04-18

articles/few-2023-04-18.md

@@ -0,0 +1,109 @@
+---
+title: " Next.js/app-dir の Vanilla Extract サポートなど (2023-04-18号)" # 目立ったニュースを選ぶ
+emoji: "🔔" # お好きな絵文字を
+type: "tech" # tech: 技術記事 / idea: アイデア
+topics: ["CybozuFrontendWeekly", "frontend"]
+published: false
+publication_name: "cybozu_frontend"
+---
+
+こんにちは! サイボウズ株式会社フロントエンドエンジニアの [Saji (@sajikix)](https://twitter.com/sajikix) です。
+
+# はじめに
+
+サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。
+
+今回は、2023/04/18 の Frontend Weekly で取り上げた記事や話題を紹介します。
+
+# 取り上げた記事・話題
+
+## 入れ子構造を自由に拡張する – TypeScript 版「Trees that Grow」 | IIJ Engineers Blog
+
+https://eng-blog.iij.ad.jp/archives/18900
+
+共通のプロパティを持ちつつそれぞれ独自に型引数をもらい拡張されるような型が再起的かつ Union で管理されるような場合に、どのように型引数を渡したり管理したりすればいいかを解説している記事です。記事では 抽象構文木(AST)の取り扱いを例にしていますが、それぞれが独自のプロパティを持った種類の多いフィールドを入れ子構造で持つようなデータ・API の設計でも実装の参考にできそうです。
+
+## Next.js の app dir で Vanilla Extract が サポート
+
+https://twitter.com/markdalgleish/status/1647415009268629504?s=20
+
+Next.js の app dir で Vanilla Extract がサポートされました。
+
+今後 Next.js を利用する上で、いわゆる Zero-runtime css を採用したい場合に選択肢となりそうです。ただし今回のサポートは Client Components の範囲のものであり、Server Components では依然として Vanilla Extract をはじめとする CSS-in-JS が利用ができないので注意しましょう。
+
+## 2023-03 の TC39 meeting - moriken's project
+
+https://scrapbox.io/petamoriken/2023-03_%E3%81%AE_TC39_meeting
+
+3 月の TC 39 の会議の細かいログについてまとまっています。
+
+内容は多岐にわたりますが、社内のメンバーからは以下の内容について触れられました。
+
+- `Test262`(ECMAScript の仕様を網羅したテストスイート)の funding が大きく減りそうである
+- Stage3 の`Iterator helpers`の仕様が徐々に固まってきている
+
+## PWAs in app stores
+
+https://web.dev/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
+
+https://deno.com/blog/announcing-deno-saaskit
+
+deno による web フレームワークである `Fresh` を使った Deno SasSKit の beta 版がリリースしました。
+
+SaaS として必要な機能が包括されたテンプレートで、決済系は `Stripe` 、認証は `Supabase Auth`、DB は `Supabase Database` が利用されています。また今後 deno Deploy との連携も追記されそうです。
+
+## CSS の @import で supports()が Firefox の nightly で実装
+
+https://twitter.com/intenttoship/status/1646454675107987456?s=20
+
+CSS の `@import` ルールの中で `supports()`が Firefox の nightly で実装されました。
+
+以下の例のように、「`supports` の引数で指定した条件に合致した際、 `@import` で指定した CSS ファイルをインポートする」といった動作が実現できるようになります。
+
+```css
+@import url("fallback-layout.css") supports(not (display: flex));
+```
+
+詳しくは[仕様書のページ](https://drafts.csswg.org/css-cascade-4/#example-c6c2c0ee)や[デモ](https://t.co/C68S2MRaK4)を参照してください。
+
+なお執筆時点(2023/04 末)では Chrome と Safari でサポートされておらず実装も始まっていないので、主要ブラウザでサポートが揃うにはもう少しかかりそうです。
+
+## More ways we’re making Chrome faster
+
+https://blog.chromium.org/2023/04/more-ways-were-making-chrome-faster.html
+
+Chrome のスピードアップに向けた取り組みの紹介記事です。
+
+具体的には以下のような改善をすることでデスクトップ・モバイル双方のパフォーマンスや体験を改善しました。
+
+- 使用頻度の高い`Object.prototype.toString` などのいくつかの関数で最適化手法が見つかったので、実装を修正。
+- `innerHTML` メソッドのために専用の高速パーサーを追加。(この実装は Webkit にも導入された。)
+- メモリ消費を削減するポインタ圧縮最適を、高トラフィックな項目にあえて適用しないことで、圧縮にかかる時間を速度向上に回した。
+- Android 向けの Chrome では、性能の低い端末も考慮し、サイズの小ささを重視したバイナリを作っていたが、ハイエンドモデル向けには速度重視のバイナリを提供するようにする
+
+## freee 会計での Module Federation によるマイクロフロントエンドの実践
+
+https://speakerdeck.com/1coin/freeehui-ji-tenomodule-federationniyorumaikurohurontoentonoshi-jian
+
+freee 会計で Module Federation によるマイクロフロントエンドの構成を行なった際の背景や検討事項、課題についてまとめられています。今後画面をマイクロフロントエンド化する上での 1 つの選択肢として参考になりそうです。
+
+## Cloudflare に入社しました - ゆーすけべー日記
+
+https://yusukebe.com/posts/2023/join-cloudflare/
+
+hono の作者である [@yusukebe](https://twitter.com/yusukebe) 氏が Cloudflare に入社されました。
+
+以前から `hono` の開発やエッジランタイムにおける開発知見の共有を精力的にされている [@yusukebe](https://twitter.com/yusukebe) 氏が Cloudflare の Developer Advocate になられたとのことで、今後の活動にも注目したいところです。
+
+# あとがき
+
+サイボウズでは毎月、最終火曜日の 17 時から Frontend Monthly というイベントを YouTube Live で開催しています。その月のフロントエンド注目ニュースや、ゲストを呼んでの対談など、フロントエンドに関する発信をしていますので是非どうぞ！
+
+https://cybozu.github.io/frontend-monthly/