🏄
Matsuri-tech Frontend Weekly 2023-09-18

hrdtbs

hrdtbs

2023年9月18日
MFWTypeScript

社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。

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

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

# Nuxt 3.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

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

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

# Astro Studio

https://studio.astro.build/

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

# Biome

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

# 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ツールをリリースしました。

# 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との互換性の改善なども行われています。

# VSCode v1.82 - Built-in port forwarding

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

# 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

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