Fork me on GitHub

2021-11-09のJS: React Router v6、Angular v13、ChromeのRecord and Replay、TypeScriptへの段階的な移行

Edit on GitHub 編集履歴を見る

JSer.info #565 - React Router v6がリリースされました。

React Hooksベースで再実装、<Route>のネストの扱いを改善、<Link to>の値に相対パスの解釈を<Route path>を基準にする変更などが含まれています。

合わせてReact Router v5からのマイグレーションガイドも公開されています。


Angular 13がリリースされました。

Ivyがデフォルトとなったため、View Engineが削除されています。
Angular Package Format(APF)が、package.jsonexportsフィールドをサポートしました。
また、IE 11のサポートが終了されています。
AngularでのIEサポートはAngular 12までとなり、Angular 12は2022年11月12日までサポートされます。

その他には、Angular CLIが永続ビルドキャッシュをサポート、テスト時にDOMのクリーンアップがデフォルト化されています。


Record, replay and measure user flows - Chrome Developersという記事では、Chrome 97の開発者ツールにプレビュー実装されたRecorder panelについて紹介されています。

ユーザー操作を記録し再生でき、またユーザーフローとPerformance計測を組み合わせて利用できます。
また、記録した内容は編集したり、Puppeteerスクリプトとして出力できるようになっています。


以下の記事はどちらもJavaScriptからTypeScriptへの段階的な移行について書かれています。

ゆるい型をつけてから段階的に厳しくしていくアプローチと最初から厳密な型をつけていくというアプローチをそれぞれ扱っているので、合わせて読んでみると面白いと思います。


ヘッドライン


Release v11.0.0 · puppeteer/puppeteer

github.com/puppeteer/puppeteer/releases/tag/v11.0.0

Chrome library ReleaseNote

puppeteer 11.0.0リリース。
Out of ProcessなiframeのwaitをサポートするPage.waitForFrame()frame.isOOPFrame()の追加。
HTTP Requestのinitiatorを取得できるようになるなど


Recoil 0.5 | Recoil

recoiljs.org/blog/2021/11/03/0.5.0-release

React library ReleaseNote

Recoil 0.5リリース。
キャッシュをクリアできるuseRecoilRefresher_UNSTABLE()の追加。
onSetのコールバックにisResetを追加、getLoadable()/getPromise()/getInfo_UNSTABLE()の追加など


React Router v6 | Remix

remix.run/blog/react-router-v6

React library ReleaseNote

React Router v6リリース。
React Hooksベースで再実装、<Route>のネストの改善、<Link to>の値に相対パスの解釈を<Route path>を基準にするように変更など


Announcing TypeScript 4.5 RC - TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/

TypeScript ReleaseNote

TypeScript 4.5 RCリリース。
4.5 betaで導入されていたESM対応のmodule: node12はリリースが延期となった。


Nightwatch v2 is Now in Beta | Nightwatch.js Blog

nightwatchjs.org/blog/nightwatch-v2-beta-is-available.html

E2E testing library ReleaseNote

Nightwatch v2リリース。
Chrome DevTools ProtocolとWebDriver BiDIのサポート、CucumberJSのサポートなど


V8 release v9.7 · V8

v8.dev/blog/v8-release-97

V8 ReleaseNote

V8 v9.7リリース。
ArrayとTypedArrayにfindLastfindLastIndexの実装。


Angular v13 is now Available. We’re back with the brand new release… | by Mark Thompson (@marktechson) | Nov, 2021 | Angular Blog

blog.angular.io/angular-v13-is-now-available-cce66f7bc296

Angular ReleaseNote

Angular 13リリース。
IvyがデフォルトとなったためView Engineを削除、Angular Package Format(APF)がexportsフィールドのサポート、IE 11のサポート終了。
Angular CLIが永続ビルドキャッシュをサポート、テスト時にDOMのクリーンアップがデフォルト化など


Release v4.0.0 · markedjs/marked

github.com/markedjs/marked/releases/tag/v4.0.0

