-
-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
2024-11-07のJS: Node v22.11.0 (LTS)、Nuxt 3.14、vlt Package Manager、 (#1238
) * Update 714 draft * Update 714 draft * Update 714 draft * Update 714 draft * Update 714 draft * Update 714 draft * Update 714 draft * Update 714 draft * Update 714 draft * Update 714 draft * Update 714 draft * Update 714 draft * Update 714 draft * Update _i18n/ja/_posts/2024/2024-11-07-node-v22.11.0-lts-nuxt-3.14-vlt-package-manager-.md * Delete _i18n/ja/_posts/2024/2024-11-07-714draft.md * Update _i18n/ja/_posts/2024/2024-11-07-node-v22.11.0-lts-nuxt-3.14-vlt-package-manager-.md * Update _i18n/ja/_posts/2024/2024-11-07-node-v22.11.0-lts-nuxt-3.14-vlt-package-manager-.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
7bc8392
commit 15ba296
Showing
1 changed file
with
196 additions
and
0 deletions.
There are no files selected for viewing
196 changes: 196 additions & 0 deletions
196
...n/ja/_posts/2024/2024-11-07-node-v22.11.0-lts-nuxt-3.14-vlt-package-manager-.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,196 @@ | ||
| --- | ||
| title: "2024-11-07のJS: Node v22.11.0 (LTS)、Nuxt 3.14、vlt Package Manager、" | ||
| author: "azu" | ||
| layout: post | ||
| date: 2024-11-07T01:43:14.610Z | ||
| category: JSer | ||
| tags: | ||
| - css | ||
| - nodejs | ||
| - Extension | ||
| - npm | ||
| - security | ||
|
|
||
| --- | ||
|
|
||
| JSer.info #714 - Node.js v22.11.0がリリースされました。 | ||
|
|
||
| - [Node.js — Node v22.11.0 (LTS)](https://nodejs.org/en/blog/release/v22.11.0) | ||
|
|
||
| Node.js v22.11.0は、Node.js v22.xのLTS(Long Term Support)リリースとなります。 | ||
| Node.js v22.xは、2027-04-30までのサポートが予定されています。 | ||
|
|
||
| - [nodejs/Release: Node.js Release Working Group](https://github.com/nodejs/release#release-schedule) | ||
|
|
||
| ---- | ||
|
|
||
| Nuxt.js v3.14がリリースされました。 | ||
|
|
||
| - [Nuxt 3.14 · Nuxt Blog](https://nuxt.com/blog/v3-14) | ||
|
|
||
|
|
||
| クライアントとサーバで共有するコードを置く`shared/`フォルダの追加、`rspack`の対応。 | ||
| `useResponseHeader`と`useRuntimeHook`の追加などが行われています。 | ||
| また、v4での変更をopt-inできる`compatibilityVersion: 4`の追加も行われています。 | ||
|
|
||
| ---- | ||
|
|
||
| npm互換のパッケージマネージャーである`vlt`と、npm registry互換のサーバレスレジストリである`vsr`がリリースされました。 | ||
|
|
||
| - [Introducing the vlt Package Manager & Serverless Registry](https://blog.vlt.sh/blog/introducing-vlt-and-vsr) | ||
|
|
||
| `vlt`は、`npm`コマンドと同じようにパッケージのインストールやscriptの実行ができるパッケージマネージャーです。 | ||
| 特徴的なものとして[vlt query](https://docs.vlt.sh/cli/commands/query/)のようなクエリ検索とその結果をMermaidやGUIで表示できる機能があります。(クエリ自体は[npm-query](https://docs.npmjs.com/cli/v10/commands/npm-query)も似たような仕組みがあります) | ||
| また、[vlt gui](https://docs.vlt.sh/cli/commands/gui)コマンドでGUIで、プロジェクトの依存関係を確認できる機能もあります。 | ||
|
|
||
| `vsr`は、npm registry互換のサーバレスレジストリです。 | ||
| こちらは[Fair Source](https://fair.io/)としてFunctional Source Licenseで公開されており、セルフホスティングができるようになっています。ホスティングとしてはCloudflare Workersで利用できるものが提供されています。 | ||
| また、npmやGitHubのように、権限が細かい Granular Access Tokens を発行できる仕組みを持っています。 | ||
|
|
||
| 次のページに、`vsr`/`verdaccio`/`jsr`の比較が記載されています。 | ||
|
|
||
| - <https://github.com/vltpkg/vsr#comparisons> | ||
|
|
||
| vltのロードマップは公開されていませんが、vltはnpm, incのfounderであるIsaacや元々npmを開発していた人たちが開発しています。 | ||
| vltを作成し始めたモチベーションの一つに、npm registryの問題があるため、vsrのホスティングサービスなどを開発に力を入れているようです。 | ||
|
|
||
| - [The massive bug at the heart of the npm ecosystem](https://blog.vlt.sh/blog/the-massive-hole-in-the-npm-ecosystem) | ||
|
|
||
| ---- | ||
|
|
||
| {% include inline-support.html %} | ||
|
|
||
| ---- | ||
|
|
||
| <h1 class="site-genre">ヘッドライン</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Node.js — Node v22.11.0 (LTS) | ||
| [nodejs.org/en/blog/release/v22.11.0](https://nodejs.org/en/blog/release/v22.11.0 "Node.js — Node v22.11.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.11.0リリース。 | ||
| Node.js 22.xがLTSとなり、2027年4月までメンテナンスされる。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Nuxt 3.14 · Nuxt Blog | ||
| [nuxt.com/blog/v3-14](https://nuxt.com/blog/v3-14 "Nuxt 3.14 · Nuxt Blog") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Nuxt</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Nuxt v3.14リリース。 | ||
| `jiti`のアップデート、クライアントとサーバで共有するコードを置く`shared/`フォルダの追加、`rspack`の対応。 | ||
| `useResponseHeader`と`useRuntimeHook`の追加。 | ||
| v4での変更をopt-inできる`compatibilityVersion: 4`の追加など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release v5.0.0 · immutable-js/immutable-js | ||
| [github.com/immutable-js/immutable-js/releases/tag/v5.0.0](https://github.com/immutable-js/immutable-js/releases/tag/v5.0.0 "Release v5.0.0 · immutable-js/immutable-js") | ||
| <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> | ||
|
|
||
| imutable-js v5.0.0リリース。 | ||
| 非推奨のメソッドを削除、default exportを削除、TypeScriptの型定義を改善など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## mylesmmurphy/prettify-ts: Prettify TypeScript: Better Type Previews | ||
| [github.com/mylesmmurphy/prettify-ts](https://github.com/mylesmmurphy/prettify-ts "mylesmmurphy/prettify-ts: Prettify TypeScript: Better Type Previews") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">VSCode</span> <span class="jser-tag">Extension</span></p> | ||
|
|
||
| TypeScriptの型情報を読みやすい形に展開して表示してくれるVSCode拡張 | ||
|
|
||
| - [TypeScriptの型を展開してホバー表示してくれるVSCode拡張「Prettify TypeScript」が便利](https://zenn.dev/atamaplus/articles/0ecd883bcc9edd "TypeScriptの型を展開してホバー表示してくれるVSCode拡張「Prettify TypeScript」が便利") | ||
|
|
||
| ---- | ||
|
|
||
| ## happy-dom allows for server side code to be executed by a <script> tag · CVE-2024-51757 · GitHub Advisory Database | ||
| [github.com/advisories/GHSA-96g7-g7g9-jxw8](https://github.com/advisories/GHSA-96g7-g7g9-jxw8 "happy-dom allows for server side code to be executed by a <script> tag · CVE-2024-51757 · GitHub Advisory Database") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">DOM</span> <span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">security</span></p> | ||
|
|
||
| happy-domのSSRFのセキュリティ修正。 | ||
| `<script>`の`src`属性に書かれているコードを実行してしまう問題の修正。 | ||
| happy-dom v15.10.2で修正されている。 | ||
|
|
||
| - [Release v15.10.2 · capricorn86/happy-dom](https://github.com/capricorn86/happy-dom/releases/tag/v15.10.2 "Release v15.10.2 · capricorn86/happy-dom") | ||
|
|
||
| ---- | ||
| <h1 class="site-genre">アーティクル</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Making content-aware components using CSS :has(), grid, and quantity queries - Piccalilli | ||
| [piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/](https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/ "Making content-aware components using CSS :has(), grid, and quantity queries - Piccalilli") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Quantity QueriesやContainer Queriesを使って要素の数や横幅でGrid Layoutを変更するテクニックについて。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Re-implementing JavaScript's == in JavaScript | ||
| [evanhahn.com/re-implementing-javascript-double-equals-in-javascript/](https://evanhahn.com/re-implementing-javascript-double-equals-in-javascript/ "Re-implementing JavaScript's == in JavaScript") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| `==` をJavaScriptで実装していく話。 | ||
| `==` がどのような変換や比較を行っているかを仕様のStepごとに実装していき、そのアルゴリズムを見ていく記事 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## CSS sprite sheet animations · leanrada.com | ||
| [leanrada.com/notes/css-sprite-sheets/](https://leanrada.com/notes/css-sprite-sheets/ "CSS sprite sheet animations · leanrada.com") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">animation</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| CSS spriteでのアニメーションについて。 | ||
| APNGやSVGでのアニメーションと比べたメリットやデメリット、CSS spriteでのアニメーションの実装方法について | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Introducing the vlt Package Manager & Serverless Registry | ||
| [blog.vlt.sh/blog/introducing-vlt-and-vsr](https://blog.vlt.sh/blog/introducing-vlt-and-vsr "Introducing the vlt Package Manager & Serverless Registry") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| npmと互換性のあるパッケージマネージャーのvltとnpm registry互換のvsrが公開された。 | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">スライド、動画関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Next.js App Router セキュリティ - Speaker Deck | ||
| [speakerdeck.com/zaru\_sakuraba/nextjssekiyuritei](https://speakerdeck.com/zaru_sakuraba/nextjssekiyuritei "Next.js App Router セキュリティ - Speaker Deck") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">security</span> <span class="jser-tag">slide</span></p> | ||
|
|
||
| Next.jsのServer Actionなどのセキュリティについてのスライド。 | ||
| `"use server";`で意図せずにサーバの関数を公開してしまうケース、Server ComponentからClientにデータを丸ごとPropsとして渡してしてしまうケースなどについて。 | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">サイト、サービス、ドキュメント</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## astahmer/atomic-css-devtools: A devtool panel for debugging Atomic CSS rules as if they were not atomic. Available on chrome & firefox | ||
| [github.com/astahmer/atomic-css-devtools](https://github.com/astahmer/atomic-css-devtools "astahmer/atomic-css-devtools: A devtool panel for debugging Atomic CSS rules as if they were not atomic. Available on chrome & firefox") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">debug</span> <span class="jser-tag">browser</span> <span class="jser-tag">Extension</span></p> | ||
|
|
||
| Atomic CSSのスタイルをまとめたパネルを提供することで、Atomic CSSのデバッグをしやすくするブラウザ拡張 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## NPM Chart | ||
| [npm.chart.dev/](https://npm.chart.dev/ "NPM Chart") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">webservice</span></p> | ||
|
|
||
| npmパッケージのインストール数のグラフを生成してくれるサービス | ||
|
|
||
|
|
||
| ---- |