Cybozu Frontend Monthly #50

イベント概要

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

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

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

開催日

2024年09月24日

イベントページ

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

配信URL

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

メンバー

---

コンテンツ

👀 Notable Articles

WebKit Features in Safari 18.0

• 共有者: @b4h0_c4t

Safari 18.0 がリリースされました。 CSS 等の追加だけでなく、各 OS ごとに様々なブラウザ固有の機能が実装されています。

CSS

• View Transition (Limited Available / Chrome, Edge, Safari)
• Style Queries for custom properties (Newly Available)
• currentcolor and system color keywords in Relative Color Syntax (Limited Available / Safari)
• Translucent accent colors
• Backdrop Filter (Newly Available)
• Content visibility (Newly Available)

HTML

• Writing Suggestions
• Haptic feedback for <input type=checkbox switch>
• Date and time inputs accessibility support
• AriaBrailleLabel and AriaBrailleRoleDescription

JavaScript

• Regex v flag support

Web API

• URL.parse()
• shadowRootDelegatesFocus and shadowRootClonable
• PopStateEvent’s hasUAVisualTransition
• byte() for Request, Response and Blob, PushMessageData
• document.fragmentDirective

Component testing in Storybook

• 共有者: @nus3_

Storybook でのコンポーネントテストについての記事が公開されました。

この記事では次のようなことが書かれています。

• Jest + testing-library などの JSDom を使った DOM 操作のエミュレートは、実際ブラウザでの挙動と異なることある
• バックエンドのセットアップやテストの実行時間などが要因で flaky なテストが発生しやすい
• ブラウザで実際にコンポーネントをレンダリングするコンポーネントテストは上記の問題を回避しつつ、コスパ良くテストできる

実際に Storybook では、ブラウザでコンポーネントをレンダリングし、@storybook/test-runner、Chromatic、最近だとPortable storiesといった機能が提供されています。

この他にも SafeTest、WebDriverIO、Playwright、Cypress、Vitest が同様の機能を提供しており（experimental なものが多い）、ブラウザ上でコンポーネントをテストする需要の高まりを感じます。

Announcing TypedSQL: Make your raw SQL queries type-safe with Prisma ORM

• 共有者: @mugi_uno

ORM であり、最近では活用しているケースも非常に多く聞くようになった Prisma が、TypeScript で SQL クエリを型安全に扱うためのライブラリ TypedSQL をリリースしました。

一般的に ORM では、それ自体の機構では表現できなかったり、あるいはクエリが非効率になってしまうなど、さまざまな理由から生の SQL クエリを必要とするケースがありますが、従来ではこれを型安全に扱うのは難しく、Prisma も例外ではありませんでした。TypedSQL では、元々 Prisma がスキーマ情報から型情報を出力する際に実行していた prisma generate に --sql オプションを追加することで、*.sql ファイルも解析し、TypeScript から利用可能な型付けされたコードを生成することが可能となります。サポートされている RDBMS は MySQL および PostgreSQL の最新バージョンとのことです。

TypeScript として型安全になるのと同時に、パラメータなども関数を介して渡せることで、Prepared Statement での処理も保証されるのも安心できる要素になりそうです。

oxc でサポートされた isolatedDeclaration 環境下での.d.ts ファイル出力が速い話

• 共有者: @sajikix

TypeScript の 5.5 から入った isolatedDeclaration オプションでは export される関数やオブジェクトに対して、その型や返り値の型を明示的に指定するという制限を設けます。代わりに isolatedDeclaration オプション有効時は export される型が推論なしに決定できるので高速に .d.ts ファイルを生成することができるようになるわけです。

このオプションがリリーされて以降、tsc 以外の bundler などでも .d.ts ファイルを生成する機能が追加されてきました。今回の例でその中の一つである oxc を利用して vue の core の.d.ts ファイル生成速度を大幅に向上させたそうです。

Evan You 氏の x への post によれば tsc で 4.73s かかっていた .d.ts ファイル生成が 0.127s まで短縮されたとしています。速度にしておよそ 30 倍以上の高速化になります。

現在この実装は試験的な branch で行われており、実際に oxc-transform を利用して.d.ts ファイル出力を行う新しい script などを見ることができます。

