🏄

Matsuri-tech Frontend Weekly 2023-07-14

この記事は、社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報を不定期でまとめたものです。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# Prettier 3.0

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

# 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がリリースされました。いくつかのルールの削除や、ルールの設定変更、推奨設定の再構成などが行われたため、バージョンを上げる際は対応が必須です。

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

# 推奨設定の再構成

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をサポート環境に含めていませんが、節目となるバージョンなので取り上げます。節目となる理由と、新規機能をいくつかピックアップして紹介します。

# 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の形式が変わった他、型定義ファイルが内蔵されるようになりました。