Fork me on GitHub

2021-01-12のJS: Node.jsライブラリのESM対応の計画、TypeScriptとJSDocでJavaScriptの型チェック

Edit on GitHub 編集履歴を見る

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"など)の対応が含まれています。

これによって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 Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Release v7.4.0 · npm/cli

github.com/npm/cli/releases/tag/v7.4.0

npm ReleaseNote

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

JavaScript library ReleaseNote

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に関する挙動の修正など


The ESM move · Discussion #15 · sindresorhus/meta

github.com/sindresorhus/meta/discussions/15

node.js library issue

sindresorhusパッケージの"type":"module"によるESMのネイティブ対応の計画についてのIssue


アーティクル


phodal/clean-frontend: Clean Frontend Architecture:整洁前端架构

github.com/phodal/clean-frontend

JavaScript architecture article Chinese

フロントエンドでのクリーンアーキテクチャについて。
UIフレームワークにおけるロジックの偏り、クリーンアーキテクチャの概念的な解説や実装ガイド


crossorigin 属性の仕様を読み解く

nhiroki.jp/2021/01/07/crossorigin-attribute

HTML WHATWG JavaScript spec article

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/

JavaScript TypeScript article

JSDocとTypeScriptを使って、JavaScriptのコードを型チェックする方法について。
tsconfig.jsonの設定、JSDocでの型定義、JavaScriptから.d.tsファイルをimportして型定義をJSDocに利用する方法など


Slowfil.es – Demonstate and observe slow-loading resources

slowfil.es/

webservice HTTP performance Tools

レイテンシを再現したリソースの配信をテストできるサービス。
script要素のasync属性やdefer属性の動作のテストなどリソースのレイテンシに関するパフォーマンステストに利用できる。


An additional non-backtracking RegExp engine · V8

v8.dev/blog/non-backtracking-regexp

V8 RegExp article

V8にバックトラックをしない正規表現エンジンをフラグ付きで実装したという話。
バックトラックによってReDoSのような指数関数的にマッチする問題が知られていて、これを解決するためにバックトラックを使わないアルゴリズムの実装をしたという話


サイト、サービス、ドキュメント


byte-js/byte: A easy JavaScript Runtime Engine that aims towards productivity

github.com/byte-js/byte

Rust V8 console Tools

簡単なコマンドラインツールを作れることを目的にしたV8とRustを使ったJavaScriptのRuntime


Nx: Extensible Dev Tools for Monorepos

nx.dev/

monorepo Tools JavaScript

JavaScriptのmonorepoプロジェクトを扱う開発ツール。
目的に合わせたmonorepoの作成、task runnerの管理、VSCode拡張を使ったUIをもつ。
依存グラフを使ったキャッシュ、インクリメンタルビルド、Nx Cloudを使ったリモートキャッシュなどを行う


Checka11y.css - CSS stylesheet to quickly highlight a11y concerns

checka11y.jackdomleo.dev/

accessibility CSS

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

Chrome performance Tools

Lighthouseでクロールしてパフォーマンス計測した結果をCSVとしてまとめるツール。
複数のページの結果をSpreadsheetなどに集めて分析する目的


ソフトウェア、ツール、ライブラリ関係


menduz/typed-url-params: TypeSystem based parser for url parameters

github.com/menduz/typed-url-params

TypeScript library

path-to-regexpのようなルーティング文字列に対する型推論をTemplate Literarl Typeで行うライブラリ


mistlog/react-peg: A react style parser generator based on PEG.js

github.com/mistlog/react-peg

TypeScript jsx library

PEG.jsの構文定義をJSXで書けるライブラリ。
TypeScriptのTSXを使うことで、構文に対する型チェックをしながら、構文定義をコンポーネントのように書けるようにすることが目的。


この記事へ修正リクエストをする
JSer.info Slackに参加する