JSer.info #641 - Vite 4.3がリリースされました。
Vite 4.3では主にパフォーマンスの改善が含まれています。
起動速度を40%から80%程度改善、HMRの処理時間を20%から40%程度改善されています。
これらをどうやって改善したのかについては、次の記事で解説されています。
Deno 1.33がリリースされました。
Deno 2に向けた変更が含まれています。
unstable APIとしてDeno KVを追加、deno.jsonの形式変更が含まれています。
新しい設定形式はよりネストが少なくなるようになっています。古い設定形式はDeno 2でサポートが削除される予定です。
また、Node.jsの互換性としてcryptoやvmの対応改善、npm pacakgeのキャッシュの改善なども行われています。
Deno.runの非推奨化、Deno.serveのAPIの変更、fs.existsが非推奨ではなくなるといった変更も含まれています。
2023-04-30で、Node.js 14はEOL(End Of Life)となりサポートが終了します。
また、Node.js 16はOpenSSLのLTSとの兼ね合いで、2023-09-11でEOLとなる予定です。
そのため、Node.js 18のみが実質的なLTSの選択肢となっています。(Node.js 20は2023年9月にLTSとなる予定です）
そこで、Node.js 14からNode.js 18にアップデートが必要になりますが、このアップデートにはnpmのメジャーアップデートなども含まれ色々な変更が混ざってしまっています。
次のスライドや記事では、このアップデートに対してCorepackを使ってNode.jsとnpmのアップデートを分けて行う方法について紹介しています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Vite 4.3 is out! | Vite
vitejs.dev/blog/announcing-vite4-3.html
Vite 4.3リリース。
起動速度を40%から80%程度改善、HMRの処理時間を20%から40%程度改善など
Release v5.80.0 · webpack/webpack
github.com/webpack/webpack/releases/tag/v5.80.0
webpack v5.80.0リリース。
import.metaに対するdestructuringのサポート、awaitに対するdestructuringでのTree Shakingをサポート。
ESMで書かれたローダーをサポート、exportsフィールドのwild cardパターンをサポートなど
Release v1.33.0 · microsoft/playwright
github.com/microsoft/playwright/releases/tag/v1.33.0
playwright v1.33.0リリース。
locator.or()の追加、locator.filterにhasNotとhasNotTextオプションを追加、toBeAttached Assertioを追加など
Deno 1.33: Deno 2 is coming
Deno v1.33リリース。
unstable APIとしてDeno KVを追加、deno.jsonの形式変更、Dynamic Importと権限チェックの変更。
Node.jsの互換性としてcryptoやvmの対応改善、npm pacakgeのキャッシュの改善など。
Deno.runの非推奨化、Deno.serveのAPIの変更、fs.existsが非推奨ではなくなるなど
アーティクル
Badging for Home Screen Web Apps | WebKit
webkit.org/blog/14112/badging-for-home-screen-web-apps/
navigator.setAppBadge APIでのバッジの追加について
alxolr | How to process a CSV file five times faster in NodeJs with Rust and Napi rs
www.alxolr.com/articles/how-to-process-a-csv-file-five-times-faster-in-node-js-with-rust-and-napi-rs
CSVをパースする処理をRustで書いて、Napi rsでNode.jsから利用する話
Introducing npm package provenance | The GitHub Blog
github.blog/2023-04-19-introducing-npm-package-provenance/
npmパッケージが、どのソースコードのコミット、ビルドの設定なのかのprovenanceを紐づけられる--provenanceフラグをサポート。
現在はGitHub Actionsからのpublishにおける紐付けをサポートしてる。
サプライチェーンの問題が起きた時に、パッケージに含まれるprovenanceをチェックすることで、整合性がチェックできる
CSS update Media Query - Chrome Developers
developer.chrome.com/en/blog/css-update-media-query/
update Media Queryについて。
デバイスのリフレッシュレートがfast/slow/noneかを判定したスタイルを書ける。
What's new in ECMAScript 2023 | pawelgrzybek.com
pawelgrzybek.com/whats-new-in-ecmascript-2023/
ES2023で追加される機能について。
Array.prototpype.findLast、Hashbangのサポート、WeakMapのキーとしてSymbolが利用できるように。
配列に対してimmutableな操作であるtoReversed/toSorted/toSpliced/withの追加など
CSS Custom Properties Beyond the :root · Matthias Ott – User Experience Designer
matthiasott.com/notes/custom-properties-beyond-the-root
なぜ:rootでCSS Custom Propertyを定義するのかについて
WebContainers now run on Safari, iOS, and iPadOS
blog.stackblitz.com/posts/webcontainers-are-now-supported-on-safari/
WebContainersがSafariをサポート
Node.js v20 の主な変更点 - 別にしんどくないブログ
shisama.hatenablog.com/entry/2023/04/24/083000
Node.js 20の変更点について
A Gentle Introduction to Islands
deno.com/blog/intro-to-islands
Islands ArchitectureとDenoのFreshにおける実装について
スライド、動画関係
これから先も戦えるサードパーティスクリプト - Speaker Deck
speakerdeck.com/nichimu/korekaraxian-mozhan-erusadopateisukuriputo
サードパーティスクリプトのファイルサイズを小さく保つために、機能をプラグインとしてプロジェクトごとに取捨選択してビルドできるようにしているという話。
また、プラグイン間のデータのやり取りにはPub/Subを利用している点についてなど
現実世界におけるスキーマ設計の妥協 - Speaker Deck
speakerdeck.com/sadnessojisan/xian-shi-shi-jie-niokerusukimashe-ji-notuo-xie
JSON Schema/Swagger/zod/GraphQL/gRPCなどのスキーマとバリデーションについてのスライド。
広く使われているJSON Schemaをベースにしたバリデーションを既存のアプリケーションに導入する話
Corepackを使ってNode.jsをアップデートする ⬆️⬆️
azu.github.io/slide/2023/nodejs-corepack/corepack.html
Node.js 14から18へのアップデート時に、npmも多く変わってしまっているので、Node.jsのアップデートとnpmのアップデートをCorepackを使って別々に行う方法についてのスライド。
また、Node.jsアップデート時に起きる問題をOS、native addon、peerDependencies、Node.jsそのものに分けて紹介している。
ソフトウェア、ツール、ライブラリ関係
Playground - React JSON Form
bhch.github.io/react-json-form/playground/
django-jsonform/JSON SchemaからFormを生成するReact Component
書籍関係
フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識 電子書籍｜翔泳社の本
www.shoeisha.co.jp/book/detail/9784798178639
フロントエンドのテストについての書籍。
Jest／Testing Library／Storybook／reg-suit／Playwrightなどについて
