Frontend Weekly 2023-11-10

2023年11月10日

Chrome 119、Remix 2.2.0、Deno 1.38、ESLint v8.53.0、Astro 3.4、Astro 3.5、Turbosnap (beta) - Chromaticについて紹介する。

Table of Contents

# Chrome 119
# user-valid, user-invalid擬似クラス
# CSS Relative colors
# WasmGC
# Remix 2.2.0 ❤️ Vite
# Deno 1.38
# ESLint v8.53.0
# Astro 3.4: Page Partials
# Astro 3.5: i18n Routing
# Turbosnap (beta) - Chromatic

Chrome 119

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

https://developer.chrome.com/blog/new-in-chrome-119/

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

https://developer.chrome.com/ja/blog/cookie-countdown-2023oct/

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

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

https://developer.mozilla.org/ja/docs/Web/CSS/:user-valid

https://developer.mozilla.org/ja/docs/Web/CSS/:user-invalid

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

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

https://stackblitz.com/edit/js-vxk1yq?file=style.css

CSS Relative colors

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

https://developer.chrome.com/blog/css-relative-color-syntax/

色空間(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)

https://stackblitz.com/edit/js-2gm9ju?file=index.html

WasmGC

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

https://developer.chrome.com/en/blog/wasmgc/

Remix 2.2.0 ❤️ Vite

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

https://remix.run/blog/remix-heart-vite

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がリリースされました。

https://deno.com/blog/v1.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でフォーマット関連のルールが全て非推奨になりました。

https://eslint.org/blog/2023/11/eslint-v8.53.0-released/

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

https://eslint.org/blog/2023/10/deprecating-formatting-rules/

Astro 3.4: Page Partials

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

https://astro.build/blog/astro-340/

ページコンポーネントを部分的な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>

https://stackblitz.com/edit/withastro-astro-snxhyg?file=src%2Fpages%2Fpartials%2Ftodos.astro

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

Astro 3.5: i18n Routing

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

https://astro.build/blog/astro-350/

実験的な機能として多言語対応を行える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を利用すればスナップショットの数が減り、ビルド時間の短縮につながります。

https://www.chromatic.com/features/turbosnap