Cybozu Frontend Monthly #40

イベント概要

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

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

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

開催日

2023年10月30日

イベントページ

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

配信URL

https://www.youtube.com/watch?v=2f8FE2Y9HfQ

メンバー

---

コンテンツ

👀 Notable Articles

Cloudflare Fonts: enhancing website font privacy and speed

• 共有者: mugi_uno

Cloudflare から Cloudflare Fonts と呼ばれる機能が発表されました。記事の中では、Web フォントを提供する代表的なサービスである Google Fonts と比較し、プライバシーやパフォーマンスの面でのメリットが紹介されています。

プライバシーの面では、Cloudflare Fonts を介してフォントを提供することで、フォント取得のためにサードパーティドメインへのリクエストを防ぐことができるとのことです。

パフォーマンス面においては、従来では Web フォント取得用の CSS を解析した上で必要とされるフォントの取得が行われるため、サーバーへのラウンドトリップが複数回発生していました。一方で Cloudflare Fonts では、HTML を Cloudflare 側で解析した上で CSS はインラインに埋め込まれ、かつフォントファイルも Cloudflare の 最寄りの Edge Cache から返すことで速度の改善が期待できるようです。

現状 Google Fonts のみのサポートのようですが、HTML の書き換えはすべて Cloudflare 側で行うため、利用者側で行う設定は Cloudflare のダッシュボードから Cloudflare Fonts を有効化するだけ、という点が非常に面白く感じました。

---

The State of WebAssembly 2023

• 共有者: b4h0_c4t

Scott Logic の The State of WebAssembly 2023 のサーベイ結果が公開されました。

使用言語はやはり Rust が最も多く、続いて JavaScript、C++となっています。 去年と比較して Swift と Zig での開発者が増加しているようです。

使用環境は Web 開発が最も多く、次点でサーバレスアプリケーションのスクリプトとしての利用が多くみられます。 信頼できないコードを隔離された環境で実行できるという観点から、プラグイン環境として WebAssembly を提供する場面が顕著に増加しているようです。

W3C のプロポーザルから欲しい新機能として、昨年同様のマルチスレッド間でのメモリ共有やガベージコレクションの他に、コンポーネントモデルが求められ始めているようです。 WASI では I/O 関連の標準化が待たれていますね。

一般的な Web 開発ではあまり触れる機会の多くない WebAssembly ですが、プラグイン環境への活用やサーバレススクリプトとしての適用など、活躍の場面を増やしていっています。 着々と進んでいる新機能のリリースによって、今後も新たな活用の場面が増えていくのではないでしょうか。

---

Faster TypeScript builds with —isolatedDeclarations

• 共有者: sajikix

TypeScript に今後導入予定の --isolatedDeclarations オプションについて「解決したかった問題」と「実際に何をこなうのか」を解説した動画になります。(これは Bloomberg のエンジニアである Titan 氏が TS Congress で発表した際のものです。)

TypeScript の型定義ファイル出力においては、しばしば他ファイルを参照した型チェック・推論が必要になることが多く、この制約が並列化を制限しています。このような現状に対して「もしこの制限を取り去りファイルごとに独立して型定義ファイルの出力することができれば処理の並列化が可能になりパフォーマンスが改善するはずである」という前提に立って生まれたオプションが--isolatedDeclarationsオプションです。

--isolatedDeclarationsオプションを有効にすると他ファイルへの型推論を必要とする型定義ファイルの出力が制限される代わりに、並列化が大きな影響を持つ monorepo project などで大きくパフォーマンスが改善されるとしています。

またこの動画では--isolatedDeclarationsオプションを有効にする際の制限や他ファイルへの参照が必要ない推論についてサンプルコードをもとに解説しています。これらをもとにプロジェクトによっては--isolatedDeclarations オプションの有効化を検討するといいかもしれません。

---

🗓 Monthly Articles

📖 Framework, Library

• vite-plugin-ssr が Vike にリネームされた
  • 機能的な変化は特になく、名前が変更されただけのよう
