Cybozu Frontend Monthly #32

イベント概要

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

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

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

開催日

2023年02月28日

イベントページ

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

メンバー

---

コンテンツ

👀 Notable Articles

Firefox 110 で Container Queries がサポートされ、すべての主要ブラウザで使えるように

• 共有者: nakajmg

Firefox 110 で Container Queries がサポートされました。これですべての主要ブラウザで Container Queries が使えるようになりました。

• CSS Container Queries | MDN

@container によって親要素のサイズに応じたスタイルを定義できる、というところだけが紹介されることが多いですが、周辺の仕様についても認識しておくと、より便利に使えそうです。

たとえば container-name を使うと container となる要素に対して名前をつけることができ、 @container name とすることで、どのコンテナをもとにスタイルを適用するかをコントロールできます。

また、cqw や cqh といった Container query length units を使うことで、container となっている要素の width や height などをもとにスタイルの指定ができます。

MDN のページがよくまとまっていて参考になるので、一読してみてください。

---

Interop 2023: continuing to improve the web for developers

• 共有者: mugi_uno

主要なブラウザベンダーや関係企業で、ブラウザの相互運用性を向上するために取り組んでいる Interop が今年も実施され、Interop 2023として公開されました。

Interop では特にフォーカスして取り組む機能がピックアップされており、2022 年に実施された Interop 2022 では Cascade Layers や Dialog Element、Subgrid などが対象でした。

Interop 2023 では、新たに Container Queries、Custom Properties、Media Queries 4、Flexbox、Grid、:has()、Web Components などが選ばれています。

各ブラウザの対応状況は Dashboard で確認できます。

• web-platform-tests dashboard (2023)

設計・実装に大きなインパクトを与える機能も多く、サポートがどの程度進んでいくか要チェックです。

---

The Future (and the Past) of the Web is Server Side Rendering

• 共有者: nus3_

Deno から Web の過去と未来は Server Side Rendering です、というタイトルの記事が公開されました。

これまでの Web アプリケーションは SSR→CSR の流れで開発されてきましたが、現在のように様々なデバイスや帯域幅でアクセスされることを考えると、その様々な状況の中で一貫したユーザー体験を提供するには SSR なのではないかといった内容が紹介されています。

Next.js、Nuxt、Qwik City、Remix、SvelteKit、Solid Start などのフレームワーク、また SSR に対応する Edge など、今後、Web アプリケーションの選択肢として SSR が採用される流れができそうで楽しみですね。

---

🗓 Monthly Articles

📖 Framework, Library

• Typewind
  • Tailwind CSS のユーティリティクラスを type-safe に扱えるライブラリ
• Unlock New Possibilities with Hybrid Rendering
  • Astro v2 で新しく追加された Hybrid Rendering について
  • 画面ごとに SSG か SSR かを選択できるように
• If you use React, you should be using a React framework
  • React のコアチームから Vercel にジョインした Andrew Clark 氏が React を利用する場合はフレームワークを採用した方が良いとツイート
• Next.js に追加予定の機能が紹介された
  • <Link> を利用する際に Next.js のファイルルーティングに合わせた型が利用できるように
  • SEO で利用する様な metadata を app ディレクトリの layout でオブジェクトとして定義できるように
• Turbopack is adding support for webpack loaders
  • Turbopack で webpack loader がサポート予定
  • Turbopack と webpack loader のやりとりは IPC ベース
• Component Story Format 3 is here
  • Storybook の Component Story Format 3(CSF) が完全にリリース
  • useEvent が内部でバージョンアップされたり、Story のタイトルがディレクトリ構造に合わせて自動で生成されるように
• Resumable React: How To Use React Inside Qwik
  • Qwik アプリケーションの中で、React コンポーネントをクライアント側のランタイムなしに 読み込む方法を紹介
• PSOne.css
  • Playstation1 のようなスタイリングができる CSS フレームワーク
• Vue Fes Japan 2023 を一緒に作り上げるコアスタッフを募集します！
  • Vue.js の国内カンファレンスである Vue Fes Japan 2023 がオフラインで開催予定
  • また、コアスタッフの募集も
• A Business Case for SvelteKit
  • Meteor.js を使ったフルスタックなアプリケーションを SvelteKit に移行した事例
• React.js: The Documentary
  • React.js 公式による、React.js のドキュメンタリームービーが公開
  • 誕生の経緯や辿ってきた歴史などを、メンテナなど内部のメンバーの心情を交えつつ紹介されている
• shadcn/ui
  • ヘッドレスな UI コンポーネントライブラリである Radix と TailwindCSS を組み合わせたコンポーネント集
• stc : Roadmap to the alpha
  • Rust で開発中の TypeScript タイプチェッカーである stc のロードマップが公開
• core-js : So, what’s next?
  • 大企業を含め非常に多くのサービスで利用されている core-js のメンテナである zloirock 氏の考えを記したページ
• Improved type safety in Storybook 7
  • Storybook v7 では、新しい記法である CSF 3.0 と TypeScript 4.9 で追加された satisfies オペレータを組合わせて、型安全性が向上
• Updates • Hydrogen: Shopify’s headless commerce framework
  • Remix + Hydrogen(Shopify のコンポーネントライブラリ)のアップデート内容

---

💬 Languages

• tc39 のミーティングが開催され、プロポーザルの stage が変更
  • Change Array by Copy、Intl.NumberFormat V3、Symbols as WeakMap keys などのプロポーザルが stage4 に
• Design Patterns in TypeScript
  • TypeScript でのデザインパターンのサンプル集
  • Factory、Builder、Singleton など、それぞれのパターンの概要がイラストつきで説明

---

🖥 Browsers

• What’s new in Lighthouse 10
  • Web サイトのパフォーマンス計測ツールである Lighthouse の新しいバージョンである Lighthouse 10 の紹介
  • 大きい変更点として、スコアの基準から TTI(Time To Interactive)が外され、代わりに CLS(Cumulative Layout Shift)のウェイトが大きくなるように
• WebContainer API is here
  • Web Container という、ブラウザで Node.js を動かせる API を StackBlitz が公開
• Firefox 110.0, See All New Features, Updates and Fixes
  • Firefox が Container Queries を実装したことで、主要ブラウザ全てで Container Queries が利用できるように
• Web Push for Web Apps on iOS and iPadOS
  • iOS/iPadOS 16.4 以降で、PWA で push 通知ができるように

---

🦆 Others

• Netlify Acquires Gatsby Inc. to Accelerate Adoption of Composable Web Architectures
  • Netfily が Gatsby を買収
• Learn Images
  • web.dev の Learn シリーズに画像のコースが新しく追加
  • 画像フォーマットの特徴(GIF, PNG, JPEG など)や画像のパフォーマンス、 を利用したレスポンシブな画像の実装方法などが紹介
• Vercel Meetup #0 with CEO
  • Vercel CEO の Guillermo Rauch 氏が来日・参加する Vercel User Community によるオフライン meetup が開催
• ヤフーショッピングのフロントエンドを支える共通配信技術
  • ヤフーショッピングにおける、共通 UI 配信システム「Ptah」が誕生するまでの経緯や、具体的な実装、取組などを紹介
• Bringing Javascript to WebAssembly for Shopify Functions
  • Rust を用いて Shopify のバックエンドロジックをカスタマイズするための Shopify Functions が、新たに JavaScript をサポート
• The Future (and the Past) of the Web is Server Side Rendering
  • 今後、Web アプリケーションは Client Side Rendering(CSR)から Server Side Rendering(SSR)が主流になるのでは、という内容の記事が Deno から公開された

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

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