Merge pull request #1269 from jser/jser-week-729

2025-03-25のJS: Node.js v20.19.0、Valibot v1、CSS Relative Colors

Author: azu

_i18n/ja/_posts/2025/2025-03-25-node.js-v20.19.0-valibot-v1-css-relative-colors.md

@@ -0,0 +1,216 @@
+---
+title: "2025-03-25のJS: Node.js v20.19.0、Valibot v1、CSS Relative Colors"
+author: "azu"
+layout: post
+date: 2025-03-24T15:53:13.161Z
+category: JSer
+tags:
+- Vue
+- nodejs
+- css
+- Tools
+- React
+
+---
+
+JSer.info #729 - Node.js v20.19.0(LTS)がリリースされました。
+
+- [Node.js — Node v20.19.0 (LTS)](https://nodejs.org/en/blog/release/v20.19.0)
+
+このリリースでは、Node.js 20.xに`require(esm)`機能がバックポートされ、ES ModulesをCommonJSから直接インポートできるようになりました。
+また、あいまいなJavaScriptファイルをCommonJSとES Modulesのどちらとして扱うかを自動的に判定する`--experimental-detect-module`フラグがデフォルトで有効化されるようになりました。
+
+---
+
+バリデーションライブラリのValibot v1.0がリリースされました。
+
+- [Valibot v1 - The 1 kB schema library | Valibot](https://valibot.dev/blog/valibot-v1-the-1-kb-schema-library/)
+
+Valibotは、ZodやArkTypeなどと同じようにスキーマを定義してバリデーションを行うライブラリです。
+ValibotはTree Shakingによって利用していないビルダー関数を削除できるような作りになっているため、bundleに含まれるファイルサイズを小さく保てるのが特徴です。
+
+---
+
+CSSの相対カラーについてのインタラクティブなガイドが公開されました。
+
+- [CSS Relative Colors](https://ishadeed.com/article/css-relative-colors/)
+
+この記事では、`color-function(from origin channel1 channel2 channel3 / alpha)`の構文、`color-mix()`などのカラー関数の使い方や実用例を豊富なインタラクティブなデモを通して解説しています。
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Node.js — Node v20.19.0 (LTS)
+[nodejs.org/en/blog/release/v20.19.0](https://nodejs.org/en/blog/release/v20.19.0 "Node.js — Node v20.19.0 (LTS)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v20.19.0リリース。
+Node.js 20.xに`require(esm)`をバックポート、`--experimental-detect-module`をデフォルトで有効に変更など
+
+
+----
+
+## Node.js — Node v23.10.0 (Current)
+[nodejs.org/en/blog/release/v23.10.0](https://nodejs.org/en/blog/release/v23.10.0 "Node.js — Node v23.10.0 (Current)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v23.10.0リリース。
+`--experimental-config-file`フラグを追加し`node.config.json`ファイルにNode.js Optionの設定をかけるように
+
+
+----
+
+## Oxc Minifier Alpha | The JavaScript Oxidation Compiler
+[oxc.rs/blog/2025-03-13-minifier-alpha](https://oxc.rs/blog/2025-03-13-minifier-alpha "Oxc Minifier Alpha | The JavaScript Oxidation Compiler")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Oxc Minifier Alphaリリース。
+OxcベースのminifierでRolldownにも組み込まれている
+
+
+----
+
+## Oxlint Beta | The JavaScript Oxidation Compiler
+[oxc.rs/blog/2025-03-15-oxlint-beta.html](https://oxc.rs/blog/2025-03-15-oxlint-beta.html "Oxlint Beta | The JavaScript Oxidation Compiler")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Oxlint Betaリリース
+`eslint-plugin-oxlint`を使ったESLintとの併用について、`.oxlintc.json`ファイルの解決方法の変更。
+`.vue`ファイルなどの`<script>`に対するLintのサポートなど
+
+
+----
+
+## Nuxt UI v3 · Nuxt Blog
+[nuxt.com/blog/nuxt-ui-v3](https://nuxt.com/blog/nuxt-ui-v3 "Nuxt UI v3 · Nuxt Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">UI</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Nuxt UI v3リリース。
+HeadlesUIからReka UIへの移行、Tailwind CSS v4へアップデート、型安全なテーマ設定など
+
+- [Reka UI - Unstyled, fully accessible UI library | Reka UI](https://reka-ui.com/ "Reka UI - Unstyled, fully accessible UI library | Reka UI")
+
+----
+
+## Release Notes for Safari Technology Preview 215 | WebKit
+[webkit.org/blog/16523/release-notes-for-safari-technology-preview-215/](https://webkit.org/blog/16523/release-notes-for-safari-technology-preview-215/ "Release Notes for Safari Technology Preview 215 | WebKit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Safari Technology Preview 215リリース。
+Scroll Driven Animation、`text-wrap-style: pretty`のサポート、Anchor Positioningのサポート。
+Trusted Typesのサポートなど
+
+
+----
+
+## Valibot v1 - The 1 kB schema library | Valibot
+[valibot.dev/blog/valibot-v1-the-1-kb-schema-library/](https://valibot.dev/blog/valibot-v1-the-1-kb-schema-library/ "Valibot v1 - The 1 kB schema library | Valibot")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+バリデーションライブラリのValibot v1.リリース。
+
+
+----
+
+## Should Corepack stay in the Node.js distribution? by github-actions\[bot\] · Pull Request #1697 · nodejs/TSC
+[github.com/nodejs/TSC/pull/1697#issuecomment-2737093616](https://github.com/nodejs/TSC/pull/1697#issuecomment-2737093616 "Should Corepack stay in the Node.js distribution? by github-actions\[bot\] · Pull Request #1697 · nodejs/TSC")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">news</span></p>
+
+corepackはNode.js 25+からは同梱されなくなる。
+Node.js 24にはexperimentalなものとして含まれるが、Node.js 24がEOLとなった後のcorepackのメンテナンスはどうなるかは不明
+
+
+----
+
+## Authorization Bypass in Next.js Middleware · CVE-2025-29927 · GitHub Advisory Database
+[github.com/advisories/GHSA-f82v-jwr5-mffw](https://github.com/advisories/GHSA-f82v-jwr5-mffw "Authorization Bypass in Next.js Middleware · CVE-2025-29927 · GitHub Advisory Database")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">security</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Next.jsのセキュリティ修正として 15.2.3 と 14.2.25がリリースされた。
+特定のHTTPヘッダをつけると、middlewareが完全にバイパスされてしまう脆弱性が修正されている
+
+- [Next.js and the corrupt middleware: the authorizing artifact - zhero\_web\_security](https://zhero-web-sec.github.io/research-and-things/nextjs-and-the-corrupt-middleware "Next.js and the corrupt middleware: the authorizing artifact - zhero\_web\_security")
+- [Release v15.2.3 · vercel/next.js](https://github.com/vercel/next.js/releases/tag/v15.2.3 "Release v15.2.3 · vercel/next.js")
+
+----
+
+## Introducing Motion for Vue - Motion Blog
+[motion.dev/blog/introducing-motion-for-vue](https://motion.dev/blog/introducing-motion-for-vue "Introducing Motion for Vue - Motion Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">animation</span></p>
+
+MotionのVueサポートがリリースされた
+
+
+----
+
+## Thank you - Open Collective
+[opencollective.com/styled-components/updates/thank-you](https://opencollective.com/styled-components/updates/thank-you "Thank you - Open Collective")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">news</span> <span class="jser-tag">React</span> <span class="jser-tag">css</span> <span class="jser-tag">library</span></p>
+
+styled-componentsはメンテナンスモードとなり、新しい機能を入れるといった機能開発は行わなくなる予定
+
+- [styled-components](https://styled-components.com/ "styled-components")
+
+----
+
+## Release v4.0.0-alpha.0 · apollographql/apollo-client
+[github.com/apollographql/apollo-client/releases/tag/v4.0.0-alpha.0](https://github.com/apollographql/apollo-client/releases/tag/v4.0.0-alpha.0 "Release v4.0.0-alpha.0 · apollographql/apollo-client")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">GraphQL</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Apollo Client v4.0.0-alpha.0リリース。
+`asyncMap`/`isApolloError`/`addTypename`オプションの削除。
+React 16のサポート終了、非推奨だったメソッドやオプションの削除、`ApolloError`の各種エラーは排他的なエラーであることを明確にするように変更。
+Observableの実装を`rxjs`に変更、パッケージのビルドターゲットの変更など
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Webフロントエンドでのリアクティビティからalien-signalsを知ろう
+[zenn.dev/comm\_vue\_nuxt/articles/about-alien-signals](https://zenn.dev/comm_vue_nuxt/articles/about-alien-signals "Webフロントエンドでのリアクティビティからalien-signalsを知ろう")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">article</span></p>
+
+ReactiveのPush/Pull型について。
+Vue 3.6で利用されているalien-signalsについて
+
+
+----
+
+## CSS Relative Colors
+[ishadeed.com/article/css-relative-colors/](https://ishadeed.com/article/css-relative-colors/ "CSS Relative Colors")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css</span> <span class="jser-tag">article</span></p>
+
+CSSの相対カラーについてのインタラクティブなガイド
+
+
+----
+
+## Functions in CSS?! | CSS-Tricks
+[css-tricks.com/functions-in-css/](https://css-tricks.com/functions-in-css/ "Functions in CSS?! | CSS-Tricks")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css</span> <span class="jser-tag">article</span></p>
+
+CSSの関数定義である`@function` について
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## inokawa/virtua: A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.
+[github.com/inokawa/virtua](https://github.com/inokawa/virtua "inokawa/virtua: A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">Vue</span> <span class="jser-tag">Solid</span> <span class="jser-tag">Svelte</span> <span class="jser-tag">library</span></p>
+
+表示してる範囲だけを描画するVirtual Listライブラリ。React/Vue/Solid/Svelteをサポートしている。
+
+
+----