O hirunewani blog

Frontend Weekly 2024-08-09

Created at

Safari 17.6、typescript-eslint v8などを紹介する。Safaris 17.6ではFlexboxのsafeキーワードがサポートされ、typescript-eslint v8ではESLint v9がサポートされた。

typescript-eslint v8

ESLint v9をサポートしたtypescript-eslint v8が2024年7月31日にリリースされた。

https://typescript-eslint.io/blog/announcing-typescript-eslint-v8

ESLint v9対応をする上で、typescript-eslint v8のリリースを持っていたESLint pluginも複数あり、ESLint v9対応がより前進するのではないかと思われる。 少なくともReact + TypeScript環境では、ライブラリやフレームワーク用のESLint pluginを除けば、ESLint v9を利用できる環境が整った。

projectServiceの安定化

ほぼprojectの上位互換であるprojectServiceが安定板になった。projectServiceは、内部的にVSCodeなどのエディタが利用しているTypeScript APIを利用しており、編集中に見ているもの異なる結果を表示することが減るとされている。

後日この機能について記事が書かれるとのこと。

https://github.com/typescript-eslint/typescript-eslint/pull/8031

ルールの削除や変更

@typescript-eslint/ban-typesが削除され、用途に合わせて次の新しいルールを利用するようになった。

  • @typescript-eslint/no-restricted-types
  • @typescript-eslint/no-empty-object-type
  • @typescript-eslint/no-unsafe-function-type
  • @typescript-eslint/no-wrapper-object-types

自分で特定の型を禁止するルールを書いていた場合は、@typescript-eslint/no-restricted-typesを利用すれば良い。他にも非推奨なルールの削除や非推奨化が行われている。

またルールだけでなくプリセットも変更されているため、ルールを何もカスタマイズせずに利用していた場合でも、対応が必要だと思われる。詳しい変更箇所は次のリンクを参照。

https://typescript-eslint.io/blog/announcing-typescript-eslint-v8/#updated-configuration-rules

Safari 17.6

2024年7月29日にSafari 17.6がリリースされた。新機能が少ないからか、あまり話題になっていない。

https://webkit.org/blog/15739/webkit-features-in-safari-17-6/

Flexboxのsafeキーワード

Flexboxの指定にsafeが利用できるようになった。 ChromeやEdge、Firefoxでも利用可能。

justify-content: safe center;

safeを利用すると、オーバーフローが発生した際に、startであるかのように配置される。 一方、unsafeを指定するか何も指定しない場合は、オーバーフローが発生した際でも、指定した通りの配置が維持される。

つまり、safeの指定の有無で、次のような違いが生じる。

How Google handles JavaScript throughout the indexing process - Vercel

VercelによるGoogleがインデックスする際にJavaScriptをどのように処理しているかについての記事。

https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process

データ分析の結果として4つの誤解を取り上げている。

  • 誤解1:GoogleはJavaScriptコンテンツをレンダリングできない
  • 誤解2:GoogleはJavaScriptを多用したページを特別扱いする
  • 誤解3:レンダリング キューが原因でインデックス作成に大幅な遅延を発生させる
  • 誤解4:JSを多用した特にSPAなどのCSRでは、Googleによるページ検出が遅くなる