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