Frontend Weekly 2024-08-09
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 によるページ検出が遅くなる