Matsuri-tech Frontend Weekly 2023-10-13





社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# Chrome 118

جدید در کروم 118  |  Blog  |  Chrome for Developersکروم 118 اکنون در حال عرضه است! با قانون css@scope، استایل‌های خاصی را در یک جزء اعلام کنید. از ویژگی رسانه جدید استفاده کنید: ترجیح می دهد-کاهش شفافیت. DevTools در پنل Sources بهبودهایی دارد و موارد دیگر بسیار زیاد است.

Chrome 118がリリース。

  • ブラウザ拡張によって登録されたService Workerから、WebUSB APIを利用できるように変更
  • Payment Request及びSecure Payment Confirmationからuser activation requirementが削除

Proposal: Remove User Activation requirement for authentication · Issue #216 · w3c/secure-payment-confirmationPlease note that this proposal is not final inside of Google Chrome, though has been through an initial security review. We are sharing it here to gather feedback/input from the WG. Background Curr...Proposal: Remove User Activation requirement for authentication · Issue #216 · w3c/secure-payment-confirmation

# CSS @scopeルールの追加


Limit the reach of your selectors with the CSS @scope at-rule  |  CSS and UI  |  Chrome for DevelopersLearn how to use @scope to select elements only within a limited subtree of your DOM.


@scope (.first-container) {
  .main-title {
    color: grey;
@scope (.second-container) {
  .main-title {
    color: mediumturquoise;
<div class="first-container">
  <h1 class="main-title">I'm the main title</h1>
<div class="second-container">
  <h1 class="main-title">I'm the main title, but somewhere else</h1>
@scope (.component) to (.click-here, .link-here) {
    div {
      color: purple;
      text-align: center;
      font-family: sans-serif;

サンプルコード:at-scoped-playground - StackBlitzBlank starter project for building ES6 apps.at-scoped-playground - StackBlitz

# Rollup 4.0.0

Release v4.0.0 · rollup/rollup4.0.0 2023-10-05 BREAKING CHANGES General Changes The minimal required Node version is now 18.0.0 (#5142) The browser build now relies on a WASM artifact that needs to be provided as well (#5073) ...Release v4.0.0 · rollup/rollup

Rollup 4.0.0がリリース。

  • Node.js 14/16のサポート終了
  • Acornの代わりにSWCをパーサに使うように変更

# ViteConf 2023

Welcome to ViteConf - ViteConf 23Welcome to ViteConf | sarah11918 and patak-dev | ViteConf 2023Welcome to ViteConf - ViteConf 23


State of Vite (ViteConf 2023)

The State of Vite - ViteConf 23The State of Vite | Evan You | ViteConf 2023The State of Vite - ViteConf 23


# pnpm 8.9.0

Release v8.9.0 · pnpm/pnpmMinor Changes 🚀Performance improvement: Use reflinks instead of hard links by default on macOS and Windows Dev Drives #5001. The list of packages that are allowed to run installation scripts no...Release v8.9.0 · pnpm/pnpm

pnpm v8.9.0がリリース。

macOS および Windows Dev Driveで、デフォルトでハードリンクではなくreflinkを利用するようになったキャッシュからのインストール速度が改善する。

# Bun - v1.0.6

Bun v1.0.5Fixes 41 bugs + a memory leak in `fetch()`, `KeyObject` support in `crypto` module, import package-lock.json, install peer dependencies, bun pm migrate subcommand, bun install bugfixes, and `toEqualIgnoringWhitespace` matcher in `bun:test`Bun v1.0.5

Bun v1.0.6Fixes 3 bugs (addressing 85 👍 reactions), implements support for the 'overrides' & 'resolutions' fields in package.json and a regression impacting Docker usage with BunBun v1.0.6

Bun v1.0.5及びBun v1.0.6がリリース。

  • npmのoverrides及びyarrnのresolutionsの対応
  • peerDependenciesを自動でインストールするように変更

# Auto-install – Runtime | Bun Docs

Auto-install – Runtime | Bun DocsNever use node_modules again. Bun can optionally auto-install your dependencies on the fly.Auto-install – Runtime | Bun Docs


# Lit 3.0

Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more!We're launching the next major version of LitLit Launch Day: Lit 3.0, Labs graduations, a compiler and more!

Lit 3.0がリリース。

  • IE11のサポート終了
  • パッケージES2021として配布するように変更
  • 非推奨APIの削除
  • Stage 3 Decoratorのサポート
  • 新しいLitテンプレートコンパイラー@lit-labs/compilerの公開
  • Preact Signalsを統合するパッケージ@lit-labs/preact-signalsの公開
  • LitコンポーネントをラップしたReactコンポーネントを作れる@lit-labs/reactや、@lit-labs/taskはラボを卒業し@lit/reactと@lit/taskに移行。

# 文字の視認性とコントラストに関する新基準APCAを学ぼう



# Next.js 13 vs Remix: An In-depth case study

Next.js 13 vs Remix: An In-depth case studyA detailed comparison of the features Next.js 13 and Remix Run by building a Twitter Clone app in both frameworks.Next.js 13 vs Remix: An In-depth case study


# Biome と ESLint の lint ルールの互換性

Biome と ESLint の lint ルールの互換性Biome と ESLint の lint ルールの互換性

ESLintでよく利用される recommended ルールとBiomeのルールの対応表。8 割以上は Biome でも実装されている。一方、BiomeではTypeScriptの型情報を扱えないため、型情報が必要なルールはサポートしていない。