Frontend Weekly 2023-07-14

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

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

CJK の禁則処理対応#

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

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

trailingComma のデフォルト値 変更#

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

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

推奨設定の再構成#

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

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

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

1
module.exports = {
2
  extends: [
3
    "eslint:recommended",
4
    "plugin:@typescript-eslint/recommended-type-checked",
5
    "plugin:@typescript-eslint/stylistic-type-checked",
6
  ],
7
  plugins: ["@typescript-eslint"],
8
  parser: "@typescript-eslint/parser",
9
  parserOptions: {
10
    project: true,
11
    tsconfigRootDir: __dirname,
12
  },
13
  root: true,
14
};

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 のサポートにより、同名の検索パラメータがある場合の操作が容易になりました。

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

5
  console.log(url.toString());
6
  // https://example.com
7
}
8

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

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