Matsuri-tech Frontend Weekly 2023-09-18

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

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

# Chrome 117

Nieuw in Chroom 117 | Blog | Chrome for DevelopersChrome 117 wordt nu uitgerold! Met drie nieuwe CSS-functies die het eenvoudig maken om vloeiende in- en uitstapanimaties toe te voegen, array-groepering om datasets van hogere orde te berekenen, maakt devtools lokale overschrijvingen eenvoudiger en er is nog veel meer.

https://developer.chrome.com

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

子行列内の位置を揃えたいようなケースで有用です。