Frontend Weekly 2023-11-10

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/

1
input:user-invalid {
2
  border-color: red;
3
}
4
input:user-valid {
5
  border-color: green;
6
}

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

1
/* トライアド配色 */
2
var(--base-color)
3
oklch(from var(--base-color) l c calc(h - 120)
4
oklch(from var(--base-color) l c calc(h + 120)
5
/* 単色パレット */
6
var(--base-color)
7
oklch(from var(--base-color) calc(l - 10) c h)
8
oklch(from var(--base-color) calc(l - 20) c h)
9
oklch(from var(--base-color) calc(l - 30) c h)
10
oklch(from var(--base-color) calc(l - 40) c h)
11
/* 類似パレット */
12
var(--base-color)
13
oklch(from var(--base-color) l c calc(h + 45))
14
oklch(from var(--base-color) l c calc(h + 90))
15
oklch(from var(--base-color) l c calc(h + 135))
16
/* 色の反転 */
17
rgb(from var(--base-color) calc(1 - r) calc(1 - g) calc(1 - b));
18
/* 補色 */
19
hsl(from var(--base-color) calc(h + 180) s l)

Remix 2.2.0 ❤️ Vite#

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

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

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

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

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

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

Deno 1.38#

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

https://deno.com/blog/v1.38

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

1
deno doc --html

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

1
deno run --unstable-hmr mod.ts

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

1
{
2
  "unstable": ["byonm"]
3
}

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

1
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 機能が追加されました。

1
<form hx-post="/partials/todos" hx-target="#todo-list" hx-swap="afterbegin">
2
  <input type="text" id="txtTodo" name="todo" />
3
</form>
4
<ul id="todo-list"></ul>
5

6
// pages/partials/todos.astro
7
---
8
export const partial = true;
9

10
const formData = await Astro.request.formData();
11
const todo = formData.get("todo")?.toString();
12
---
13
<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 が利用できるようになります。

1
import { defineConfig } from "astro/config";
2

3
export default defineConfig({
4
  experimental: {
5
    i18n: {
6
      defaultLocale: "en",
7
      locales: ["en", "es", "pt-br"],
8
    },
9
  },
10
});

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

Turbosnap (beta) - Chromatic#

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

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