Matsuri-tech Frontend Weekly 2023-10-13

社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。

社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報を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...

# CSS @scopeルールの追加

@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.

次のように利用できる。

<style>
@scope (.first-container) {
  .main-title {
    color: grey;
  }
}
@scope (.second-container) {
  .main-title {
    color: mediumturquoise;
  }
}
</style>
<div class="first-container">
  <h1 class="main-title">I'm the main title</h1>
</div>
<div class="second-container">
  <h1 class="main-title">I'm the main title, but somewhere else</h1>
</div>

@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.

# 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) ...

Rollup 4.0.0がリリース。

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

# ViteConf 2023

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

ViteConfが開催された。

State of Vite (ViteConf 2023)

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

ESBuildとRollupで差分が発生してしまう問題に対処するため、Rollup互換のバンドラRolldownをRustで再実装するとのこと。

# 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...

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.6Fixes 3 bugs (addressing 85 👍 reactions), implements support for the 'overrides' & 'resolutions' fields in package.json and a regression impacting Docker usage with Bun

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.

Bunでは、自動で依存関係をインストールする機能の実装を予定している。

# Lit 3.0

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

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を学ぼう

https://gihyo.jp/list/group/文字の視認性とコントラストに関する新基準APCAを学ぼう#rt:/article/2023/08/apca-02

WCAG3にて現行のコントラストに代わる基準として開発・検討されているAPCAについての解説記事。APCAでは、コントラストを色の明るさの知覚的な差を表すLc値で表す。そのためAPCAでは、コントラストの基準が背景色とテキスト色などだけでなくフォントサイズやウェイトを加えたテーブルで表現される。これにより、十分なコントラストがあるように見えるが視認性が足りなく見えるといったケースをケアできる。