Chrome 117

https://developer.chrome.com/blog/new-in-chrome-117/

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;
}

/*   BEFORE-OPEN STATE   */
@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}

Array grouping

配列のグループ化できるObject.groupByとMap.groupByが追加されました。

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

Subgridを利用すると、グリッドを入れ子にして、親行列の行や列に子行列を整列させることが出来ます。Chromeのサポートにより、ほとんどのモダンブラウザで利用できるようになりました。

.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の改善などが行われました。

https://nextjs.org/blog/next-13-5

Nuxt 3.7

https://nuxt.com/blog/v3-7

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

Bun v1.0

https://bun.sh/blog/bun-v1.0

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

また多くのケースで、Node.jsよりも高速に動作します。

Astro v3.0

https://astro.build/blog/astro-3/

Astroは、さまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。

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

Astro Studio

https://studio.astro.build/

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

Biome

https://biomejs.dev/blog/annoucing-biome

いくつか事情で開発が滞っていたRomeを、コアチームがフォークし今後はBiomeとして開発を行なっていくことを発表しました。

Announcing native npm support on Deno Deploy

https://deno.com/blog/npm-on-deno-deploy

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

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

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

https://v0.dev/

Lodash switch to TypeScript, Bun

Lodashが突如すべてのIssueとPRを閉じたため、Lodashが終わったというような誤報がありましたが、Lodashの作者のツイートを見るにTypeScriptとBunに移行する前段階として行なったようです。

https://x.com/jdalton/status/1703136792541798429?s=20

Deno 1.37: Modern JavaScript in Jupyter Notebooks

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

https://deno.com/blog/v1.37

VSCode v1.82 - Built-in port forwarding

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

https://code.visualstudio.com/docs/editor/port-forwarding

Node.js v16 EOL

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

Next.Nav

https://www.next-nav.com/

Next.jsのアプリケーション構造を可視化するVSCode拡張。

Ladle v3

https://ladle.dev/blog/ladle-v3

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