2022-07-20のJS: Node.js 18.6.0、React NativeのHermesデフォルト化、AWSのデザインシステム

_i18n/ja/_posts/2022/2022-07-20-node.js-18.6.0-react-nativehermes-aws.md

@@ -0,0 +1,215 @@
+---
+title: "2022-07-20のJS: Node.js 18.6.0、React NativeのHermesデフォルト化、AWSのデザインシステム"
+author: "azu"
+layout: post
+date : 2022-07-20T02:48:15.525Z
+category: JSer
+tags:
+- node.js
+- React
+- document
+- Native
+- RegExp
+
+---
+
+JSer.info #601 - Node.js 18.6.0がリリースされました。
+
+- [Node v18.6.0 (Current) | Node.js](https://nodejs.org/en/blog/release/v18.6.0/)
+
+Node.js 18.6.0ではexperimentalで実装されている`--loader`の挙動の変更が含まれています。
+複数の`--loader`を指定した場合の順番を変更。またloaderの実装は`shortCircuit`を返すのが必須となっています。
+そのため、すでに公開されているloaderが動かなくなっている場合があります。
+
+詳しくは、次のIssueと記事で解説されています。
+
+- [esm: add chaining to loaders by JakobJingleheimer · Pull Request #42623 · nodejs/node](https://github.com/nodejs/node/pull/42623)
+- [Custom ESM loaders: Who, what, when, where, why, how - DEV Community 👩‍💻👨‍💻](https://dev.to/jakobjingleheimer/custom-esm-loaders-who-what-when-where-why-how-4i1o)
+
+---
+
+React NativeのJavaScriptエンジンはJSC(JavaScrip Core)がデフォルトでしたが、
+次にリリースされる 0.70 でデフォルトがHermesへと変更される予定です。
+
+- [Hermes as the Default · React Native](https://reactnative.dev/blog/2022/07/08/hermes-as-the-default)
+
+この記事ではJavaScriptCoreとHermesの比較、ABI非互換性の問題、HermesへのECMAScript i18n APIサポートについて書かれています。
+
+---
+
+AWSのデザインシステムである Cloudscape Design Systemが公開されています。
+
+- [Cloudscape – Cloudscape Design System](https://cloudscape.design/)
+
+デザインシステムの原則を書いたドキュメント、Reactコンポーネント、利用する時のパターンから構成されています。
+原則についてのドキュメントもよく書かれているので、読んでみると面白いかもしれません。
+
+- [Foundation – Cloudscape Design System](https://cloudscape.design/foundation/foundation/overview/)
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Node v18.6.0 (Current) | Node.js
+[nodejs.org/en/blog/release/v18.6.0/](https://nodejs.org/en/blog/release/v18.6.0/ "Node v18.6.0 (Current) | Node.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js 18.6.0リリース。
+ESM Loader Hooksが更新され、複数の`--loader`を指定した場合の順番の変更。またloaderの実装は`shortCircuit`を返すのが必須となった。
+
+- [Custom ESM loaders: Who, what, when, where, why, how - DEV Community 👩‍💻👨‍💻](https://dev.to/jakobjingleheimer/custom-esm-loaders-who-what-when-where-why-how-4i1o "Custom ESM loaders: Who, what, when, where, why, how - DEV Community 👩‍💻👨‍💻")
+
+----
+
+## luxon/CHANGELOG.md at master · moment/luxon
+[github.com/moment/luxon/blob/master/CHANGELOG.md#300-2022-07-09](https://github.com/moment/luxon/blob/master/CHANGELOG.md#300-2022-07-09 "luxon/CHANGELOG.md at master · moment/luxon")
+<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>
+
+luxon 3.0.0リリース。
+
+- [Add condition for system setZone by davkub · Pull Request #1206 · moment/luxon](https://github.com/moment/luxon/pull/1206 "Add condition for system setZone by davkub · Pull Request #1206 · moment/luxon")
+
+----
+
+## NestJS v9 is now available - Trilon Consulting
+[trilon.io/blog/nestjs-9-is-now-available](https://trilon.io/blog/nestjs-9-is-now-available "NestJS v9 is now available - Trilon Consulting")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+NestJS v9リリース。
+REPLの追加、`ConfigurableModuleBuilder`の追加、Durable providersの追加など
+
+
+----
+
+## Release v5.8.0 · nodejs/undici
+[github.com/nodejs/undici/releases/tag/v5.8.0](https://github.com/nodejs/undici/releases/tag/v5.8.0 "Release v5.8.0 · nodejs/undici")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+undici 5.8.0リリース。
+CRL injectionとCookie扱いに関するセキュリティ修正
+
+
+----
+
+## Version 3.0 released : Node-RED
+[nodered.org/blog/2022/07/14/version-3-0-released](https://nodered.org/blog/2022/07/14/version-3-0-released "Version 3.0 released : Node-RED")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node-RED 3.0 リリース。
+エディタのアップデート、aceに代わってmonaco editorがデフォルト化、`runtimeState`オプションの追加、`diagnostics`オプションの追加など
+
+
+----
+
+## ESLint v8.20.0 released - ESLint - Pluggable JavaScript Linter
+[eslint.org/blog/2022/07/eslint-v8.20.0-released/](https://eslint.org/blog/2022/07/eslint-v8.20.0-released/ "ESLint v8.20.0 released - ESLint - Pluggable JavaScript Linter")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">ReleaseNote</span></p>
+
+ESLint 8.20.0リリース。
+preprocessorsにおけるパースエラーなどをLintエラーとして報告するようになるなど
+
+
+----
+
+## yaakov123/hagana: NodeJS runtime protection for supply chain attacks
+[github.com/yaakov123/hagana](https://github.com/yaakov123/hagana "yaakov123/hagana: NodeJS runtime protection for supply chain attacks")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">security</span> <span class="jser-tag">library</span></p>
+
+Node.jsの`fs`や`child_process`モジュールなどを上書きして、アクセスできるネットワークや実行できるコマンドなどを制限するライブラリ。
+デフォルトでは`node_modules`以下に含まれるサードパーティのライブラリに対して制限を追加する
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Applying SOLID principles in React | Konstantin Lebedev blog
+[konstantinlebedev.com/solid-in-react/](https://konstantinlebedev.com/solid-in-react/ "Applying SOLID principles in React | Konstantin Lebedev blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">article</span></p>
+
+ReactとSOLID原則について
+
+
+----
+
+## Hermes as the Default · React Native
+[reactnative.dev/blog/2022/07/08/hermes-as-the-default](https://reactnative.dev/blog/2022/07/08/hermes-as-the-default "Hermes as the Default · React Native")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">Native</span> <span class="jser-tag">article</span></p>
+
+React Native 0.70でHermesがデフォルトとなることについて。
+JavaScriptCoreとHermesの比較、ABI非互換性の問題、HermesへのECMAScript i18n APIサポートについてなど
+
+
+----
+
+## Vite 3 が採用した CJS Proxy による Dual Package 構成
+[zenn.dev/teppeis/articles/2022-07-npm-dual-pacakge-cjs-proxy](https://zenn.dev/teppeis/articles/2022-07-npm-dual-pacakge-cjs-proxy "Vite 3 が採用した CJS Proxy による Dual Package 構成")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">vite</span> <span class="jser-tag">node.js</span> <span class="jser-tag">article</span></p>
+
+Viteが利用してるCJSとESMをdual packagesに対応する手法について。
+CJSからESMを扱うために、非同期な関数のexportはDynamic Importsを含むラッパーを公開し、同期的な関数のexportはesbuildなどでbundle済みのものを公開する
+
+
+----
+<h1 class="site-genre">スライド、動画関係</h1>
+
+----
+
+## rety: Live coding without the stress
+[rety.verou.me/](https://rety.verou.me/ "rety: Live coding without the stress")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">presentation</span></p>
+
+textareaなどに対するコーディングの動きを記録し、リプレイできるライブラリ。
+プレゼンテーションなどでライブコーディング的なデモを行う用途で作られている。
+
+- [LeaVerou/rety: Record typing on one or more editors and replay it at will, to simulate live coding](https://github.com/leaverou/rety "LeaVerou/rety: Record typing on one or more editors and replay it at will, to simulate live coding")
+
+----
+<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
+
+----
+
+## Cloudscape – Cloudscape Design System
+[cloudscape.design/](https://cloudscape.design/ "Cloudscape – Cloudscape Design System")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">aws</span> <span class="jser-tag">Design</span> <span class="jser-tag">accessibility</span> <span class="jser-tag">document</span></p>
+
+AWSで使われているデザインシステム。
+デザインシステムの原則を書いたドキュメント、Reactコンポーネント、利用する時のパターンから構成されている。
+
+
+----
+
+## Defensive CSS
+[defensivecss.dev/](https://defensivecss.dev/ "Defensive CSS")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">document</span></p>
+
+CSSで幅を超えたときにデザインが崩れる問題への対応をまとめたサイト。
+Flexbox、画像サイズ、折り返し文字列。アイコンと文字の被り、背景画像の繰り返し、Viewportのサイズなどの問題について
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## tuplo/numberfmt: Number formatting using a text pattern and native Intl.NumberFormat()
+[github.com/tuplo/numberfmt](https://github.com/tuplo/numberfmt "tuplo/numberfmt: Number formatting using a text pattern and native Intl.NumberFormat()")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p>
+
+`Intl.NumberFormat`ベースの数値の整形ライブラリ
+
+
+----
+
+## danielroe/magic-regexp: A compiled-away, type-safe, readable RegExp alternative
+[github.com/danielroe/magic-regexp](https://github.com/danielroe/magic-regexp "danielroe/magic-regexp: A compiled-away, type-safe, readable RegExp alternative")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">RegExp</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p>
+
+正規表現を組み立てるビルダー関数を提供するライブラリ。
+また、ビルダー関数を正規表現リテラルへと変換するNuxt/Vite/Next.js向けのプラグインなども公開している。
+
+
+----