Frontend Weekly 2024-08-16

2024年8月15日

pnpm v9.7.0のpackageManagerによるバージョン切り替えや、PuppterやFirefoxのWebDriver BiDiサポートについて取り上げた。

Table of Contents

pnpm v9.7.0

pnpm v9.7.0がリリースされた。

Corepackが利用するpackageManagerを参照して、自動的にバージョンを切り替える機能が追加された。例えば、package.jsonに次のように指定すれば、自動的にpnpm@9.7.0が利用される。

{
  "packageManager": "pnpm@9.7.0"
}

この機能を有効化するには、manage-package-manager-versionsをtrueに設定する必要がある。次のようにコマンドを実行する。

pnpm config set manage-package-manager-versions true --location project

または.npmrcなどに次のように記述すればいい。

manage-package-manager-versions=true

以前からpnpmでは、pnpm patchコマンドを利用して、パッケージのコードを直接書き換えることが出来る。次のようにコマンドを入力する。

pnpm patch <package-name>

出力に従ってパッチの記述やコマンドの入力を行うとpatches/<package-name>@<package-version>.patchというファイルが作成され、package.jsonには次のようにpatchedDependenciesフィールドが追加される。

{
  "pnpm": {
    "patchedDependencies": {
      "<package-name>@<package-version>": "patches/<package-name>@<package-version>.patch"
    }
  }
}

しかし、これは見て分かる通り、特定のバージョンに対してパッチを適用することしか出来ない。つまり、パッケージのバージョンを上げるたびにパッチを適用する必要があった。

そこで、pnpm v9.7.0ではpnpm patchコマンドでバージョンを指定しなかった場合、全てのバージョンに対してパッチを適用する機能が追加された。

W3Cが従来のブラウザテスト自動化プロトコルWebDriverの拡張として策定を進めていたWebDriver BiDiが、Firefox、Chrome、Puppeteerで本番環境での利用が可能になった。

従来のブラウザテスト自動化プロトコルには、いくつか問題がある。

Seleniumなどで利用されるWebDriverはクロスブラウザ対応が容易な一方、Flakyになりやすく遅い。
PuppterやPlaywrightなどが利用しているChrome DevTools Protocol（CDP）は高速であり低レベルなAPIを操作できるが、名前の通り本来Chromium baseのブラウザでしか動かず、FirefoxやSafariにはパッチを当てて対応している。

WebDriver BiDiは、これらの問題を解決するために開発された。 WebDriverとCDPそれぞれのメリットである容易なクロスブラウザ対応と高速な動作、低レベルなAPIの操作を全て備えている。

Remixを現在使っていない場合も、React RouterのData Routerを利用していれば同様のHooksが利用できるので、一度軽く目を通すと多くの発見があると思う。

React RouterやRemixの公式ドキュメントでも確認できるが、簡素な傾向があるので、こういう網羅的な記事は有益だと思う。

リクルート社のエンジニア研修の資料が今年も公開された。

ReactやNext.jsなど技術にフォーカスしたスライドが取り上げられがちだが、個人的にはソフトウェアエンジニアとしての姿勢と心構えや現代的なシステム設計概論も良い資料だと思う。