JSer.info #522 - @sindresorhusによるNode.jsライブラリのESM(ECMAScript Module)対応についてのdiscussionsが作られています。
@sindresorhusはさまざまNode.jsライブラリを作成しているため、Node.jsのESM対応に関係してきます。
2021-04-30でNode.js 10のLTSが終了し、Node.js 12以上のみが対象となります。
Node.js 12.xにはECMAScript modules(.mjsや"type": "module"など)の対応が含まれています。
- nodejs/Release: Node.js Release Working Group
- Modules: ECMAScript modules | Node.js v15.5.1 Documentation
これによってNode.js(12以降)ではESMがネイティブで扱えるようになるため、既存のパッケージをESMに対応する計画について書かれています。
Node.jsのESM対応はまだ開発中の部分や実際の移行のプラクティスが決まっていないため、
どのように移行するかの参考になる情報が集められています。
@sindresorhusによるライブラリは基本的にNode.js向けに作られているので、これらの対応が進むとNode.jsがネイティブにESMを扱える範囲が広がりそうです。
Check your JS with TSという記事では、TypeScriptとJSDocを使ってJavaScriptの型チェックを行う方法について書かれています。
JSDocでの型の書き方、tscやVSCodeを使ったJSDocの型チェック、JavaScriptから.d.tsの型定義ファイルを利用する方法についてなど書かれています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release v7.4.0 · npm/cli
github.com/npm/cli/releases/tag/v7.4.0
npm 7.4.0リリース。
--foreground-scriptsの追加、npm publish --dry-runの修正など
js-yaml/CHANGELOG.md at master · nodeca/js-yaml
github.com/nodeca/js-yaml/blob/master/CHANGELOG.md#400---2021-01-03
js-yaml 4.0.0リリース。
safe{Load,LoadAll,Dump}などをload/loadAll/dumpにリネームしsafeメソッドをデフォルトに変更。
unsafeな挙動は外部パッケージのjs-yaml-js-typesに移動、numberのパースをYAML 1.2準拠に変更、dumpの出力を一部変更など。
その他には.mjsのサポート、prototype pollutionに関する挙動の修正など
- js-yaml/migrate_v3_to_v4.md at master · nodeca/js-yaml
- nodeca/js-yaml-js-types: Extra js types for js-yaml
The ESM move · Discussion #15 · sindresorhus/meta
github.com/sindresorhus/meta/discussions/15
sindresorhusパッケージの"type":"module"によるESMのネイティブ対応の計画についてのIssue
アーティクル
phodal/clean-frontend: Clean Frontend Architecture：整洁前端架构
github.com/phodal/clean-frontend
フロントエンドでのクリーンアーキテクチャについて。
UIフレームワークにおけるロジックの偏り、クリーンアーキテクチャの概念的な解説や実装ガイド
crossorigin 属性の仕様を読み解く
nhiroki.jp/2021/01/07/crossorigin-attribute
CORSに関するrequest modeとcredentials modeの振る舞いを指定するcrossorigin属性について。
<img>, <script>, <link rel=preconnect>におけるcrossorigin属性の指定による振る舞いの解説。
Fetch APIでの表現方法について。
Check your JS with TS
whistlr.info/2021/check-js-with-ts/
JSDocとTypeScriptを使って、JavaScriptのコードを型チェックする方法について。
tsconfig.jsonの設定、JSDocでの型定義、JavaScriptから.d.tsファイルをimportして型定義をJSDocに利用する方法など
Slowfil.es – Demonstate and observe slow-loading resources
レイテンシを再現したリソースの配信をテストできるサービス。
script要素のasync属性やdefer属性の動作のテストなどリソースのレイテンシに関するパフォーマンステストに利用できる。
- slowfil.es – a service for slow assets with high priority | Stefan Judis Web Development
- Oh The Scripts We'll Load - A Performance Talk by Tim Kadlec - YouTube
An additional non-backtracking RegExp engine · V8
v8.dev/blog/non-backtracking-regexp
V8にバックトラックをしない正規表現エンジンをフラグ付きで実装したという話。
バックトラックによってReDoSのような指数関数的にマッチする問題が知られていて、これを解決するためにバックトラックを使わないアルゴリズムの実装をしたという話
サイト、サービス、ドキュメント
byte-js/byte: A easy JavaScript Runtime Engine that aims towards productivity
簡単なコマンドラインツールを作れることを目的にしたV8とRustを使ったJavaScriptのRuntime
Nx: Extensible Dev Tools for Monorepos
JavaScriptのmonorepoプロジェクトを扱う開発ツール。
目的に合わせたmonorepoの作成、task runnerの管理、VSCode拡張を使ったUIをもつ。
依存グラフを使ったキャッシュ、インクリメンタルビルド、Nx Cloudを使ったリモートキャッシュなどを行う
Checka11y.css - CSS stylesheet to quickly highlight a11y concerns
CSSでHTMLのアクセシビリティをチェックするスタイルシート。
類似するツールとしてhttps://ffoodd.github.io/a11y.css/ がある。
cloudfour/lighthouse-parade: A Node.js command line tool that crawls a domain and gathers lighthouse performance data for every page.
github.com/cloudfour/lighthouse-parade
Lighthouseでクロールしてパフォーマンス計測した結果をCSVとしてまとめるツール。
複数のページの結果をSpreadsheetなどに集めて分析する目的
ソフトウェア、ツール、ライブラリ関係
menduz/typed-url-params: TypeSystem based parser for url parameters
github.com/menduz/typed-url-params
path-to-regexpのようなルーティング文字列に対する型推論をTemplate Literarl Typeで行うライブラリ
mistlog/react-peg: A react style parser generator based on PEG.js
PEG.jsの構文定義をJSXで書けるライブラリ。
TypeScriptのTSXを使うことで、構文に対する型チェックをしながら、構文定義をコンポーネントのように書けるようにすることが目的。
