Frontend Weekly 2025-03-28

2025-03-28

Tech

Frontend weekly

/

Next.js

/

Node.js

/

Rust

/

WebAssembly

/

Material UI

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/

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

5
// 内部スロットの指定
6
// 内部の要素の場合はslotsで指定する
7
<Autocomplete
8
  slots={{
9
    popper: PopperComponent,
10
  }}
11
/>
12

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

CSS レイヤーのサポート#

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

1
// Next.js App RouterでのCSSレイヤーの有効化例
2
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
3
import GlobalStyles from "@mui/material/GlobalStyles";
4

5
export default function RootLayout(props) {
6
  const { children } = props;
7
  return (
8
    <html lang="en">
9
      <body className={roboto.variable}>
10
        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
11
          <GlobalStyles styles="@layer theme,base,mui,components,utilities;" />
12
          <ThemeProvider theme={theme}>{children}</ThemeProvider>
13
        </AppRouterCacheProvider>
14
      </body>
15
    </html>
16
  );
17
}

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 以下のバージョンはサポートされていないバージョンです。