Matsuri-tech Frontend Weekly 2023-09-18





社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# Chrome 117

New in Chrome 117  |  Blog  |  Chrome for DevelopersChrome 117 is rolling out now! With three new CSS features that make it easy to add smooth entry and exit animations, array grouping to compute higher order datasets, devtools makes local overrides easier and there’s plenty more.

# New CSS features for entry and exit animations

transition-behavior: allow-discrete で離散的なCSSプロパティのアニメーションが可能になりました。次の例ではfade-outクラスが付いてから、0.25s後にdisplay: noneに切り替わります。

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete;

.card.fade-out {
  opacity: 0;
  display: none;

また、@starting-style ルールで、要素の初期状態を指定できるようになりました。これにより今までanimationプロパティやJavaScriptなどを併用する必要があったアニメーションなどをtransitionのみで記述できるようになります。

/*   IS-OPEN STATE   */
dialog[open] {
  translate: 0 0;

/*   EXIT STATE   */
dialog {
  transition: translate 0.7s ease-out, overlay 0.7s ease-out, display 0.7s ease-out allow-discrete;
  translate: 0 100vh;

@starting-style {
  dialog[open] {
    translate: 0 100vh;

# Array grouping


const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "cherries", type: "fruit", quantity: 5 },

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }

# CSS Subgrid


.card-group {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;

.subgrid .card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 16px;


# Next.js v13.5

2023年9月19日にNext.js v13.5がリリースされました。ローカル開発のパフォーマンス改善が主な内容です。サーバーの起動やHMRの高速化、メモリ使用量の削減、next/imageの改善などが行われました。

Next.js 13.5Next.js 13.5 includes 22% faster local server startup, 29% faster HMR (Fast Refresh), 40% less memory usage, and more.Next.js 13.5

# Nuxt 3.7

Nuxt 3.7 · Nuxt BlogNuxt 3.7 is out, bringing a new CLI, native web streams and response, rendering optimisations, async context support - and much more.Nuxt 3.7 · Nuxt Blog

Web StreamとResponseのサポート、head要素内のレンダリング最適化、Viteのアップデート及びマイナーバージョンの固定を解除、NitroやTypeScriptの設定のアップデートなどが行われました。

# Bun v1.0

Bun 1.0Bun is stable and ready for production.Bun 1.0

Bun v1.0がリリースされました。Bunは、Node.js互換のランタイム、トランスパイラ、バンドラ、タスクランナー、パッケージマネージャー、bun testによるテスト機能など、JavaScript/TypeScriptのツールチェーンを統合したものです。


# Astro v3.0

Astro 3.0 | Astro30% faster and more powerful than ever, Astro 3.0 is here! Includes new features and enhancements around View Transitions, Image Optimization, Fast Refresh JSX and more.Astro 3.0 | Astro


Astro v3.0では、レンダリング速度の向上や画像最適化に加え、View Transitionsが正式に追加され、ReactのFast Refreshが動作するようになりました。

# Astro Studio

Astro StudioLaunching early 2024. Astro Studio is a globally-distributed edge data platform, designed exclusively for Astro. Connect any new or existing Astro project to a dedicated hosted database in seconds.Astro Studio

Astroに特化したホスティングサービスとしてAstro Studioが発表されました。2024年初頭での一般公開が予定されています。

# Biome

Announcing BiomeBiome continues Rome's legacy; in this blog post, we explain why the fork, with some context and history.Announcing Biome


# Announcing native npm support on Deno Deploy

Announcing native npm support on Deno DeployDeno Deploy becomes the first isolate serverless platform to natively support more than two million modules on npm.Announcing native npm support on Deno Deploy

Deno Deployがnpm:を介してnpmモジュールの実行をネイティブにサポートするようになりました。

# v0.dev - AI tool that is effectively Midjourney for React

Vercelが、プロンプトからshadcn/uiとTailwind CSSを利用したReactのコードが生成するAIツールをリリースしました。

v0 by VercelGenerate UI with simple text prompts. Copy, paste, ship.v0 by Vercel

# Lodash switch to TypeScript, Bun



# Deno 1.37: Modern JavaScript in Jupyter Notebooks

Deno 1.37 がリリースされました。Jupyter Notebook で Deno を利用できるようになりました。他にもテストランナーやNode.jsとの互換性の改善なども行われています。

Deno 1.37: Modern JavaScript in Jupyter NotebooksDeno 1.37 ships with a Jupyter notebook integration and improved VSCode and LSP features.Deno 1.37: Modern JavaScript in Jupyter Notebooks

# VSCode v1.82 - Built-in port forwarding

VSCode v1.82で、ngrokのようにローカルサーバーにインターネットからアクセスする機能が追加されました。

Port forwarding local services with VS CodeMake your local web services accessible over the internet with Visual Studio CodePort forwarding local services with VS Code

# Node.js v16 EOL

Node.js v16が2023年9月11日にEOLを迎えました。現在のLTSはv18です。

# Next.Nav



# Ladle v3

Ladle v3 | LadleLadle is a tool designed for building and testing React components through stories. It serves as a seamless alternative to Storybook and is built using Vite and SWC. Our main goal is to ensure it's as swift and user-friendly as conceivable.Ladle v3 | Ladle

LadleはReactに特化し、パフォーマンスを重視したStorybookの代替ツールです。v3ではデフォルトのトランスパイラがSWCに変更、CSS in JSのZero configサポートなどが行われました。