Fork me on GitHub

2021-11-18のJS: Node v17.1.0、Lighthouse 9.0.0(Audit User Flows)、TypeScriptで型チェッカーを作る

Edit on GitHub 編集履歴を見る

JSer.info #566 - Node.jsの開発版である17.1.0がリリースされました。

現在ECMAScript ProposalのStage 3であるImport Assertionsを使ったJSONのimportがサポートされています。

import fooData from './foo.json' assert { type: 'json' };

Lighthouse 9.0.0がリリースされました。

Node 12のサポート終了、意味がなくなったauditが削除されています。
また、ページ遷移を含むAuditをとるAudit User Flowsをプレビュー機能としてサポートしています。


Reconstructing TypeScript, part 0: intro and backgroundという記事では、TypeScriptを使ってTypeScriptのような言語の型チェッカーを実装していく連載となっています。
Union types, Intersection types, narrowingなどTypeScript同じような型の仕様に対する型チェッカーを実装していく内容となっています。
実装としては、Babelを使ったTypeScriptのコードをパースして得たASTと型情報をもとに、その型情報をチェックしていく実装を書いていく流れになっています。

実際に動く型チェッカーを実装していく内容になっているので、型の実装に興味がある人は読むと良さそうです。


ヘッドライン


Node v17.1.0 (Current) | Node.js

nodejs.org/uk/blog/release/v17.1.0/

node.js ReleaseNote

Node.js 17.1.0リリース。
ES ModulesのImport AssertionによるJSONのimportができるように。

import fooData from './foo.json' assert { type: 'json' };

Release eslint-config-airbnb-v19.0.0 · airbnb/javascript

github.com/airbnb/javascript/releases/tag/eslint-config-airbnb-v19.0.0

ESLint config ReleaseNote

eslint-config-airbnb 19.0.0リリース。
ESLint 8のサポート


Release Notes for Safari Technology Preview 135 | WebKit

webkit.org/blog/12040/release-notes-for-safari-technology-preview-135/

safari ReleaseNote

Safari Technology Preview 135リリース。
CSSのaccent-colorのサポート、flex-basis: contentのサポート。
loading属性を使った画像の遅延ロードをサポート。
120Hzのディスプレイでは120Hzでスクロールアニメーションが動くように


wrangler 2.0 — a new developer experience for Cloudflare Workers

blog.cloudflare.com/wrangler-v2-beta/

cloudflare webworker ReleaseNote

Cloudflare WorkersのCLIであるwrangler 2.0リリース。
wrangler dev <filename>で設定なしでデプロイ、開発できるように、--public <path>での静的アセットの指定をサポート。
--localでMiniflareベースのオフラインで動くローカルモードをサポート


Release 0.6.0 – Info sections, bailouts, state change locations, open in editor and more · lahmatiy/react-render-tracker

github.com/lahmatiy/react-render-tracker/releases/v0.6.0

React debug library ReleaseNote

Reactの意図しないレンダリングを見つけるデバッグツールのreact-render-tracker 0.6.0リリース。


Electron 16.0.0 | Electron

www.electronjs.org/blog/electron-16-0

Electron ReleaseNote

Electron 16.0.0リリース。
Chromium 96、Node.js 16.9.1、V8 9.6へアップデート。
WebHID APIのサポート、native modulesをビルドするためにnode-gypを使っているプロジェクトでは--force-process-configが必要となる変更になど


Announcing Serverless Framework v3 Beta

www.serverless.com/blog/serverless-framework-v3-beta

serverless node.js ReleaseNote

Serverless Framework v3 Betaリリース。
serverlessコマンドの出力の改善、--verboseのサポート、非推奨だったAPIの削除など


Release v9.0.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v9.0.0

Chrome performance Tools ReleaseNote

Lighthouse v9.0.0リリース。
Node 12のサポート終了、いくつかのauditを削除。
ページ遷移を含むAuditをとるAudit User Flowsをサポートなど


アーティクル


Reconstructing TypeScript, part 0: intro and background

jaked.org/blog/2021-09-07-Reconstructing-TypeScript-part-0

TypeScript article babel AST

TypeScriptの型チェッカーを実装しながら、TypeScriptの型について学ぶ連載記事。
パーサにはBabelを使い、パースしたASTと型情報をチェックする型チェッカーを実装していく


Mastering TypeScript Template Literal Types | by Jose Granja | Nov, 2021 | Better Programming

betterprogramming.pub/mastering-typescript-template-literal-types-f4131a94ffb1

TypeScript article

Typescript 4.1 で追加されたTemplate Literal Typeについての解説記事。
基本的な使い方、制限、Utility Type、inferと組み合わせた型を推論する書き方やMapped Typesとの組み合わせについてなど


SharedArrayBuffer と過渡期な cross-origin isolation の話

blog.agektmr.com/2021/11/cross-origin-isolation.html

browser Chrome article

SharedArrayBufferや高分解能Timerを利用するためにはcross origin isolationな状態が必要となる。
cross origin isolationな状態にするための条件であるHTTPヘッダについての解説。


Copy CSS as JavaScript - Chrome DevTools - Dev Tips

umaar.com/dev-tips/249-copy-css-as-js/

Chrome debug article

Chromeの開発者ツールでCSSプロパティをJavaScriptのCamelCaseなプロパティをもつオブジェクトとしてコピーできるようになった。
CSSパネルからCSS in JSのObejct Stylesでコピーできる


Less Absolute Positioning With Modern CSS - Ahmad Shadeed

ishadeed.com/article/less-absolute-positioning-modern-css/

CSS article

CSSのposition: absoluteを使わなくても同等の表現ができるという紹介。
Gridを使った要素の重ね、orderを使った表示順の変更、aspect-ratioを使った画像のアスペクト比の指定など。
またposition: absoluteを使った方が良いユースケースについて


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


Bundle Scanner - Identify NPM libraries included in Javascript files

bundlescanner.com/

npm Tools webservice

指定したURLでどのようなJavaScriptファイルがあり、そのJavaScriptファイルから利用されているnpmモジュールを抽出するツール。


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


niksy/node-stdlib-browser: Node standard library for browser.

github.com/niksy/node-stdlib-browser

node.js polyfill library browser

Node.js Core Modulesのブラウザ向けpolyfillをまとめたライブラリ。


koskimas/kysely: A type-safe typescript SQL query builder

github.com/koskimas/kysely

TypeScript PostgreSQL MySQL library node.js

TypeScriptで書かれたSQLクエリビルダー。
PostgreSQLとMySQLに対応したクエリの作成と実行ができる。
Schemaを型として定義し、その型を元にクエリを構築できる。


gajus/liqe: Lightweight and performant Lucene-like parser and search engine.

github.com/gajus/liqe

search JavaScript library

検索演算子のパーサライブラリ


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