https://github.com/vuejs/core/commit/5f91183c4245db58f9817bbcc4767d545e6caae8

🗓 Monthly Articles

📖 Framework, Library

• Vitest 2.0 リリース: Browser Mode support など
  • Vitest 2.0 がリリースされました。ブラウザモードのサポートなどが含まれます。
• What’s coming next for ESLint
  • ESLint の進化と、Flat Config などの変更点についてまとめられたブログ記事です。
• Version Support - ESLint
  • ESLint v8 のサポート終了と v9 への移行に関する情報です。
• Astro 4.12
• Astro 4.15
  • Astro 4.12 がリリースされました。Experimental 機能として Server Islands が導入され、バックエンド側での動的描画が可能になりました。
  • Astro 4.15 がリリースされました。型安全な Astro Actions が導入されました。
• react-big-calendar のコアが TanStack/time になる可能性
  • react-big-calendar のコアに TanStack/time を利用する可能性が示されています。
• Turbopack updates: Moving homes – Vercel
  • Turbopack の最新情報について紹介されています。Next.js のテストケースを 100%パスしていることや、上位 300 の npm パッケージをビルド可能であることなどに言及しています。
• Announcing Rspack 1.0
  • JavaScript バンドラ Rspack の v1 リリースが発表されました。
• Node.js Takes Steps Towards Removing Corepack
  • Corepack を Node.js の配布から削除する計画が発表されました。
• Next.js Conf is here. Join us in SF or online Oct 24.
  • 10 月 24 日に開催される Next.js Conf の告知です。
• Node v22.5.0
• Node v22.6.0
  • Node.js v22.5.0 がリリースされました。sqlite module の追加などを含みます。
  • Node.js v22.6.0 がリリースされました。Experimental TypeScript Support などを含みます。
• Material UI v6 is out now
  • React UI ライブラリ Material UI が v6 をリリースしました。テーマ変数やカラーサポートが追加されました。
• Deno 1.45: Workspace と Monorepo のサポート
  • Deno 1.45 がリリースされました。Workspace や Monorepo がサポートされました。
• Announcing TypeScript 5.6 RC
  • TypeScript 5.6 RC のアナウンスです。条件文の厳密なチェック機能などが紹介されています。
• Component testing in Storybook
  • Storybook を使ったコンポーネントテストの方法が紹介されています。
• feat(next): next.config.ts by devjiwonchoi · Pull Request #63051 · vercel/next.js
  • Next.js の設定ファイルを TypeScript で書けるようになりました。
• Storybook 8.2
  • Storybook 8.2 がリリースされました。テスト用の新 hooks の追加などが含まれます。
• Configuring: Progressive Web Applications (PWA) | Next.js
  • Next.js で PWA を構成するための設定方法を詳述しています。
• SolidHack 2024
  • SolidJS のオンラインハッカソン、SolidHack 2024 が開催されます。
• What’s new in React 19 – Vercel
  • React 19 の新機能と API 変更について詳細に解説しています。
• MySQL データベースエンジンで JS をサポート
  • MySQL のストアドプロシージャを JavaScript で記述できるようになる GraalJS の導入が紹介されています。

⚡️ Services

• Fastly が開発者向けの無料プランを提供開始
  • Fastly がエッジランタイムや KV ストアを含む無料プランを開始しました。
• Using pnpm on Heroku
  • Heroku が pnpm をサポートし、デプロイ時のパッケージインストールが高速化されました。
• Page Speed Benchmarks | SpeedCurve
  • SpeedCurve による Web サイトパフォーマンスのベンチマークダッシュボードです。
• A new path for Privacy Sandbox on the web
  • Google は 3rd Party Cookie 廃止の方針を転換し、ユーザーがプライバシー設定を管理できる機能を導入することを発表しました。
• Let’s Encrypt が OCSP サポート終了
  • Let’s Encrypt が OCSP のサポートを終了し、CRLs に移行します。

💬 Languages

• JSC: RegExp quantifier should allow 2^53 - 1
  • WebKit の JavaScriptCore で正規表現の量指定子が大きな数値をサポートするように変更されました。
• Temporal を取り巻く仕様を整理する
  • ECMAScript Stage 3 の Temporal についての発表資料です。仕様の整理や、タイムゾーン・カレンダーのサポートについて解説しています。
