Frontend Weekly 2024-12-19
Safari 18.2、Next.js 15.1、ESLint v9.17.0、Vercel TypeScript SDK、State of JS 2024について
Safari 18.2
2024年12月11日に、Safari 18.2がリリースされた。
https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
Cross-document View Transition
ドキュメント間のビュー遷移の動作を指定するアットルール@view-transitionや、
pageswapとpagerevealなどのイベントが追加され、ドキュメント間のビュー遷移をコントロール出来るようになった。
また、遷移させる際に識別名を与えるview-transition-nameにautoが指定できるようになった。
text-box
text-box-edge、text-box-trim及び、これらのショートハンドであるtext-boxのサポートが追加された。 要素の上部を文字列のキャップラインでトリミングするといったことが出来る。
現在は、Safariでのみ利用できる。
Scrollbar
scrollbar-gutterとscrollbar-widthのサポートが追加された。これらを利用すると、スクロールバーの余白の確保の仕方（auto、stable、both-edgesなど）や、スクロールバーの幅の傾向（auto、thin、none）を指定できる。
scrollbar-gutterについては、次の記事が詳しい。
https://blog.ohirunewani.com/posts/scroll-bar-type/
また、文字列をターゲットにしたスクロールを可能にするtext fragmentsの機能、及びスクロールを行うtext fragmentsを装飾できる::target-text疑似要素のサポートも追加された。
Promise.try
任意の関数をPromiseのセマンティックスで簡単に扱えるPromise.tryがサポートされた。
Promise.try(func());@page
印刷時のページの大きさや余白を指定できるアットルール@pageが追加された。
次の記事が詳しい。
https://blog.ohirunewani.com/posts/css-print-style/
New to the web platform in December
Safari 18.2により、@pageやscrollbar-gutter、::target-textなどがBaselineに入っている。
https://web.dev/blog/web-platform-12-2024?hl=en
Cross-document view transitionsやPromise.tryは、Firefoxで利用できない。
Next.js 15.1
Next.js 15.1がリリースされた。
https://nextjs.org/blog/next-15-1
React 19がリリースされ、Pages Routerの場合はReact 19が利用されるようになった。App Routerの場合は、組み込みのReact Canaryが引き続き利用される。
after API
レスポンスや事前レンダリングの完了後にタスクを実行できるafter APIが安定版になった。 これを利用することで、レスポンスをブロックせずにログ記録や分析を行える。
https://nextjs.org/docs/app/api-reference/functions/after
import { after } from "next/server";
import { log } from "@/app/utils";
export default function Layout({ children }) {
// Secondary task
after(() => {
log();
});
// Primary task
return <>{children}</>;
}ESLint v9.17.0
ESLint v9.17.0がリリースされた。
https://eslint.org/blog/2024/12/eslint-v9.17.0-released/
no-unused-varsが未使用の変数宣言の削除を提案するようになった。
https://eslint.org/docs/latest/rules/no-unused-vars
Vercel TypeScript SDK
Vercel APIを操作できるTypeScript SDKがリリースされた。
https://vercel.com/changelog/introducing-the-vercel-typescript-sdk
State of JS 2024
State of JS 2024の結果が公開された。