Frontend Weekly 2024-08-30

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 を使用しているようなサービスでは、非常に良い選択肢だろう。

Pigment CSS#

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

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

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

WebdriverIO とは#

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

WebDriver BiDi とは#

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

run の省略#

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

1
deno main.ts

run で task を呼ぶ#

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

1
deno run test

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

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

依存関係を削除する remove#

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

1
deno remove some_package

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

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

1
deno clean