🏄

Matsuri-tech Frontend Weekly 2023-11-10

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

# Chrome 119

2023年10月31日にChrome 119がリリースされました。

Chrome 119では、Chrome 114から新規または更新したCookieに適用されていた有効期限の400日制限が、全てのCookieに対して遡って適用されるようになりました。Chromeは、2023年第1四半期から第3四半期にかけて全てのユーザーに対してサードパーティ Cookie を無効化していく予定です。

# user-valid, user-invalid擬似クラス

ユーザー操作後に値の検証結果に応じて有効及び無効と判断されたフォーム関連要素にマッチする擬似クラス :user-valid と:user-invalidがChromeでサポートされました。これによりメジャーな環境の全てで:user-valid と:user-invalidが利用できるようになりました。

:valid や:invalidと異なりユーザーの操作後にのみマッチするため、例えばrequired属性を持っている要素では初期値がない場合、最初から:invalidが効いてしまいますが、:user-invalidではユーザーが操作するまで適用されません。

input:user-invalid {
	border-color: red;
}
input:user-valid {
	border-color: green;
}

# CSS Relative colors

CSS Relative colors syntaxを利用すれば、特定の色から別の色を導出することが出来ます。Chrome以外では、SafariとEdgeで利用できます。

色空間(from 色 ...指定された色空間における色のパラメータ [/ 透過度])
rgb(from green r g b)
hsl(from green h s l)
hsl(from green h s l / alpha)

この機能を利用すれば、例えば特定の色からパケットを生成したり、コントラストが十分に保たれた文字色をCSSのみで生成することが出来ます。

/* トライアド配色 */
var(--base-color)
oklch(from var(--base-color) l c calc(h - 120)
oklch(from var(--base-color) l c calc(h + 120)
/* 単色パレット */
var(--base-color)
oklch(from var(--base-color) calc(l - 10) c h)
oklch(from var(--base-color) calc(l - 20) c h)
oklch(from var(--base-color) calc(l - 30) c h)
oklch(from var(--base-color) calc(l - 40) c h)
/* 類似パレット */
var(--base-color)
oklch(from var(--base-color) l c calc(h + 45))
oklch(from var(--base-color) l c calc(h + 90))
oklch(from var(--base-color) l c calc(h + 135))
/* 色の反転 */
rgb(from var(--base-color) calc(1 - r) calc(1 - g) calc(1 - b));
/* 補色 */
hsl(from var(--base-color) calc(h + 180) s l)

# WasmGC

WebAssemblyのガベージコレクション機能 WasmGCがサポートされました。これによりGC機能が含まれるプログラミング言語をWasmに移植する際にGCを移植する必要がなくなります。

# Remix 2.2.0 ❤️ Vite

2023年10月31日にRemix 2.2.0がリリースされました。

Remixはコンパイラではなく、Viteプラグインとして使えるようになりました。

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [remix()],
});

これによりRemixはViteのエコシステムを利用できるようになりました。

# Deno 1.38

2023年11月2日にDeno 1.38がリリースされました。

ドキュメントを静的なHTMLとして生成できるようになりました。

deno doc --html

HMRのサポートが入りました。このバージョンから細かなunstable flagが導入されています。今後、全ての不安定な機能を有効にする--unstable は非推奨になります。

deno run --unstable-hmr mod.ts

NpmやYarnによってnode_modulesにインストールされたパッケージを利用できるようになりました。

// deno.json
{
  "unstable": ["byonm"]
}

Dotenvファイルの読み込みがサポートされました。

deno run --env

他、EventSource APIのサポートなどが含まれています。

# ESLint v8.53.0

2023年11月3日にリリースされたESLint v8.53.0でフォーマット関連のルールが全て非推奨になりました。

廃止されるルールや、廃止するモチベーションについては次の記事に書かれています。代替手段としてPrettierの使用やESLint Stylisticが紹介されています。

# Astro 3.4: Page Partials

2023年10月26日にAstro 3.4がリリースされました。

ページコンポーネントを部分的なHTMLとして利用できるPage Partials機能が追加されました。

// pages/index.astro
<form hx-post="/partials/todos" hx-target="#todo-list" hx-swap="afterbegin">
	<input type="text" id="txtTodo" name="todo" />
</form>
<ul id="todo-list"></ul>

// pages/partials/todos.astro
---
export const partial = true;

const formData = await Astro.request.formData();
const todo = formData.get("todo")?.toString();
---
<li>{todo}</li>

他、Imageコンポーネントのパフォーマンス改善、パフォーマンスやアクセシビリティに関する情報を表示してくれるDev Overlay機能が実験的に追加されました。

# Astro 3.5: i18n Routing

2023年11月8日にAstro 3.5がリリースされました。

実験的な機能として多言語対応を行えるi18n Routing APIが追加されました。この機能を有効化するとAstro.preferredLocaleとAstro.preferredLocaleList が利用できるようになります。

// astro.config.mjs
import {defineConfig} from "astro/config";

export default defineConfig({
  experimental: {
    i18n: {
      defaultLocale: "en",
      locales: ["en", "es", "pt-br"]
    }
  }
})

他、プリフェッチのオプトイン機能化や、Qwikのサポートなどが入っています。

# Turbosnap (beta) - Chromatic

Storybookを利用したVRTを実行できるサービス Chromaticから、変更があったコンポーネントだけをテストできる機能 TurboSnapがベータリリースされました。TurboSnapを利用すればスナップショットの数が減り、ビルド時間の短縮につながります。