O hirunewani blog

Frontend Weekly 2024-09-13

Created at

TypeScript 5.6やESLint v 9.10.0、Biome v1.9、JavaScript Primer v6.0.0などについて紹介する。

TypeScript 5.6

TypeScript 5.6がリリースされた。

https://devblogs.microsoft.com/typescript/announcing-typescript-5-6/

Disallowed Nullish and Truthy Checks

構文的に真偽チェックまたはnullチェックが常に一方になる場合、いくつかのケースでエラーを出すようになった。

ESLintのno-constant-binary-expressionstrict-boolean-expressionsと似ているが、この機能は次のコードのようなユーザーによる記述ミスの発見を目的にしているように思える。

if (/0x[0-9a-f]/) {
  // Error
}
if (x => 0) {
  // Error
}

この機能では、条件式を変数に切り出したり、慣用的に使われるwhile(true)などに対してはエラーを出さない。

Iterator Helper Methods

TC39のStage 3 Iterator Helpersが実装され、機能の乏しかったイテレータにmapfiltertakeなど多くのメソッドが追加された。これにより、配列を介さずともイテレータの操作が簡単に行えるようになった。

また、これらのメソッドを持つイテレータオブジェクトであるIteratorObject型も追加された。

ESLint v 9.10.0 Types now included

ESLint v9.10.0がリリースされた。 型定義を同梱するようになった。今までは@types/eslintから提供されていた。

https://eslint.org/blog/2024/09/eslint-v9.10.0-released/

Biome v1.9 Anniversary Release

Biome v1.9がリリースされ、一周年を迎えた。

https://biomejs.dev/blog/biome-v1-9/

CSSとGraphQLをデフォルトでサポートするようになった。またオプトインで.editorconfigをリスペクトできるようになった。

JavaScript Primer v6.0.0

JavaScript Primer v6.0.0がリリースされた。ECMAScript 2024の対応が行われ、Node.jsのユースケースを新たに増えたnode:utilのparseArgs関数やnode:testを使うように変更されている。

https://efcl.info/2024/09/02/jsprimer-v6/

JavaScript Primerは、これからJavaScriptを学びたい人向けに書かれた書籍であり、定期的に更新が行われている数少ない入門書である。

What’s new in React 19 – Vercel

VercelによるReact v19の新機能について知っておいた方が良さそうなものを説明する記事が公開された。

https://vercel.com/blog/whats-new-in-react-19

null or undefined

Web標準の文脈においてnullとundefinedは、仕様毎に一貫した使い方がされている。

https://speakerdeck.com/susisu/null-or-undefined

Vitest Browser Mode を試す

Vitest 2.0で追加された実験的機能であるBrowser Modeを試した記事。

https://zenn.dev/toshusai/articles/212ae67ed91302

Vitest Browser Modeは、PlaywrightやWebdriverioなどを利用してテストをブラウザ上で実行する機能であり、Playwright Component TestやStorybook Portable storiesなどと同様に、既存のE2Eテストの扱いにくさを軽減しつつ恩恵を受けることができる。

CSS @property and the New Style

全てのモダンブラウザで利用できるようになったCSS @propertyを利用して、CTAボタンで良く見られるエフェクトを実装する。

https://ryanmulligan.dev/blog/css-property-new-style/