Cybozu Frontend Monthly #37

イベント概要

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

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

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

開催日

2023年07月25日

イベントページ

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

配信URL

https://youtu.be/F1eTcBAh5sM?si=NKaYba9G1yO_NBVa

メンバー

---

コンテンツ

👀 Notable Articles

Panda CSS と Kuma UI

• 共有者: mugi_uno

Chakra UI から、CSS-in-JS ライブラリである Panda CSS がリリースされました。以前に公開された Chakra UI のロードマップに関する記事 The future of Chakra UIにて、“Panda” の名称で Zero runtime CSS-in-JS に取り組んでいる旨は紹介されており、それが今回正式にリリースされた形です。Zero runtime に加えて、TypeScript による TypeSafe な開発・Cascade Layers などモダンな CSS 技術を利用した構成・Atomic CSS によるパフォーマンス・Next.js App Router への対応など、昨今の CSS フレームワークが持っている特徴や機能を多く兼ね備えているようです。

また、同時期にヘッドレスな UI コンポーネントライブラリである Kuma UI もリリースされました。こちらは @poteboyさんがメンテナです。Runtime CSS-in-JS(styled-components など)と Zero-Runtime CSS-in-JS(Vanilla Extract など)の両方の恩恵を得られる Hybrid Approach を採用しているのが特徴です。

Panda CSS、Kuma UI 共に、従来の CSS-in-JS が持っている良い点を継承しつつも、同時に課題とされていた点もそれぞれのアプローチで解消しており、これからのフロントエンドでの CSS 開発の大きい選択肢として抑えておく必要があるな、という印象を持ちました。

日経電子版での自作 SSR フレームワーク基盤について

• 共有者: nakajmg

日経電子版で利用されている自作の SSR フレームワーク基盤の紹介と、日経が Next.js をどう使っているかの紹介記事です。

記事中では、なぜ日経電子版が SSR フレームワークを自作しているかの理由や、パフォーマンス面での工夫について触れています。大きなモチベーションとして、React そのものではなく JSX による型や補完が利用できるテンプレートとしての利用をあげているところが特徴的です。

リソースの配置をコントロールすることでサービス間で共通化したり、ログを利用しやすくするなど参考になる取り組みが多いです。

また、日経電子版以外では Next.js を利用しているサービスもあるとのことですが、そちらでも Link や Image といった Next.js の機能を使わないアプローチや、ビルドツールとして Next.js を利用するという事例について紹介しています。

How React 18 Improves Application Performance

• 共有者: sajikix

Vercel が 「React18 でどのようなパフォーマンス改善がなされたのか」を図とサンプルコードでわかりやすく解説してくれている記事です。

最初に「メイスレッドにおけるロングタスクとはどのくらいか？」という話から、TBT(Total Blocking Time),INP(Interaction to Next Paint)など CoreWebVitals で計測される指標との関連性を説明することでパフォーマンスに知見の少ない人でも読みやすい導入となっています。

その後、React17 以前のレンダリング方式と React18 でのレンダリング方式の違いを図とコード例を使って解説しています。特に React18 でのレンダリング方式concurrent renderingの特徴である描画の優先度づけとスレッド制御、複数バージョンの virtualDOM 生成などは他の React18 の機能を理解する上でも知っておくと良さそうです。

さらに React18 のレンダリングの説明に続いて、Transition の利用、Server Components、Suspense、DataFetch とキャッシュなど React18 で導入された新機能とそれらがパフォーマンスに与える影響などを解説しています。

全体を通して前の章で説明した知識で理解していけるよう構成されており、React18 での改善を概観するのにぴったりの記事ではないでしょうか。

---

🗓 Monthly Articles

📖 Framework, Library

• Panda CSS - Build modern websites using build time and type-safe CSS-in-JS
• Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands, limited npm support, and more
  • Deno の Web フレームワークである Fresh の 1.2 がリリース
• Tremor – The React library to build dashboards fast
  • React 製の Dashboard Library です。Chart 表示にも複数対応している
• Next.js App Router Update | Next.js
  • App Router の最新状況について共有している記事です
• Nuxt 3.6
  • Nuxt 3.6 がリリースされた。パフォーマンス改善などが主な内容のようです
• Zero-config support for Tailwind, MUI, styled-components, and Emotion
  • TailwindCSS、Material UI などの CSS フレームワーク向けの設定を自動で作成する addon-styling というライブラリが Storybook チームから公開された
• Boshen/oxc Linter Roadmap
  • oxc の linter 実装についてのロードマップ
• styled-components/styled-components v6.0.0
  • styled-components の v6 メジャーバージョンアップデート
• Announcing Svelte 4
  • Svelte 4 がリリース。Svelte をインストールした際のデータ量削減や IDE 機能の改善など、DX に関するアップデートが実施
• Prettier 3.0: Hello, ECMAScript Modules! · Prettier
  • Prettier の 3.0 がリリース。Markdown での日本語文章中でのアルファベット前後のスペース挿入がデフォルトでは入らなくなったり、JS でオブジェクトと配列の末尾カンマが all に変更されるなど
• Kuma UI
  • Zero-runtime CSS-in-JS と Runtime CSS-in-JS の Hybrid approach を掲げる UI コンポーネントライブラリ
