🏄
Matsuri-tech Frontend Weekly 2023-04-30

hrdtbs

hrdtbs

2023年4月30日
MFW

社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。

この記事は、社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報を不定期でまとめたものです。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# Node.js v20

2023年4月18日にNode.js v20.0.0がリリースされました。

この記事で扱わない内容として、ファイルのアクセスやプロセスの起動を制限する新しいパーミッションモデルが追加された他、ESM Loader APIがWorker内で実行されるようになりアプリ側と実行コンテキストを分離できるようになりました。

# Stable Test Runner

内蔵されているテストランナーnode:testがStableになりました。node:testはJestなどとほぼ同じインターフェイスを持っており、また内蔵されているため別途インストールなどは必要ありません。describe、beforeEach、mock.fnなど主要なものはNode.js v18からサポートされており、カバレッジレポートなどもexperimentalフラグは必要なものの既に利用できます。

import assert from 'node:assert';
import { mock, test, beforeEach, describe } from 'node:test';

describe('tests', async () => {
	const sum = mock.fn((a, b) => {
    return a + b;
  });
  beforeEach(() => console.log('about to run a test'));
  it('is a subtest', () => {
    assert.ok('some relevant assertion here');
  });
});

https://nodejs.org/api/test.html

# New ECMAScript Features

Node.js v20でV8のバージョンが11.3に上がったため、新しいECMAScriptの機能が利用できるようになっています。

RegExp v flag

このvフラグでは、集合演算が追加される他、いくつかの Properties of Stringsが追加され複数のコードポイントからなる絵文字を扱えるようになります。

このフラグは、uフラグの改善を目的の1つにしており、Properties of Stringsはuフラグでも扱えるようにする提案がある他、WhatWGではHTMLのinput要素のpattern属性がuフラグからvフラグに置き換えられています。

Change Array by Copy

破壊的なことで有名なsort()やreverse()の非破壊バージョンが扱えます。

const array = [2, 6, 3];
array.toReversed() // [3, 6, 2]
array.toSorted() // [2, 3, 6]
array.with(1, 2) // [2, 2, 3]

# Vite 4.3

2023年4月20日に Vite 4.3がリリースされました。

# パフォーマンスの大幅改善

Vite 4.3では、パフォーマンスが大きく改善されています。Vite 4.2と比較して、Coldスタートが70%、HMRは40%程度改善したそうです。

今後もパフォーマンスの改善に取り組んでいくということで、Viteチームのやる気を感じます。どのようなパフォーマンスの改善をしたかは下記記事で紹介されています。面白いので、おすすめです。

またvite-plugin-inspect にアプリケーションのボトルネックになっているプラグインやミドルウェアを特定するのに役立つパフォーマンス関連の機能が追加されました。見慣れないかもしれませんがvite-plugin-inspectは、Viteのプラグインを作る際に公式が利用を推奨しているプラグインです。

# Deno 1.33

2023年4月28日にDeno v1.33がリリースされました。

# Deno 2 is coming

Denoは年内のメジャーリリースを目指しており、Deno 1.33を含め今後のリリースでは、Deno 2に向けてパフォーマンスや開発者体験、セキュリティ、Node/npm互換性を高めていくとのことです。Deno 2に興味があれば、Node Congress 2023で行われた「Forced Optimization」も参照してください。

# ビルトインKVデータベース

Deno KVは、ライブラリのインポートやセットアップなしで扱え、Deno Deploy(現在はClosed Beta)にデプロイすれば、グローバルにレプリケートされた低遅延のデータストアを導入できます。

const kv = await Deno.openKv();

const key = ["users", crypto.randomUUID()];
const value = { name: "Alice" };
await kv.set(key, value);

const result = await kv.get(key);
result.value; // { name: "Alice" }

ローカルでの開発時は SQLite が使われます。