Cybozu Frontend Monthly #36

イベント概要

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

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

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

開催日

2023年06月27日

イベントページ

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

配信URL

https://www.youtube.com/watch?v=NJFFtJgmeUQ

メンバー

---

コンテンツ

👀 Notable Articles

Introducing Deopt Explorer

• 共有者: b4h0_c4t

V8 のトレースログを用いて JavaScript コードのインラインキャッシュ最適化を促進する VSCode 拡張 Deopt Explorer の話。 インラインキャッシュとは、ランタイムがオブジェクトのプロパティ呼び出しを高速化するために用いる最適化手法の一つですが、取り扱うオブジェクトが多態であるほど性能が低下していきます。 Deopt Explorer は、V8 のトレースログからプログラム中に存在するオブジェクトの多態性を発見・可視化することができます。 Node.js や Chrome から出力したトレースログを使用して解析を実行できるため、CLI ツールや Web アプリといった、V8 が利用される幅広い環境での計測を実施できるため、今後様々な場面での活用が期待できそうです。

Introducing the popover API

• 共有者: nus3

キーボード操作やフォーカス制御などが組み込まれたポップオーバーを JavaScript を使わずに実装できる Popover API が Chrome114 で実装されました。また、Safari17 でも実装が予定されています。

また、Google I/O ではこの Popover API に関連して、特定の要素からポップオーバーの位置を指定できるCSS Anchor Positioningも紹介されていました。CSS Anchor Positioning については、詳細はCSS だけで tooltip の位置を指定できる CSS Anchor Positioning についてにまとめたので、よければ読んでみてください。

<dialog>もそうでしたが、Web アプリケーションを作る上で、よく使われるコンポーネントをブラウザが提供してくれるのは嬉しいですね。

Announcing connect() — a new API for creating TCP sockets from Cloudflare Workers

• 共有者: mugi_uno

Cloudflare Workers に TCP socket を作成するための API connect() が新たに追加されました。これは現状では Cloudflare での独自実装という形ですが、WinterCG 上の提案は存在し、Cloudflare としても標準化のための働きかけは行っていくとのことです。

これによって実現可能となる大きな点として、Cloudflare Workers から DB への接続が可能になり、同時に次の記事も公開されています。

→ Announcing database integrations: a few clicks to connect to Neon, PlanetScale and Supabase on Workers

最近だと、Vercel Postgresの発表が記憶に新しいですが、Cloudflare Workers でも D1 Database に加えて新たな選択肢が増えることになります。現状では Connection Pooling に未対応 であったり、接続先や利用可能な ORM も限定的であったりと制限は多いですが、今後が楽しみな機能かなと思います。

---

🗓 Monthly Articles

📖 Framework, Library

• The Bun Bundler
  • Bun Bundler のベータ版がリリース
• Core: Drop support for IE (all versions)
  • jQuery v5 から IE サポートがドロップ
• Announcing Vue 3.3
  • Vue 3.3 のリリースノート
• Bun v0.6.0
  • Bun v0.6.0 のリリースノート
• lizod: 1kb 未満の zod の精神的後継
  • 軽量なスキーマ検証ライブラリ
• Deno 1.34: deno compile supports npm packages
  • Deno 1.34 のリリースノート
• Parcel v2.9.0
  • Percel v2.9.0 のリリースノート
• vanjs-org/van
  • <script> での読み込みだけで利用できる超軽量でリアクティブな UI フレームワーク
• microsoft/devicescript
  • 小型 IoT デバイス向けの TypeScript コンパイラ
• RedwoodJS’ Next Epoch: All In on React Server Components
  • RedwoodJS が近い将来に React Server Components を利用した SSR 機能を実装すると発表
• Introducing Pulse: Real-Time Database Change Events Made Easy
  • Prisma Client から DB の更新情報を購読し、リアルタイムでの更新処理を可能にするための機能 Prisma Pulse が発表
• JavaScript Macros in Bun
  • Bun が bundle-time で JavaScript を実行する Macros の機能をリリース
• server component roadmap #19772 nuxt/nuxt
  • Nuxt が ServerComponent の対応を進行中
• startlight
  • Astro がドキュメントサイト作成のためのテンプレートを公開
• Astro 2.6: Middleware
  • Astro 2.6 リリース
• Open sourcing Ezno’s checker and trying out / previewing the JavaScript type checker today
  • Ezno が Oxc で使えるように
• evanw/polywasm
  • WebAssembly の Polyfill

💬 Languages

• Announcing TypeScript 5.1 RC
  • TypeScript 5.1 のアナウンス

🖥 Browsers

• An Update on the Lock Icon
  • Chrome で HTTPS 通信を示す鍵アイコンが将来的に調整アイコンへ変更
• Introducing Baseline: a unified view of stable web features
  • ブラウザ互換性の指標として Baseline という概念が発表
• Intent to Ship: CSS Motion Path
  • CSS Motion Path で circle や react()、ray() といった関数が利用可能に
• Design a superior user experience with the new Side Panel API
  • Chrome 拡張からサイドパネルを利用可能に
• Intent to Ship: @scope
  • Chrome 117 に実装予定の CSS @scope について
• News from WWDC23: WebKit Features in Safari 17 beta
  • Safari 17 beta に入る機能のまとめ
• Chrome for Testing: reliable downloads for browser
  • 自動テスト用の Chrome のバイナリがバージョンごとにダウンロードできるように

🦆 Others

• What’s new in CSS and UI: I/O 2023 Edition
  • 令和版最新 CSS のまとめ
• Deploying AVIF for more responsive websites
  • 画像やアニメーションのフォーマットとして AVIF を採用する理由について
• View Transitions
  • View Transitions API を使って MPA で画面遷移時にアニメーションを追加するサンプル
• Firefox Developer Experience
  • 新しく作られた Firefox の DX ブログ
• Opera unveils Opera One, an entirely redesigned browser
  • Opera が新しいデザインのブラウザ Opera One を発表
• New CSS color spaces and functions in all major engines
  • 主要ブラウザの全てで利用可能になった色空間へのアクセスや色操作関数についての紹介
• JSCOnf JP 2023
  • JSConf JP 2023 が 11/19 にオフラインで開催予定
• フロントエンドリアーキテクトの話
  • @yosuke_furukawa 氏による「ZOZO Tech Meetup」での発表資料です。
• State of Node.js Performance 2023
  • Node.js の v16・v18・v20 のベンチマーク比較記事
• ocker コンテナイメージを WebAssembly に変換、Web ブラウザ上での実行も可能にする「container2wasm」バージョン 0.3 が登場
  • Docker コンテナを Web ブラウザで実行可能にする container2wasm 0.3 リリース
• Modern CSS For Dynamic Component-Based Architecture
  • モダン CSS をふんだんに使って button/card/pagination/navigation を作るサンプル
• Watch Out for Layout Shifts with ‘ch’ Units
  • CSS の単位として ch を使った場合に起こりうるレイアウトシフトと修正の仕方
• WebPerf Snippets
  • パフォーマンス関連のデータを取得するスニペットのまとめ

---

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

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