Merge pull request #1250 from jser/jser-week-720

2024-12-28のJS: pnpm 10.0 RC.1、State of JavaScript 2024、Design Token-Based UI Architecture

Author: azu

_i18n/ja/_posts/2024/2024-12-28-pnpm-10.0-rc.1-state-of-javascript-2024-design-token-based-ui-architecture.md

@@ -0,0 +1,178 @@
+---
+title: "2024-12-28のJS: pnpm 10.0 RC.1、State of JavaScript 2024、Design Token-Based UI Architecture"
+author: "azu"
+layout: post
+date: 2024-12-28T07:53:27.289Z
+category: JSer
+tags:
+- React
+- Remix
+- Design
+- UI
+- architecture
+
+---
+
+JSer.info #720 - pnpm 10.0 RC 1がリリースされました。
+
+- [Release pnpm 10.0 RC 1 · pnpm/pnpm](https://github.com/pnpm/pnpm/releases/tag/v10.0.0-rc.1)
+
+インストールするパッケージのlifecycle scriptをデフォルトで実行しないように変更が含まれています。
+パッケージの`postinstall`などのlifecycle scriptの実行を許可するには`pnpm.onlyBuiltDependencies`の設定にパッケージ名を追加する必要があります。
+
+- [feat!: use an allow list of built dependencies by default by zkochan · Pull Request #8897 · pnpm/pnpm](https://github.com/pnpm/pnpm/pull/8897)
+
+これは、rspack v1.1.7でパッケージがハイジャックされ[マルウェアを実行するlifecycle script](https://socket.dev/npm/package/@rspack/core/files/1.1.7/package.json#L78)が含まれていた問題に関連した変更になっています。
+
+- [Release v1.1.8 · web-infra-dev/rspack](https://github.com/web-infra-dev/rspack/releases/tag/v1.1.8)
+
+そのほかには、`pnpm link`の挙動の変更、`packageManager`を参照してpnpmのバージョンを確認するように、ハッシュアルゴリズムをSHA256に変更、storeバージョンの更新が行われています。
+また、`verifyDepsBeforeRun`オプションが追加され、lockと`node_modules/`の状態を比較して自動インストールなどの挙動を選択できるようになるといった変更も含まれています。
+
+----
+
+JavaScriptに関する開発者アンケートである[State of JavaScript 2024](https://2024.stateofjs.com/en-US)が公開されました。
+JavaScriptの言語機能/ライブラリ/テスト/monorepo/JSとTSの比率/AIの利用率学習リソースなどについてのアンケート結果がまとめられています。
+
+----
+
+[Design Token-Based UI Architecture](https://martinfowler.com/articles/design-token-based-ui-architecture.html)という記事ではDesign TokenベースのUIアーキテクチャについて書かれています。
+
+Design Tokenを2つ or 3つのレイヤーへの分割する理由、Tokenのスコープ、Design Tokenのメリット/デメリットについて書かれています。
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## react-router/CHANGELOG.md at main · remix-run/react-router
+[github.com/remix-run/react-router/blob/main/CHANGELOG.md#v710](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v710 "react-router/CHANGELOG.md at main · remix-run/react-router")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">Remix</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+React Router 7.1.0リリース。
+Vite 6をサポート
+
+
+----
+
+## Release v2.3.0 · vercel/swr
+[github.com/vercel/swr/releases/tag/v2.3.0](https://github.com/vercel/swr/releases/tag/v2.3.0 "Release v2.3.0 · vercel/swr")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+SWR v2.3.0リリース。
+fallbackとしてPromiseデータを指定できるように、React 19のサポートなど
+
+
+----
+
+## Release 8.3.0 – Pipes of Steel · google/zx
+[github.com/google/zx/releases/tag/8.3.0](https://github.com/google/zx/releases/tag/8.3.0 "Release 8.3.0 – Pipes of Steel · google/zx")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ShellScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+zx 8.3.0リリース。
+Async Iteratorの対応、`pipe()`の改善、`--env`フラグの追加など
+
+
+----
+
+## Nuxt 3.15 · Nuxt Blog
+[nuxt.com/blog/v3-15](https://nuxt.com/blog/v3-15 "Nuxt 3.15 · Nuxt Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Nuxt</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Nuxt v3.15リリース。
+Vite 6のサポート、`callOnce()`の追加、`definePageMeta`の改善など
+
+
+----
+
+## Release pnpm 10.0 RC 1 · pnpm/pnpm
+[github.com/pnpm/pnpm/releases/tag/v10.0.0-rc.1](https://github.com/pnpm/pnpm/releases/tag/v10.0.0-rc.1 "Release pnpm 10.0 RC 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-rc.1リリース。
+インストールするパッケージのlifecycle scriptをデフォルトで実行しないように変更。
+ `pnpm link`の挙動の変更、`packageManager`を参照してpnpmのバージョンを確認するように、ハッシュアルゴリズムをSHA256に変更、storeバージョンの更新。
+ `verifyDepsBeforeRun`オプションが追加され、lockと`node_modules/`の状態を比較して自動インストールなどの挙動を選択できるようになるなど。
+
+
+----
+
+## Release v1.1.8 · web-infra-dev/rspack
+[github.com/web-infra-dev/rspack/releases/tag/v1.1.8](https://github.com/web-infra-dev/rspack/releases/tag/v1.1.8 "Release v1.1.8 · web-infra-dev/rspack")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">rspack</span> <span class="jser-tag">security</span> <span class="jser-tag">ReleaseNote</span></p>
+
+rspack v1.1.8リリース。
+`@rspack/core`と`@rspack/cli` v1.1.7のパッケージがハイジャックされマルウェアを含むバージョンが公開された問題への対応としてのリリース。
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Design Token-Based UI Architecture
+[martinfowler.com/articles/design-token-based-ui-architecture.html](https://martinfowler.com/articles/design-token-based-ui-architecture.html "Design Token-Based UI Architecture")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Design</span> <span class="jser-tag">UI</span> <span class="jser-tag">architecture</span> <span class="jser-tag">article</span></p>
+
+Design TokenとUIの開発について。
+Design Tokenを2つ or 3つのレイヤーへの分割する理由、Tokenのスコープ、Design Tokenのメリット/デメリットについて
+
+
+----
+
+## State of JavaScript 2024
+[2024.stateofjs.com/en-US](https://2024.stateofjs.com/en-US "State of JavaScript 2024")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Survey</span></p>
+
+State of JavaScript 2024のアンケート結果が公開された。
+JavaScriptの言語機能/ライブラリ/テスト/monorepoについて。
+またJSとTSの比率、AIの利用率、学習リソースなどについて
+
+
+----
+
+## Service Worker がページをコントロールし始めるタイミングを skipWaiting と clients.claim から理解する - カミナシ エンジニアブログ
+[kaminashi-developer.hatenablog.jp/entry/2024/12/20/080000](https://kaminashi-developer.hatenablog.jp/entry/2024/12/20/080000 "Service Worker がページをコントロールし始めるタイミングを skipWaiting と clients.claim から理解する - カミナシ エンジニアブログ")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ServiceWorker</span> <span class="jser-tag">article</span></p>
+
+Service Workerの`skipWaiting`と`clients.claim`の挙動について。
+
+
+----
+
+## React Ariaの実装読むぞ - Qiita Advent Calendar 2024 - Qiita
+[qiita.com/advent-calendar/2024/react-aria](https://qiita.com/advent-calendar/2024/react-aria "React Ariaの実装読むぞ - Qiita Advent Calendar 2024 - Qiita")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">accessibility</span> <span class="jser-tag">article</span></p>
+
+React Ariaのアクセシビリティ対応の実装についての連載記事
+
+
+----
+
+## Why I’m excited about text-box-trim as a designer - Piccalilli
+[piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/](https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/ "Why I’m excited about text-box-trim as a designer - Piccalilli")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">article</span> <span class="jser-tag">fonts</span></p>
+
+CSSのtext-box-trim/text-edge/text-boxでのタイポグラフィについて
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## Zero Docs
+[zero.rocicorp.dev/](https://zero.rocicorp.dev/ "Zero Docs")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">React</span> <span class="jser-tag">WebSocket</span> <span class="jser-tag">library</span> <span class="jser-tag">database</span></p>
+
+クライアントとバックエンドのデータベースの状態を同期するクエリエンジン。
+クライアントからORMでクエリを書き、その結果がバックエンドのデータベースに反映される。またクエリの結果はクライアントのローカルでもキャッシュして再利用することで、クライアントには高速に反映される。
+権限はZero Schemaというスキーマに定義することでクライアントから実行できるクエリを制御している。
+
+
+----