Frontend Weekly 2024-08-30

2024年8月30日

Rspack v1.0、Material-UI v6、WebdriverIO v9、Deno v1.46などについて紹介する。

Table of Contents

# Rspack v1.0
# Rspackとは
# 互換性
# 将来性
# Material-UI v6
# Pigment CSS
# WebdriverIO v9 - WebDriver BiDi Support
# WebdriverIOとは
# WebDriver BiDiとは
# Deno v1.46
# runの省略
# runでtaskを呼ぶ
# HTML/CSS/YAMLなどのフォーマット
# 依存関係を削除するremove
# グローバルキャッシュを消去するclean

Rspack v1.0

Rspack v1.0がリリースされた。

https://rspack.dev/blog/announcing-1-0

Rspackとは

RspackとはByteDance製のRustで書かれたWebpack互換バンドラである。当初からWebpackの主要なローダーやプラグインをほぼそのまま利用できる他、Webpackと同様にJavaScriptを用いて独自のローダーやプラグインを実装することが出来るなど、Webpackとの互換性が非常に意識されている。

リリースノートでは、Webpackよりも10倍高速であり、既にByteDanceのTiktokやDouyinなどのプロダクトに加えて、MicrosoftやAmazon、Alibabaなどの企業でも採用されていると言及されている。

互換性

Rspackは、ほぼ全てのWebpack APIやエコシステム、ローダーに互換性を持っており、プラグインでも頻繁に利用されるものであれば8割をサポートまたは代替手段を提供していると言及されている。

将来性

Webpackの後継としてはRspackが発表される以前からTurbopackが存在したが、TurbopackはそもそもWebpackとの互換性を保証しておらず、Turbopackは基本的にNext.js経由でユーザーが使うためかドキュメントが充実していないため、Webpackからの緩やかな移行先としてはWebpackとの高い互換性がありドキュメントの充実しているRspackは非常に有力である。

数年前に作られたWebpackを使用しているようなサービスでは、非常に良い選択肢だろう。

Material-UI v6

Material-UI v6がリリースされた。

https://mui.com/blog/material-ui-v6-is-out/

CSS変数やカラースキーム、コンテナクエリなどCSS関連の新機能が多く追加されている。

Pigment CSS

実験的なZero Runtime CSS-in-JSであるPigment CSSをオプトインで導入できるようになった。

Pigment CSSでは、Material-UIのチームが独自に開発しており、Material-UIの従来のデフォルトであるEmotionとあまり変わらない使用感で、ゼロランタイムの恩恵を受けることが出来る。

またPigment CSSを有効化することで、Material-UIのレイアウト用コンポーネントをサーバーコンポーネントとして利用することが可能になる。

WebdriverIO v9 - WebDriver BiDi Support

WebDriver BiDiプロトコルをサポートしたWebdriverIO v9がリリースされた。

https://webdriver.io/blog/2024/08/15/webdriverio-v9-release/

これによりWebDriver BiDiをサポートしている環境であれば、今までよりも高速で安定したテストが可能になる。

WebdriverIOとは

WebdriverIOはなぜか知名度が低いので説明をしておくと、WebdriverIOとはPuppeteerやPlaywright、Cypressなどと同等の機能を備えたE2Eやコンポーネントテスト用のテスト自動化フレームワークであり、OpenJS Fundationがホストしているプロジェクトである。

WebDriver BiDiとは

WebDriver BiDiは、W3Cが策定した次世代ブラウザテスト自動化プロトコルである。従来の手法の欠点を解消することを目的としており、つい先日、Chromeに加えてFirefox 129とPuppeteer 23で本番環境での利用が可能になった。

Deno v1.46

1系の最終リリースと予告されたDeno v1.46がリリースされた。

https://deno.com/blog/v1.46

runの省略

deno runコマンドのrunを省略できるようになった。

deno main.ts

runでtaskを呼ぶ

deno taskをdeno runでも呼べるようになった。

deno run test

HTML/CSS/YAMLなどのフォーマット

deno fmtコマンドで、HTMLやCSS、SCSS、Sass、Less、YAMLさらにはAstro、Angular、Svelte、Vueなどのフォーマットが可能になった。

依存関係を削除するremove

依存関係を削除するremoveコマンドが追加された。

deno remove some_package

グローバルキャッシュを消去するclean

Denoのいくつかの機能のパフォーマンスを向上させるために取られているキャッシュを削除できるcleanコマンドが追加された。

deno clean