2024-12-04のJS: Node.js v22.12.0、Vite 6.0、Tailwind CSS v4.0 Beta 1

_i18n/ja/_posts/2024/2024-12-04-node.js-v22.12.0-vite-6.0-tailwind-css-v4.0-beta-1.md

@@ -0,0 +1,219 @@
+---
+title: "2024-12-04のJS: Node.js v22.12.0、Vite 6.0、Tailwind CSS v4.0 Beta 1"
+author: "azu"
+layout: post
+date: 2024-12-03T23:34:51.334Z
+category: JSer
+tags:
+- nodejs
+- TypeScript
+- css 
+- npm
+- Vue
+
+---
+
+JSer.info #717 - Node.js v22.12.0 LTSがリリースされました。
+
+- [Node.js — Node v22.12.0 (LTS)](https://nodejs.org/en/blog/release/v22.12.0)
+
+`require(esm)`がデフォルトで有効化されています。
+これによって、CommonJSからTop Level awaitを含まないECMAScript Modulesのコードを同期的に読み込むことができるようになりました。
+
+- [Modules: CommonJS modules | Node.js v23.3.0 Documentation](https://nodejs.org/docs/latest/api/modules.html#loading-ecmascript-modules-using-require)
+
+---
+
+Vite 6.0がリリースされました。
+
+- [Vite 6.0 is out! | Vite](https://vite.dev/blog/announcing-vite6)
+
+実験的なAPIとしてEnvironment API を追加、`resolve.conditions`のデフォルト値を変更、Sassのmodern APIを使うなどの変更が行われています。オプションが一部変更されているため、マイグレーションガイドも公開されています。
+
+- [Migration from v5 | Vite](https://vite.dev/guide/migration.html)
+
+---
+
+Tailwind CSS v4.0 Beta 1がリリースされました。
+
+- [Tailwind CSS v4.0 Beta 1 - Tailwind CSS](https://tailwindcss.com/blog/tailwindcss-v4-beta)
+
+Tailwind CSS v4.0では、新しいエンジンの導入、CSS-first configurationのサポート、最近のCSSの機能への対応が含まれています。
+
+- [Tailwind CSS v4.0 Beta - Tailwind CSS](https://tailwindcss.com/docs/v4-beta)
+
+設定の変更、構文の変更、Utilityの変更なども含まれているため、マイグレーションガイドも公開されています。
+
+- <https://tailwindcss.com/docs/v4-beta#changes-from-v3>
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Release v11.0.0-pre.0 · npm/cli
+[github.com/npm/cli/releases/tag/v11.0.0-pre.0](https://github.com/npm/cli/releases/tag/v11.0.0-pre.0 "Release v11.0.0-pre.0 · npm/cli")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">ReleaseNote</span></p>
+
+npm v11.0.0-pre.0リリース。
+prereleaseの場合はtagを指定を必須に変更、`--ignore-scripts`が全てのコマンドで動作するように、`npm hook`コマンドの削除など
+
+
+----
+
+## Release v12.0.0 · vueuse/vueuse
+[github.com/vueuse/vueuse/releases/tag/v12.0.0](https://github.com/vueuse/vueuse/releases/tag/v12.0.0 "Release v12.0.0 · vueuse/vueuse")
+<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></p>
+
+vueuse v12.0.0リリース。
+vue 2のサポートを終了
+
+
+----
+
+## Firefox 133.0, See All New Features, Updates and Fixes
+[www.mozilla.org/en-US/firefox/133.0/releasenotes/](https://www.mozilla.org/en-US/firefox/133.0/releasenotes/ "Firefox 133.0, See All New Features, Updates and Fixes")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Firefox</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Firefox 133リリース。
+viewport metaタグで`interactive-widgets`の値をサポート、`Uint8Array.fromBase64`/`toBase64`をサポート。
+Permissions APIがWorkerで利用できるように、WebCodecs APIの`ImageDecoder` APIをサポート、Fetch APIの`keepalive`をサポート。
+実験的な機能として`contenteditable=plaintext-only`をサポート、CSSの`:has-slotted`をサポートなど
+
+- [Firefox 133 for developers - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/133 "Firefox 133 for developers - Mozilla | MDN")
+
+----
+
+## Release v7.0.0 · nodejs/undici
+[github.com/nodejs/undici/releases/tag/v7.0.0](https://github.com/nodejs/undici/releases/tag/v7.0.0 "Release v7.0.0 · nodejs/undici")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">Fetch</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+undici v7.0.0リリース。
+
+
+----
+
+## Release pnpm v10.0 Beta 1 · pnpm/pnpm
+[github.com/pnpm/pnpm/releases/tag/v10.0.0-beta.1](https://github.com/pnpm/pnpm/releases/tag/v10.0.0-beta.1 "Release pnpm v10.0 Beta 1 · pnpm/pnpm")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">pnpm</span> <span class="jser-tag">ReleaseNote</span></p>
+
+pnpm v10.0.0-beta.1リリース。
+`pnpm link`の挙動の変更、`packageManager`を参照してpnpmのバージョンを確認するように、storeバージョンの更新。
+`verifyDepsBeforeRun`オプションが追加され、lockと`node_modules/`の状態を比較して自動インストールなどができるようになるなど
+
+
+----
+
+## Release 6.0.0 · prisma/prisma
+[github.com/prisma/prisma/releases/tag/6.0.0](https://github.com/prisma/prisma/releases/tag/6.0.0 "Release 6.0.0 · prisma/prisma")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">prisma</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Prisma 6.0.0リリース。
+Node.js 18未満のサポート終了、PostgreSQLのm-n relationのスキーマを変更、`Buffer`を利用していた箇所を`Uint8Array`に変更など
+
+
+----
+
+## Release v2.4.0 · reduxjs/redux-toolkit
+[github.com/reduxjs/redux-toolkit/releases/tag/v2.4.0](https://github.com/reduxjs/redux-toolkit/releases/tag/v2.4.0 "Release v2.4.0 · reduxjs/redux-toolkit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">redux</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Redux Toolkit v2.4.0リリース。
+RTKクエリの改善、型の改善など
+
+
+----
+
+## Vite 6.0 is out! | Vite
+[vite.dev/blog/announcing-vite6](https://vite.dev/blog/announcing-vite6 "Vite 6.0 is out! | Vite")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">vite</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Vite 6.0リリース。
+実験的なAPIとしてEnvironment API を追加、`resolve.conditions`のデフォルト値を変更、Sassのmodern APIを使うように変更など
+
+- [Migration from v5 | Vite](https://vite.dev/guide/migration.html "Migration from v5 | Vite")
+
+----
+
+## Tailwind CSS v4.0 Beta 1 - Tailwind CSS
+[tailwindcss.com/blog/tailwindcss-v4-beta](https://tailwindcss.com/blog/tailwindcss-v4-beta "Tailwind CSS v4.0 Beta 1 - Tailwind CSS")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">ReleaseNote</span></p>
+
+Tailwind CSS v4.0 Beta 1リリース。
+CSS-first configurationの追加、`@starting-style`に対応するvariantの追加など
+
+- [Tailwind CSS v4.0 Beta - Tailwind CSS](https://tailwindcss.com/docs/v4-beta "Tailwind CSS v4.0 Beta - Tailwind CSS")
+
+----
+
+## Node.js — Node v22.12.0 (LTS)
+[nodejs.org/en/blog/release/v22.12.0](https://nodejs.org/en/blog/release/v22.12.0 "Node.js — Node v22.12.0 (LTS)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v22.12.0リリース。
+`require(esm)`をデフォルトで有効化、ルート証明書の更新など
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Node.js — Trip report: Node.js collaboration summit (2024 Dublin)
+[nodejs.org/en/blog/events/collab-summit-2024-dublin](https://nodejs.org/en/blog/events/collab-summit-2024-dublin "Node.js — Trip report: Node.js collaboration summit (2024 Dublin)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">article</span></p>
+
+Node.js collaboration summitについてのまとめ
+
+
+----
+
+## DevTools の使い方を可能な限りスクショ付きで解説してみる
+[zenn.dev/mizchi/scraps/c72e6a55deca18](https://zenn.dev/mizchi/scraps/c72e6a55deca18 "DevTools の使い方を可能な限りスクショ付きで解説してみる")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">debug</span> <span class="jser-tag">article</span></p>
+
+Chrome DevToolsの使い方
+
+
+----
+<h1 class="site-genre">スライド、動画関係</h1>
+
+----
+
+## JavaScriptのモジュール解決の相互運用性 / JSConf JP 2024 - Interoperability of Module Resolutions in JavaScript - Speaker Deck
+[speakerdeck.com/berlysia/interoperability-of-module-resolutions-in-javascript](https://speakerdeck.com/berlysia/interoperability-of-module-resolutions-in-javascript "JavaScriptのモジュール解決の相互運用性 / JSConf JP 2024 - Interoperability of Module Resolutions in JavaScript - Speaker Deck")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">ECMAScript</span> <span class="jser-tag">nodejs</span> <span class="jser-tag">module</span> <span class="jser-tag">slide</span></p>
+
+CJS/ESM/Node.js/TypeScriptのモジュール解決と相互運用性について。
+import path aliasとツールの相互運用性について
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## eslint/css: CSS language plugin for ESLint
+[github.com/eslint/css](https://github.com/eslint/css "eslint/css: CSS language plugin for ESLint")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">css </span> <span class="jser-tag">plugin</span></p>
+
+ESLintのCSSプラグイン。
+ESLintでCSSのLintを行うプラグイン
+
+
+----
+
+## litdb/litdb: Lightweight RDBMS agnostic TypeScript/JS abstraction for SQLite, PostgreSQL and MySQL
+[github.com/litdb/litdb](https://github.com/litdb/litdb "litdb/litdb: Lightweight RDBMS agnostic TypeScript/JS abstraction for SQLite, PostgreSQL and MySQL")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">database</span> <span class="jser-tag">library</span></p>
+
+型安全なSQLクエリビルダーライブラリ。
+RDBMSのテーブルスキーマをTypeScript/Decoratorで定義して、クエリを安全に書けるようにしている。
+
+
+----