Fork me on GitHub

2021-11-23のJS: TypeScript 4.5、React 18 beta、Remix v1

Edit on GitHub 編集履歴を見る

JSer.info #567 - TypeScript 4.5が正式リリースされました。

TypeScriptがビルトインで持つlibの型定義をpackage.jsondependenciesを使ってロックできるようになっています。
Awaited型の追加、Top-Level awaitに対応したmodule: es2022のサポート、Condition Typesにおいて一部末尾最適化するようになる変更も含まれています。
import名に対するtype modifierのサポート、ES ProposalのPrivate Field Presence Checks、Import Assertionsのサポートなども追加されています。

TypeScript 4.5 Betaで追加されていたNode.jsのESMサポートについては4.6以降に延期となっています。


React 18のbetaがリリースされています。

useSyncExternalStore/useId/useInsertionEffectのAPIがそれぞれ追加されています。
React 18の機能開発はこれで完了として、正式版のリリースに向けて残りはドキュメントやエラーの改善などを行うようです。


ReactベースのウェブフレームワークであるRemix v1リリースされています。

Next.jsなどのようにReactをベースにしたフレームワークになっていて、CLI、ルーティング、ライフサイクルメソッド、React Hooksなどを提供します。
他のものとの違いとしてSSG(Static Site Generator)ではなく、クライアントサーバモデルを基本としています。
サーバがデータを返す際に必要なデータが残るようにフィルターし、クライアントに転送するデータを最小化する目的のloader関数などを持っています。
どのような目的を持って作られているかについては次のページにまとめられています。

基本的にサーバ側が必要となるため、サーバ側のコードもあわせて公開されています。
このサーバ側は公式のホスティングサービス以外にも、fly.ioやCloudflare WorkersなどのEdgeで動かせるようになっています。


ヘッドライン


Announcing TypeScript 4.5 - TypeScript

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

TypeScript ReleaseNote

TypeScript 4.5リリース。
TypeScriptがビルトインで持つlibの型定義をdependenciesとしてロックできるように。
Awaited型の追加、Top-Level awaitに対応したmodule: es2022のサポート、Condition Typesにおいて一部末尾最適化するように。
import名に対するtype modifierのサポート、ES ProposalのPrivate Field Presence Checks、Import Assertionsのサポートなど


React 18 is now in beta · Discussion #112 · reactwg/react-18

github.com/reactwg/react-18/discussions/112

React ReleaseNote

React 18 betaリリース。
useSyncExternalStore(useMutableSourceをリネーム)、useIduseInsertionEffectの追加など


Remix v1 | Remix

remix.run/blog/remix-v1

React library ReleaseNote

ReactベースのウェブフレームワークであるRemix v1リリース。
CLI、ルーティング、ライフサイクルメソッド、React Hooksなどを提供する。
クライアントサーバモデルで、サーバが返すデータをフィルターし、最小限のデータにすることを目的にしたloader関数などを持つ。
fly.ioやCloudflare Workersなどサーバ側をEdgeで動かすことを目的にしている。


Release v6.0.0 · sindresorhus/execa

github.com/sindresorhus/execa/releases/tag/v6.0.0

node.js library ReleaseNote

execa 6.0.0リリース。
ESMのみのサポートに変更、default exportを削除しnamed exportに変更など


Release v4.0.0 · emberjs/ember.js

github.com/emberjs/ember.js/releases/tag/v4.0.0

Ember ReleaseNote

Ember 4.0.0リリース


アーティクル


Chrome Devtools による フロントエンドパフォーマンスの計測

zenn.dev/koki_tech/articles/9deb70d0a9befb

Chrome debug article

Chromeの開発者ツールのパフォーマンスタブの読み方の図解


Reimagine Atomic CSS

antfu.me/posts/reimagine-atomic-css

CSS article

Atomic CSSについて。
事前生成 + PurgeのTailwindのアプローチ、オンデマンド生成のWindi CSSについて。
また、Atomic CSSエンジンのUnoCSSを作っているという話。


What's New In DevTools (Chrome 96) - Chrome Developers

developer.chrome.com/blog/new-in-devtools-96/

Chrome debug article

Chrome96の開発者ツールの変更点について。
CSS Overviewパネルの追加、prefers-contrastとAuto Dark Themeのエミュレート機能の追加。
NetworkパネルにPayloadタブの追加、試験的にReporting APIパネルを追加など


Migrating from Puppeteer to Playwright | Checkly

www.checklyhq.com/guides/puppeteer-to-playwright/

browser testing Tools article

PuppeteerからPlaywrightの移行方法についての記事。
APIの対応表、マイグレーション方法、Playwrightのauto-waiting、二つの違いについてなど


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


divriots/browser-vite: Vite in the browser.

github.com/divriots/browser-vite

vite ServiceWorker Tools

ViteをブラウザのService Workersで動かすプロジェクト


Bun - fast JavaScript & CSS bundler

bun.sh/

babel webpack Tools

Zigで書かれたJavaScript/TypeScript/CSSに対応したTranspiler/Bundlerツール


d-kimuson/type-predicates-generator: generating predicates and assertion function by type definitions.

github.com/d-kimuson/type-predicates-generator

TypeScript library Tools

TypeScriptのコードからtype predicatesをするassertion関数を生成するツール


書籍関係


クリエイティブコーディングの教科書

zenn.dev/baroqueengine/books/a19140f2d9fc1a

JavaScript canvas book

JavaScriptとCanvasを使ったクリエティブコーディングについての電子書籍。
Canvasでの描画、画像処理、探索アルゴリズム、アニメーション表現についてなど


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