Frontend Weekly 2023-07-14

2023年7月14日

Prettier 3.0、typescript-eslint v6、Firefox 115、styled-components v6などについて紹介する。

#Frontend weekly

Table of Contents

# Prettier 3.0
# CJK及び西洋文字間のスペース
# CJKの禁則処理対応
# trailingCommaのデフォルト値変更
# typescript-eslint v6
# 推奨設定の再構成
# Firefox 115
# Windows 7/8及びmacOS 10.12/10.13/10.14のサポート終了
# Array.fromAsyncのサポート
# ES2023のArrayメソッドをサポート
# URL.canParseのサポート
# URLSearchParams.has() value引数のサポート
# styled-components v6

Prettier 3.0

Prettier 3.0が2023年7月5日にリリースされました。

https://prettier.io/blog/2023/07/05/3.0.0.html

CJK及び西洋文字間のスペース

Prettierでは今までMarkdownをフォーマットする際に韓国語を除きCJKと西洋文字間にスペースを追加していました。これが変更され、CJKと西洋文字間にスペースが追加されないようになりました。

CJKの禁則処理対応

中国語と日本語における特定の文字（。 や． 、 .）を行頭または行末に使用しないようになりました。

また韓国語では、単語内での改行が行われないようなりました。これは単語が改行によって分割された後に、再フォーマットで改行がスペースに変換され、文章の意味が変わってしまうケースがあったそうです。

trailingCommaのデフォルト値変更

trailingCommaのデフォルト値がes5からallに変更されました。これによりES5で有効なオブジェクト、配列などの末尾のカンマに加えて、関数の引数などにもカンマが付くようになります。Prettier v2ではnoneからes5への変更が行われました。

関数呼び出しで末尾のカンマを許可しない最後のブラウザであるIEが2022年でサポートされなくなったため、この変更が行われたそうです。

typescript-eslint v6

2023年7月9日にtypescript-eslint v6がリリースされました。いくつかのルールの削除や、ルールの設定変更、推奨設定の再構成などが行われたため、バージョンを上げる際は対応が必須です。

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

量が多いので個別のルールの変更については紹介しません。公式のブログを読んでください。多くのルールを設定している場合、一旦全てのルールを削除して設定し直すことが推奨されています。

推奨設定の再構成

typescript-eslint v6では、提供される推奨設定が新しくなりました。

ベストプラクティスとコードの正確性のための設定：
- recommended: 雑に追加できる推奨ルール
- recommended-type-checked: 型情報を必要とするルールが追加されたもの
- strict: バグを検出できるが主張の強いルールが追加されたもの
- strict-type-checked: strict に型情報を必要とするルールが追加されたもの
一貫性のある予測可能な構文使用のためのスタイル設定：
- stylistic: 雑に追加できるスタイルルール
- stylistic-type-checked: 型情報を必要とするルールが追加されたもの

型情報を利用した型チェックを行なっている場合は、次のような設定が推奨されています。

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended-type-checked",
    "plugin:@typescript-eslint/stylistic-type-checked",
  ],
  plugins: ["@typescript-eslint"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname,
  },
  root: true,
};

Firefox 115

Firefox 115が2023年7月4日にリリースされました。弊社で開発されているサービスの多くはFirefoxをサポート環境に含めていませんが、節目となるバージョンなので取り上げます。節目となる理由と、新規機能をいくつかピックアップして紹介します。

https://www.mozilla.org/en-US/firefox/115.0/releasenotes/

https://developer.mozilla.org/ja/docs/Mozilla/Firefox/Releases/115

Windows 7/8及びmacOS 10.12/10.13/10.14のサポート終了

Firefox 115はWindows 7/8、macOS 10.12/10.13/10.14をサポートする最後のバージョンです。そもそもWindows 7/8については、Microsoftによるサポートに加えてMicrosoft Edge及びGoogle Chromeも2023年1月リリースを最後にサポートを終了しています。

Array.fromAsyncのサポート

Safari 16.4に続いてのサポートです。非同期イテレーターを配列に変換するメソッドであり、for await相当の処理です。つまり順次実行されます。

ES2023のArrayメソッドをサポート

破壊的な変更を行わずシャローコピーされた要素を持つ新しい配列を返すArray/TypedArrayのメソッド toReversed() / toSorted() / toSpliced() / with()がサポートされました。これは既にほとんどの環境がサポートされており、MDNにも記載がある環境だとおそらくFirefoxが最後です。

URL.canParseのサポート

URL.canParse()は2023年に入ってからwhatwgに加えられたもので、恐らく現状実装しているブラウザはFirefoxぐらいだと思われます。Node.jsやDenoには既に実装があります。

URL.canParse() を利用すれば、今まで try...catch ブロックなどを利用せずにURLの有効性を確認することが出来ます。

URLSearchParams.has() value引数のサポート

URLSearchParams.has() 及び URLSearchParams.delete() メソッドで、オプショナルな引数 value がサポートされました。サポート状況は、URL.canParse()と同様です。

value のサポートにより、同名の検索パラメータがある場合の操作が容易になりました。

{
  const url = new URL("https://example.com?id=cat&id=dog");
  url.searchParams.delete("id");

  console.log(url.toString());
  // https://example.com
}

{
  const url = new URL("https://example.com?id=cat&id=dog");
  url.searchParams.delete("id", "cat");

  console.log(url.toString());
  // https://example.com?id=dog
}

styled-components v6

2023年6月23日にstyled-components v6がリリースされました。一部APIの形式が変わった他、型定義ファイルが内蔵されるようになりました。

https://styled-components.com/releases#v6.0.0