Frontend Weekly 2025-03-28

2025年3月28日

Material UI v7がリリース、MicrosoftがHyperlight Wasmを発表、styled-componentsがメンテナンスモードに、Next.jsがLTSポリシーを公開、Node.js 18が4月30日にEOL予定、Node.js 25からCorepackの同梱が停止など

Table of Contents

# Material UI v7がリリース
# スロットパターンの実装
# CSSレイヤーのサポート
# Hyperlight Wasmが発表
# styled-componentsがメンテナンスモードに
# Next.jsがLTSポリシーを公開
# Node.js 18が4月30日にEOL予定
# Node.js 25からCorepackの同梱が停止

Material UI v7がリリース

Material UI v7が正式にリリースされました。

https://mui.com/blog/material-ui-v7-is-here/

ESMサポートの改善や非推奨になっていたAPIの削除に加えて、スロットパターンの実装とCSSレイヤーのサポートが行われています。

スロットパターンの実装

コンポーネントの内部要素を置き換えたりするためのAPIが標準化されました。今までは*Propsなどのプロパティを通して内部要素に干渉する手段などがありましたが、これらは廃止され、slotsとslotPropsプロパティを使用するようになっています。以前の方法に比べ、より細かい制御が可能なことに加え、手段の一貫性が向上しています。

https://mui.com/material-ui/customization/overriding-component-structure/

// ルートスロットの指定
// ルート（一番外側の要素）の場合はcomponentで指定する
<Button component="a"  href="/" >Link</Button>

// 内部スロットの指定
// 内部の要素の場合はslotsで指定する
<Autocomplete
  slots={{
    popper: PopperComponent,
  }}
/>

// スロットに渡すpropsの指定
<Autocomplete slotProps={{ 
  // 対応した内部スロットの要素に指定されたpropsが渡される
  popper: { 'data-testid': 'my-popper' }
  // ルートスロットに渡す場合はrootに指定する
  root: { id: 'badge1' } 
 }} />

CSSレイヤーのサポート

Material UIのスタイルをCSSレイヤーでラップできるようになり、Tailwind CSS v4などのモダンツールとの統合が可能になりました。

// Next.js App RouterでのCSSレイヤーの有効化例
// app/layout.tsx
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import GlobalStyles from '@mui/material/GlobalStyles';

export default function RootLayout(props) {
  const { children } = props;
  return (
    <html lang="en">
      <body className={roboto.variable}>
        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
          <GlobalStyles styles="@layer theme,base,mui,components,utilities;" />
          <ThemeProvider theme={theme}>{children}</ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

Hyperlight Wasmが発表

MicrosoftがHyperlight Wasmを発表しました。

https://opensource.microsoft.com/blog/2025/03/26/hyperlight-wasm-fast-secure-and-os-free/

Hyperlightとは、Rust製のアプリケーションに組み込むために設計された軽量のVMMです。非常に低いレイテンシーと最小限のオーバーヘッドで、マイクロ仮想マシン内で信頼できないコードを安全に実行することができます。

https://github.com/hyperlight-dev/hyperlight

Hyperlight WASMは、Wasm componentをHyperlightで実行するためのライブラリです。HyperlightとWebAssemblyを組み合わせることでセキュリティとパフォーマンスを共に向上できると説明しています。

https://github.com/hyperlight-dev/hyperlight-wasm

styled-componentsがメンテナンスモードに

styled-componentsのコアメンテナーであるquantizor氏が、プロジェクトをメンテナンスモードに移行することを発表しました。

https://opencollective.com/styled-components/updates/thank-you

Tailwind CSSの台頭や、自身が積極的にstyled-componentsを利用しなくなったこと、これは誤解があると思いますがReactコアチームがContext APIを事実上非推奨にしたことなどを理由に挙げています。

Next.jsがLTSポリシーを公開

Next.jsが公式にLTS（Long Term Support）ポリシーを公開しました。

https://nextjs.org/support-policy

次のような内容になっています。

Active LTS: 最新のメジャーバージョン（現在は15.x）が該当し、新機能の追加やバグ修正、パフォーマンス改善、セキュリティパッチが提供される。
Maintenance LTS: 前のメジャーバージョン（現在は14.x）が該当し、重要なバグ修正とセキュリティアップデートのみが提供される。
- 各バージョンはリリースされてから2年間はメンテナンスLTSとして提供される。
- 破壊的な変更を含む場合でもsemverのマイナーアップデートとして提供される。

これは直近のNext.jsのミドルウェア脆弱性を受けて、公開されたようです。

https://vercel.com/blog/postmortem-on-next-js-middleware-bypass

Next.jsは本番環境では最新のActive LTSまたはMaintenance LTSバージョンの使用を強く推奨しています。13.xのリリース日は2022年10月26日であるため、既に13x以下のバージョンはサポートされていないバージョンです。

Node.js 18が4月30日にEOL予定

Node.js 18系の最新バージョンである18.20.8がリリースされました。

Node.js 18系は2025年4月30日にサポート終了予定です。サポート終了するとセキュリティアップデートが行われなくなるので、まだ利用している場合は早めに移行しましょう。

https://nodejs.org/ja/blog/release/v18.20.8

Node.js 25からCorepackの同梱が停止

Node.js 25からCorepackが含まれなくなります。

https://github.com/nodejs/TSC/pull/1697#issuecomment-2737093616