• Deno 1.35: A fast and convenient way to build web servers
  • Deno の 1.35 がリリース。Deno.serve()の stable リリースや、npm パッケージの互換性が向上、Language Server Protocol の改善など
• Prisma 5.0.0
  • ORM である Prisma の 5.0 がリリース。JSON Protocol によるパフォーマンス向上など
  • Prisma 5: Faster by Default
• Chrome Supports SolidJS in Building a Performant Web
  • Solid.js が Aurora プロジェクト を通じて Chrome チームから 30,000 ドルの資金援助を受けた
• npm package aws-sdk has been tested and works on Deno
  • JavaScript/TypeScript ランタイム Deno で aws-sdk パッケージを動かせるようになった

💬 Languages

• Announcing TypeScript 5.2 Beta - TypeScript
  • TypeScript 5.2 beta がアナウンスされた。using 修飾子の追加などが含まれる
• Ecma International approves new standards - Ecma International
  • Ecma International 125 で採択された ES2023 の新要素 について
  • Array findFromLast() / Change Array by Copy / Hashbang Grammar / Symbols as WeakMap keys

⚡️ Services

• The Cloud is dead, long live the Cloud! Announcing Wasmer Edge
  • WebAssembly・Wasmer を利用したアプリケーションの分散デプロイ可能なプラットフォームについて
• Announcing the Deno KV Hackathon
  • Deno KV を使ったハッカソンが開催され、29 の成果物が応募された
• An Introduction to Streaming on the Web – Vercel
  • Web Stream の概要の紹介しつつ、Vercel での応用例について触れている記事
• Introducing HTTP/3 Prioritization
  • Cloudflare が HTTP/3 での Prioritization をサポート
• AWS Lambda レスポンスストリーミングの紹介
  • AWS Lambda で Streaming が利用できるように。あわせて、Next.js App Router を利用する記事も公開されている
  • Next.js 13 の SSR Streaming を AWS Lambda Response Streaming で実装する方法 | Amazon Web Services ブログ

🖥 Browsers

• Enhancements to the Topics API - Chrome Developers
  • ブラウザ利用者の関心ジャンルを得るための オリジントライアル中の API である Topics API についての改善情報の記事
• Safari 17 Beta Release Notes | Apple Developer Documentation
  • Safari 17 Beta のリリースノート。Accessibility 改善や CSS の機能追加、バグ修正など。HTML の popover 属性もサポートされる
• First Public Working Draft: CSS Anchor Positioning
  • 要素からの相対位置を指定できる Anchor Positioning が Working Draft に
• Standards Positions | WebKit
  • WebKit が 現在提案・策定された Web 仕様に対してどのポジション取っているのかを一覧で確認できるページ
• A case study on scroll-driven animations performance - Chrome Developers
  • Chrome115 で新しく登場した、スクロール駆動のアニメーションを実現するための CSS プロパティ animation-timeline と JavaScript クラス ScrollTimeline の紹介記事

🦆 Others

• TypeScript ESLint が Project Governance を公開した
• Google I/O 2023 の振り返りオフラインイベントが開催された
  • Google I/O 2023 終了後の振り返りイベントが開催された
• New W3C website deployed
  • デザイン刷新された W3C のウェブサイトが公式にデプロイされた
• State of CSS 2023
  • 毎年恒例の State of CSS 2023 のサーベイが開始された
• なぜ <div> に onClick がダメなのか？
  • div タグに onClick を付与してはいけない理由を、a11y などの観点から解説している記事
• 【CSS】border を使って、三角形作るのはやめませんか？ - Qiita
  • CSS clip-path を用いて三角形を作る方法についての解説記事
• 👋 Say Goodbye to Spread Operator: Use Default Composer - DEV Community
  • デフォルト値など設定する場合に、スプレッド構文より default composer の利用を勧めている記事
• Google Developers Japan: Web Components を使用してマップ作成時間を短縮
  • Google Map をサイト上に表示できる Web Components がプレビュー版として利用できるようになった
• node_modules の問題点とその歴史 npm, yarn と pnpm
  • npm、yarn、pnpm のパッケージマネージャーがどのように node_modules をインストールしてきたのかを時系列で振り返る記事
• CommonJS is hurting JavaScript / CommonJS is not going away | Bun Blog
  • Deno と Bun が CJS についての記事を投稿
• WebAssembly
  • web.dev の学習用コンテンツに WebAssembly 関連のページが追加された
• Breaking Up with SVG-in-JS in 2023 | Jacob Groß | kurtextrem.de
  • SVG を JSX に埋め込むことによるバンドルサイズへの影響の話。img での埋め込みや SVG スプライトについて解説
• The Cost Of JavaScript in 2023
  • JS の実行を高速化するために必要なコード分割やハイドレーションなどの幅広いテクニックを俯瞰して見ることができる概論的な資料動画
• A Deep Dive Into SVG Path Commands
  • SVG の path についてインタラクティブに学べるサイト
• Announcing typescript-eslint v6 | typescript-eslint
  • typescript-eslint v6 の変更点について紹介している記事
• Introducing the MDN Playground: Bring your code to life! | MDN Blog
  • ブラウザ上でコードを書いてプレビューできる MDN Playground の紹介

---

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

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