JSer.info #567 - TypeScript 4.5が正式リリースされました。
TypeScriptがビルトインで持つlib
の型定義をpackage.json
のdependencies
を使ってロックできるようになっています。
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で動かせるようになっています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Announcing TypeScript 4.5 - TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-4-5/
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 18 betaリリース。
useSyncExternalStore
(useMutableSource
をリネーム)、useId
、useInsertionEffect
の追加など
Remix v1 | Remix
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
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 4.0.0リリース
アーティクル
Chrome Devtools による フロントエンドパフォーマンスの計測
zenn.dev/koki_tech/articles/9deb70d0a9befb
Chromeの開発者ツールのパフォーマンスタブの読み方の図解
Reimagine Atomic CSS
antfu.me/posts/reimagine-atomic-css
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/
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/
PuppeteerからPlaywrightの移行方法についての記事。
APIの対応表、マイグレーション方法、Playwrightのauto-waiting、二つの違いについてなど
ソフトウェア、ツール、ライブラリ関係
divriots/browser-vite: Vite in the browser.
github.com/divriots/browser-vite
ViteをブラウザのService Workersで動かすプロジェクト
Bun - fast JavaScript & CSS bundler
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のコードからtype predicatesをするassertion関数を生成するツール
書籍関係
クリエイティブコーディングの教科書
zenn.dev/baroqueengine/books/a19140f2d9fc1a
JavaScriptとCanvasを使ったクリエティブコーディングについての電子書籍。
Canvasでの描画、画像処理、探索アルゴリズム、アニメーション表現についてなど