🏄
Matsuri-tech Frontend Weekly 2023-10-13

hrdtbs

hrdtbs

2023年10月13日
MFWChromeBunViteAPCA

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

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

# Chrome 118

Chrome 118がリリース。

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

# CSS @scopeルールの追加

 @scopeルールを使用すると、スタイルの範囲を特定のスコープに制限することが出来る。

次のように利用できる。

<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;
    }
  }

サンプルコード：

# Rollup 4.0.0

Rollup 4.0.0がリリース。

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

# ViteConf 2023

https://viteconf.org/23/replay/welcome

ViteConfが開催された。

State of Vite (ViteConf 2023)

https://viteconf.org/23/replay/vite_keynote

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

# pnpm 8.9.0

pnpm v8.9.0がリリース。

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

# Bun - v1.0.6

https://bun.sh/blog/bun-v1.0.5

https://bun.sh/blog/bun-v1.0.6

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

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

# Auto-install – Runtime | Bun Docs

https://bun.sh/docs/runtime/autoimport

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

# Lit 3.0

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では、コントラストの基準が背景色とテキスト色などだけでなくフォントサイズやウェイトを加えたテーブルで表現される。これにより、十分なコントラストがあるように見えるが視認性が足りなく見えるといったケースをケアできる。

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

Next.jsとRemixで同じアプリを作りながら比較する記事。レイアウト、データ取得、ストリーミング、データ変更、キャッシュなどについて比較している。

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

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