Cybozu Frontend Monthly #49
イベント概要
サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。
その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエキスパートチームのメンバーが共有していきます。
このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。
※フロントエンドウィークリーとは
毎週火曜の 17:00 〜 18:00
で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ
#サイボウズフロントエンドウィークリー
で実況しています。
zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend
開催日
2024年07月30日
イベントページ
https://cybozu.connpass.com/event/324896/
配信URL
https://www.youtube.com/watch?v=rU7NP6pCP7w
メンバー
コンテンツ
👀 Notable Articles
State of React 2023
- 共有者: @sajikix
毎年 React とその周辺ライブラリについて行われている統計「State of React」の 2023 年版の結果が公開されました。この調査では設問を大きく次の４セクションに分けて用意しています。
- Features : React 自体の機能について、認知度や使用感を調査している
- Libraries : React と深く関連する UI ライブラリや状態管理ライブラリなどについて、利用状況や所感を調査している
- OtherTools : Test ツールや認証、バリデーションライブラリなど関連するライブラリについて、利用状況や所感を調査している
- Usage : 使用環境や事業別など様々な角度から React の利用状況について調査している。
この中から個人的に気になったいくつかの結果について共有します。
Main APIs Pain Points
React の API で開発者が辛いと思っている部分の統計です。
- 1 位に
forwardRefが来ておりrefの扱いの難しさをユーザーが感じていることがわかります。React19 でrefは Props としてアクセスできるようになる予定なのでどこまで改善されるか期待したいところです。 - またコンポーネントを memo 化する
memoも 2 位にランクインしています。 - さらに Context API による状態の管理とこれによる過剰な re-render もユーザーを悩ませているようです。
Libraries Retention vs Usage
react の周辺ライブラリをまとめて、継続率と使用率の２軸で整理したグラフです。
- バックエンドも含むフレームワークでは Next.js ユーザーの多さと継続率の高さが目立っています。
- また Data Loading の面ではどのライブラリでも比較的高い継続率を維持しつつ、使用率で TanStackQuery が人気なことが伺えます。
- コンポーネントライブラリでは MUI が高い使用率を誇っていますが、継続率の面では Radix UI や Headless UI,ReactAria などヘッドレス UI ライブラリ の台頭が見られます。
Usage/New Features
React の新しい機能についてその利用率の統計です。
- Next.js の普及もあってか RSC や Cache の利用率の高さが印象的でした。
- また新しい Document が普及してきたのも良いニュースです。
Deno 1.45 で workspace がサポートされた
- 共有者: @nus3_
Deno v1.45 がリリースされ workspace がサポートされました。このリリースに合わせてドキュメントにも workspace のページが追加されています。
ルートの deno.json でworkspaceを指定することで Deno で monorepo 構成ができるようになります。
ドキュメントに記載された手順で monorepo 構成を試した際に VSCode でエラーが出たり、npm パッケージの import する際に、コード上でnpm: specifiers を直接使った場合と、Import Map で指定した場合で lock ファイルの内容が変わったりとリリースされたばかりで不安定な部分もあるのかなという印象でした。
ただ、調べてる最中にもLSP 対応のプルリクが作られたり、今後、改善されそうですし、何より workspace のサポートにより Deno でのパッケージ構成の幅が広がるのは嬉しいですね。
今後の Next.js のキャッシュの方針と PPR 周りについて
- 共有者: @mugi_uno
Next.js 15 RC 以降でキャッシュの方針が見直されており、fetch() によるリクエストのキャッシュや、クライアント側のキャッシュである Router Cache がデフォルトで無効となりました。
これに伴い、Vercel の Lee Robinson 氏が変更の背景事情について X でのポストで説明しています。
背景については PPR (Partial Pre Rendering) の登場が大きく関与しています。
Next.js 14 以前の PPR が存在していなかった状態では、ページ単位での動的レンダリング or 静的レンダリングの切り替えが前提であったため、デフォルトで fetch() などのキャッシュを有効とすることで、基本的には静的レンダリングとなるような設計となっていました。しかし、PPR の登場によりページ内で部分的な動的・静的の切り替えが可能となったことで、キャッシュが無効だとしても静的レンダリングの恩恵を得られるようになり、キャッシュのデフォルトポリシー自体も見直された形です。Next.js を利用している場合には大きな変化であり、アプリケーションを構築する際にも意識が必要になりそうな点となりそうです。
PPR を含めた周辺の思想については @akfm_sato さんによる次の記事も大変参考になるかと思います。
Support typescript with —experimental-strip-types
- 共有者: @b4h0_c4t
Node.js が TypeScript のコードを直接実行するための試験的なフラグ --experimental-strip-types の導入を検討しています。
--experimental-strip-types では、TypeScript の型情報を削除し、実質的には JavaScript のコードとしてプログラムを実行するための試験的機能です。
@swc/wasm-typescriptを用いて型情報を削除する試験実装がなされており、今後の正式リリースに向けてこの機能はコアに取り込まれる予定です。
あくまで TypeScript を実行するためのものであるため、この機能に関わって正式リリースで型チェックや enum などの機能が追加されることはないようです。
🗓 Monthly Articles
📖 Framework, Library
- Storybook Rsbuild is here!
- Storybook Rsbuild の登場を知らせるポストです。Rspack と Rsbuild に基づいて開発され、Webpack 版より 5 倍高速です。
- Next.js 15 RC
- Next.js 15 RC の紹介記事です。React 19 や React Compiler が利用可能になり、fetch や GET リクエストのキャッシュがデフォルトでオフになります。
- Introducing Pigment CSS: the next generation of CSS-in-JS
- MUI がゼロランタイムの CSS-in-JS ライブラリ「Pigment CSS」のアルファ版を公開しました。React Server Components と互換性を保ちつつ、実行時パフォーマンスを改善しています。
- Turborepo 2.0
- Turborepo 2.0 がリリースされました。ターミナル UI の改良やウォッチモードの追加、MIT ライセンスへの変更などが含まれています。
- 新しいバンドラー Maco
- Rust ベースのバンドラーで、非常に高速です。
- React 19 の新機能まるわかり
- 2024 年 4 月に公開された React 19 beta の新機能を解説する記事です。Actions の概念などが詳しく説明されています。
- 今話題となっている React 19 の Suspense の変更内容を詳しく見てみました
- React 19 での Suspense の変更点について解説しています。複数の非同期処理を直列実行に変更することでパフォーマンスが低下する可能性があります。
- React 19 で変わるアクセシビリティ周りの技術
- React19 で新しく加わる機能がアクセシビリティにどう影響を与えるかを考察した記事です。
- React & Codemod Announcement
- React 19 への移行を支援するツール（codemod）が公開されました。例えば、次の移行作業を自動化してくれます。
- 今後の Next.js のキャッシュの方針について
- 今後の Next.js のキャッシュの方針をまとめたポストです。Next.js 15 では、fetch リクエストはデフォルトでキャッシュされなくなりました。
- Nuxt 2 End-of-Life (EOL)
- Nuxt2 が EOL になることが発表されました。EOL 後も Nuxt2 を使うユーザのために、HeroDevs から Never-Ending Support (NES)が提供されています。
⚡️ Services
- MrBeast shipped viewstats.com with @nextjs App Router on @vercel
- YouTuber の Mr Beast が Next.js の App Router を用いた新サービスを開発しました。YouTube チャンネルの統計情報を閲覧できます。
- ウェブ プラットフォーム ダッシュボードのお知らせ
- 5/14 の Google I/O で発表されたウェブプラットフォームダッシュボードの紹介記事です。ウェブブラウザの新機能サポート状況を確認できます。
- Vercel が PPR を Node ランタイムにした件から Web フロントエンドとエッジの動向に迫る
- Lee Robinson のポストについて、その背景と本当に Node.js ランタイムの方が速くなるのかなど、議論ベースでまとめている記事です。
💬 Languages
- State of HTML 2023
- State of HTML 2023 の集計結果が公開され、新しい HTML 要素や属性、API の利用状況がまとめられています。
- State of JavaScript 2023
- State of JavaScript 2023 が公開されました。JavaScript 技術の人気度や使用状況の変化がグラフで可視化されています。
- Diving Deep into Array Index Positions
- 配列のインデックス位置についての考察記事です。配列に不正なインデックス値を入れるとオブジェクトのキーのように扱われるため、配列操作は正確に行うことが大切であると結論づけています。
- feat: Add support for TypeScript config files
- ESLint の設定ファイルを TS で書けるようにする RFC がマージされました。TS で設定ファイルを書く場合はトランスパイルが必要で、UnJS のパッケージである jiti が利用される予定です。
- RFC: Initial CSS Level Categorization
- CSS の進化に伴い、CSS3 という用語が混乱を招いているため、CSS4 や CSS5 といった新たな分類を導入しようとする提案です。
- Ship: CSS Anchor Positioning: anchor-scope
anchor-scopeプロパティを用いて、アンカー名の可視性を特定のサブツリーに限定する仕様です。複数のコンポーネントが干渉せずにアンカー位置を使用できます。
- An origin trial for a new HTML
<permission>element- Permission Prompt を permission 要素を使って制御できる機能が試験運用されています。CSS でスタイリングも可能で、今後標準化される予定です。
🖥 Browsers
- Ship: Third-party Cookie Grace Period Opt-Out
- サードパーティクッキーの廃止に伴い、サードパーティクッキーをロールアウトを制御できる仕組みを提供します。
- Chromium Blog: Advancing Our Amazing Bet on Asymmetric Cryptography
- Chrome124 より、TLS 1.3 と QUIC に対して最新の Kyber ドラフト仕様をデフォルトで有効にしたことを知らせる記事です。鍵サイズやレイテンシの増加による PKI の俊敏性への影響が課題です。
- Chrome 127 beta
- Chrome 127 の beta 版が公開されました。CSS のフォントサイズ調整（font-size-adjust）など、盛りだくさんな内容になっています。
- New to the web platform in June
- 6 月に Web ブラウザに追加された、安定版またはベータ版の機能を紹介する記事です。Firefox 127 と Chrome 126 が安定版になりました。
- 新しいブラウザエンジン Ladybird
- 元々は SerenityOS 専用だったものが、ブラウザエンジンとして切り離されました。
🦆 Others
- CVE-2024-4367 – Arbitrary JavaScript execution in PDF.js
- PDF.js から脆弱性が検出されました。悪意のある PDF ファイルを開くと任意の JavaScript コードが実行されます。Firefox ユーザーや PDF.js を使用するアプリに影響します。
- Next.js の SSRF 脆弱性 CVE-2024-34351
- Next.js の SSRF 脆弱性についての解説記事です。Next.js 14.1.0 以下のセルフホスト環境で Server Actions の相対パスの
redirectを実行すると脆弱性が発生します。
- Next.js の SSRF 脆弱性についての解説記事です。Next.js 14.1.0 以下のセルフホスト環境で Server Actions の相対パスの
- Google I/O 2024 で発表された 10 の最新情報: すべてのウェブ デベロッパーのために AI の力を活用
- Google I/O 2024 における発表内容のまとめ記事です。Chrome DevTools に AI を搭載する予定などが発表されました。
- Portable stories for Playwright Component Tests
- Cypress や Playwright を用いたコンポーネントテストで Storybook の Story をテストできる Portable Stories API という実験的機能を紹介する記事です。
- The Deno Standard Library is now available on JSR
- Deno の標準ライブラリが JSR から利用できるようになる旨を告知する記事です。
- デジタル庁デザインシステムのサンプルコンポーネント
- デジタル庁のデザインシステムのサンプルコンポーネントが公開されています。今後も定期的に追加される予定です。
- Type-safe module mocking in Storybook
- Storybook 8.1 で利用できる型安全なモジュールモックの紹介記事です。
package.jsonのimportsフィールドを用いて実現します。
- Storybook 8.1 で利用できる型安全なモジュールモックの紹介記事です。
- PPR - pre-rendering 新時代の到来と SSR/SSG 論争の終焉
- Partial Pre-Rendering(PPR)の仕組みを解説する記事です。ページを静的生成しつつ部分的に動的生成することが可能なレンダリングモデルです。
- next-cache-toolbar
- Next.js の Data Cache の中身を視覚的に見れるツールです。
- JSConf JP 2024
- JSConf JP 2024 の CFP 募集が始まりました。
- Maybe Don’t Name That Landmark
- WAI-ARIA のランドマークにアクセシブルな名前は不要であるという記事です。一意性と文脈で識別でき、不要な名前付けはリスクになる可能性があります。
- The Goldilocks zone: Achieving an accessible digital future in the AI age
- AI を活用してアクセシビリティの問題を検知する取り組みについてまとめた記事です。テストのバランスを取りながら AI を活用することが推奨されています。
- Polyfill supply chain attack hits 100K+ sites
- Polyfill.io にマルウェアが混入され、10 万以上のサイトに影響を与えました。Polyfill.io はブラウザ互換性の問題を解決するための JavaScript ライブラリで、代わりとなるフォークライブラリが Cloudflare から提供されています。
- Sustaining Digital Certificate Security - Entrust Certificate Distrust
- Entrust の証明書を使ったサービスは 11 月以降 Chrome で開けなくなります。—test-crs-constraints フラグで事前に挙動をシミュレートすることができます。
- 〖小ネタ〗React のドキュメントのロゴを右クリックするとロゴがダウンロードできるようになった
- ドキュメントの左上にあるロゴを右クリックすると、ロゴをダウンロードできるようになりました。
- Yahoo!知恵袋 フロントエンドをリアーキテクトしている話
- Yahoo!知恵袋のフロントエンドリアーキテクトの取り組みを紹介する記事です。TypeScript の導入やロジックの集中を緩和する改善が行われました。