Markdown JavaScript library ReleaseNote

markded 4.0.0リリース。
ESMの対応、default exportを削除したためimport { markded } from "marked"のnamed importを利用するに変更など


アーティクル


What's new in PageSpeed Insights

web.dev/whats-new-pagespeed-insights/

google performance article

新しいPageSpeed Insightsの画面解説。
計測データとCrUXデータ(Lab)が混在していたが、CrUXのデータはOrigin Summaryというタブに分離された。
Core Web Vitalsのスコア表示などが含まれる予定


Malware found in coa and rc, two npm packages with 23M weekly downloads - The Record by Recorded Future

therecord.media/malware-found-in-coa-and-rc-two-npm-packages-with-23m-weekly-downloads/

npm security article

coarcパッケージにマルウェアが含まれていたバージョンがpublishされていた問題について。
現在は無効化されているが、それぞれ次のバージョンが問題となっている。


Record, replay and measure user flows - Chrome Developers

developer.chrome.com/docs/devtools/recorder/

Chrome article debug

Chrome 97の開発者ツールにプレビュー実装されたRecorder panelについて。
ユーザー操作を記録し再生できる。またユーザーフローとPerformance計測を組み合わせられる。
記録した内容は編集したり、Puppeteerスクリプトとして出力できる。


TypeScriptのJSDocサポートでできること、できないこと

zenn.dev/qnighy/articles/56917d9bf9077b

TypeScript JavaScript article

TypeScriptのJSDocによる型アノテーションについての解説。
TypeScriptとJSDocの型アノテーションでの表現力の違い、JSDocでの型アノテーションの書き方について


A Comprehensive Guide To Error Handling In Node.js - Honeybadger Developer Blog

www.honeybadger.io/blog/errors-nodejs/

JavaScript node.js article

Node.jsのエラーハンドリングについての記事。
例外、コールバック、Promise、EventEmitterそれぞれにおけるエラーのハンドリング。
カスタムエラーでの分類、Operational ErrorとProgrammer Errorの違い。
またOperation Errorが発生したときの対処方法とProgrammer Errorの防止策について


インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス

tech.plaid.co.jp/karte-blocks-incremental-development/

JavaScript TypeScript node.js React Vue article

JavaScriptをTypeScriptを段階的に移行する方法について。
最初からしっかりとした型をつける方法とゆるい型に変換してから型をつける方法の比較、マイグレーションの順番、型を使ったAPIバリデーション、VueからReactへの段階的な移行など。
インクリメンタルな移行するときのポイントについて。


Etsy’s Journey to TypeScript - Code as Craft

codeascraft.com/2021/11/08/etsys-journey-to-typescript/

TypeScript ESLint article

TypeScriptの採用戦略についての記事。
厳密な型付けへの移行方法、typescript-eslintを使った一部の汎用型と構文の禁止、APIへの型付けについて。
TypeScriptの型チェックのパフォーマンス問題のデバッグ、教育について


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


Web Performance Metrics Cheatsheet

bitsofco.de/web-performance-metrics-cheatsheet/

performance cheatsheet

ウェブパフォーマンスのメトリクスチートシート。
4つのステージにグループ分けし、それぞれに関連するメトリクスをまとめている


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


urin/qrono: 🕥 Just right date time library

github.com/urin/qrono

JavaScript library

Immutableな日付操作ライブラリ。
UTCとローカル時間のみを扱うことで、夏時間のあいまいな時間を正確に扱う。


Shopify/hydrogen: React-based framework for building dynamic, Shopify-powered custom storefronts.

github.com/Shopify/hydrogen

React vite library

Shopifyのストアフロントを作成するReactベースのフレームワーク。
ViteとReactをベースにしていて、React ServerSide Componentsを利用している。


書籍関係


JavaScript(第7版) | Ohmsha

www.ohmsha.co.jp/book/9784873119700/

JavaScript book

2021年12月2日発売
サイ本 7版の翻訳本


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