• 【Next.js】管理者用ページを Route Groups で実現する
  • Next.js App Router で利用可能な Route Groups 機能について、具体的にどういったケースで役立つか？という観点を踏まえて解説している記事
• Nue JS
  • Vue.js、React、Svelte のような位置付けと謳っている新しい軽量な JavaScript ライブラリ
• The State of Vite
  • Vite Conf で Evan You 氏の発表したスライドが公開
• TypeScript performance made easy
  • TypeScript のパフォーマンス改善のためのツールが開発中
• Next.js 13 vs Remix: An In-depth case study
  • Remix v2 と Next.js の App Router で X(旧 Twitter) のようなアプリケーションを作りながら両者の違いについて見ていく記事
• Fresh 1.5: Partials, client side navigation and more
  • Deno が開発している web フレームワーク、Fresh の v1.5 がリリース
• Flat config rollout plans
  • ESlint の flat config が v9 で default になり、v10 で eslintrc 対応が終了
• Astro 3.3: Picture component
  • Astro v3.3 がリリース
• Just use vite! | remix-run/remix
  • Vite のプラグインとして Remix が動作するように

---

⚡️ Services

• Announcing Deno Queues
  • Deno で利用できる Key-Value Store である Deno KV に関して、キューイングを実現する Deno Queues が発表
• D1: open beta is here
  • Cloudflare が提供するエッジで動作する DB サービスの D1 がオープンベータとなり、誰でも利用可能に
• Hyperdrive: making databases feel like they’re global
  • DB へのコネクションを提供するサービスである Hyperdrive が発表

---

💬 Languages

• Announcing TypeScript 5.3 Beta - TypeScript
  • TypeScript 5.3 Beta がアナウンスされた

---

🖥 Browsers

• <selectlist> のプロトタイプ実装
  • OpenUI で仕様策定中の <selectlist> 要素に関するサンプル実装
• <select> に対して showPicker を実行できるように
  • showPicker API を呼び出すことで JavaScript から展開可能になり
• Chrome now shows each active tab’s memory usage!
  • Chrome でアクティブなタブのメモリ使用量が表示されるようになり、合わせて非アクティブなタブにおけるメモリセーブや devtool でメモリ利用状況のモニタリングなどを紹介

---

🦆 Others

• A Socket API that works across JavaScript runtimes — announcing a WinterCG spec and Node.js implementation of connect()
  • エッジ環境からの DB 接続などで利用可能な TCP Socket 接続を提供する connect() API に関して、Winter CG での仕様策定が進んでいる旨の紹介記事
• The Saga of the Closure Compiler, and Why TypeScript Won
  • Closure Compiler と TypeScript を比較し、なぜ TypeScript が普及したのか？などについて言及している記事
• Expert CSS: The CPU Hack
  • CSS アニメーションと CSS Variables を組み合わせた場合に、どういったタイミングで再計算が行われるのかと、それをハックして意図したタイミングで再計算させる手法
• Auto-install – Runtime | Bun Docs
  • Bun では作業ディレクトリやその上層に node_modules が見つからなかった場合、自動で install する機能を実装予定
• Speeding up the JavaScript ecosystem - The barrel file debacle
  • 数千・数万ファイルになるようなアプリケーションで module を re-export するような書き方が lint/test/bundler などのパフォーマンス悪化につながるという話
• Photoshop is now on the web!
  • 近年実装された新しい WebAPI を利用することで、ブラウザでも Photoshop の機能が実装できるという記事
• Accessible, Typesafe, Progressively Enhanced Modern Web Forms
  • Kent C Dodds 氏による ProgressiveEnhancement を意識したフォーム実装の解説記事
• CSS Findings From Photoshop Web Version
  • web 版の Photoshop で使われてる CSS の紹介記事
• Changes to the web.dev infrastructure
  • web.dev がこれまで GitHub で ホスティングしていた CMS をやめ、Google が持つ共有インフラへ移行
• Write your own Zod
  • Zod ライクな Schema Validator を作成することでその仕組みを学べる記事

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

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