• Linear Matching of JavaScript Regular Expressions | Proceedings of the ACM on Programming Languages
  • 計算量爆発を防ぐ新しい正規表現アルゴリズムを紹介する論文です。
• HTML Tags Memory Test
  • HTML タグをどれだけ覚えているかをテストするサイトです。
• Paragraphs | scottohara.me
  • HTML における「段落」の概念と、その適切な使用方法について解説しています。
• Chrome 129 Beta で追加された CSS プロパティ interpolate-size と calc-size()とは？
  • CSS の新しいアニメーションプロパティについて解説しています。

🖥 Browsers

• Interop2024 中間アップデート
  • Interop2024 の進捗が報告され、スコアが 10 ポイント向上しました。
• Private Browsing 2.0 | WebKit
  • WebKit のプライベートブラウジング機能の進化について、Link Tracking Protection や Fingerprinting Protection に焦点を当てています。
• Google Online Security Blog: Improving the security of Chrome cookies on Windows
  • Windows での Chrome Cookie セキュリティを向上する新しい保護レイヤーの紹介です。
• Rust 製ブラウザエンジン「Servo」搭載、新たな Web ブラウザ「Verso」の開発プロジェクトが立ち上がる
  • Rust 製ブラウザ「Servo」の開発プロジェクトが立ち上がりました。
• MS が WebView2 の Mac・Linux 版の公開中止を発表
  • Microsoft が WebView2 の Mac 版と Linux 版の開発を中止しました。
• Line-breakable <ruby> and CSS ruby-align property
  • Chrome が改行可能な <ruby> サポートを導入しました。
• New to the web platform in July
  • 2024 年 7 月の Web プラットフォームの新機能がまとめられています。
• Google Chrome 16 周年
  • Google Chrome が 16 周年を迎えました。
• 共有辞書で圧縮効率を向上 | Blog | Chrome for Developers
  • Chrome でリソースの圧縮効率を高めるための技術的な取り組みを紹介しています。
• Prototype: Blocking third-party cookies
  • Firefox が third-party cookies のブロックに関する新しい挙動を紹介しています。
• DevTools の新機能（Chrome 129） | Blog | Chrome for Developers
  • Chrome 129 の DevTools における新機能について説明しています。

🦆 Others

• トロイの木馬化した改ざん版 jQuery の脅威
  • npm と GitHub でトロイの木馬化された jQuery の攻撃が発生していると報告されています。
• ライブリージョンの正しい設定方法について
  • ライブリージョンの正しい設定方法と、スクリーンリーダーへの影響が説明されています。
• フィヨルドブートキャンプがフロントエンジニアコースをオープン
  • プログラミングスクールであるフィヨルドブートキャンプが新しくフロントエンドエンジニア向けのコースを開設しました。
• Google I/O 2024 注目のフロントエンド技術
  • Google I/O 2024 での最新のフロントエンド技術に関する発表をまとめています。
• プログレッシブ・エンハンスメントとは何なのか
  • プログレッシブ・エンハンスメントの概念とその重要性について説明されています。
• React Spectrum のリリース
  • Adobe が提供するデザインシステム React Spectrum の 2024/7 のリリース内容です。
• How to make your web page faster before it even loads
  • ページが読み込まれる前にパフォーマンスを改善する方法を紹介しています。
• Failed to import package that contained deno workspace · Issue #1131 · denoland/vscode_deno
  • Deno ワークスペースを含むパッケージのインポートに失敗する問題が報告されています。
• Keyboard-Only Scrolling Areas
  • キーボード専用スクロールエリアのアクセシビリティについて解説されています。
• Understanding the ‘Why’ behind some basic UI design practices
  • 基本的な UI デザインの背後にある理由を探る記事です。
• Server-first Web Components with DSD, HTMX, and Islands | Codrops
  • DSD と HTMX を活用した SSR による Web Components の実装方法を紹介しています。
• Open UI Component Certified Checklist
  • OpenUI が Component やデザインシステムを作る上でのチェックリストを作成しています。
• React / Remix への依存を最小にするフロントエンド設計 - 一休.com Developers Blog
  • 一休レストランにおけるライブラリ依存を最小限にしたフロントエンド設計事例について紹介した記事です。

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

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