社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。
社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報を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;
}
user-valid, user-invalid sample - StackBlitzBlank starter project for building ES6 apps.
# 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)
CSS Relative colors sample - StackBlitzBlank starter project for building ES6 apps.
# WasmGC
WebAssemblyのガベージコレクション機能 WasmGCがサポートされました。これによりGC機能が含まれるプログラミング言語をWasmに移植する際にGCを移植する必要がなくなります。
# Remix 2.2.0 ❤️ Vite
2023年10月31日にRemix 2.2.0がリリースされました。
Remix ❤️ ViteToday we’re announcing that unstable support for Vite is available in Remix v2.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を利用すればスナップショットの数が減り、ビルド時間の短縮につながります。
