🏄

Matsuri-tech Frontend Weekly 2023-12-08

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

# Chrome 120

2023年12月5日にChrome 120がリリースされました。

# CloseWatcher API

Androidの戻るボタンやジェスチャー、Escキーが押された場合などにCloseWatcherインスタンスにcloseイベントが通知されます。ユーザーがモーダルやポップアップなどを閉じたいという意思を表示した際に、アプリで適切に処理するためのAPIです。

document.querySelector('#open').addEventListener('click', () => {
  document.querySelector('#sidebar').classList.add('open');

  const watcher = new CloseWatcher();

  watcher.addEventListener('cancel', () => {
    console.log('CloseWatcher cancel event');
  });
  watcher.addEventListener('close', () => {
    document.querySelector('#sidebar').classList.remove('open');
  });
});

window.addEventListener('error', (e) => {
  document.querySelector('#error-console').textContent +=
    e.error.stack + '\n\n';
});

# details要素のname属性

同じname属性で複数のdetails要素を紐づけることで、どれか一つだけを開けるUIを実装できます。

<details name="cookies">
  <summary>Chocolate chip</summary>
  Yum yum chocolate chip.
</details>
<details name="cookies">
  <summary>Snickerdoodle</summary>
   Yum yum snickerdoodle.
</details>
<details name="cookies">
  <summary>Maicenitas</summary>
   Yum yum maicenitas.
</details>
<details name="cookies">
  <summary>Sugar cookies</summary>
   Yum yum sugar cookies.
</details>

# 緩和されたCSSネスト

& や is() を使用しなくてもCSSをネストした状態で記述できるようになりました。

.card {
	h1 {
		font-size: 24px;
	}
}

/* 今まで */
.card {
	& h1 {
		font-size: 24px;
	}
}

# Vitest 1.0

2023年12月5日にVitest 1.0がリリースされました。

Node.js 18及びVite 5が必須に変更。coverageレポートがテストを行なっていないファイルも含めるのがデフォルトに変更、元に戻す場合はcoverage.allをfalseに設定。閾値関連の設定をthresholdsフィールドにまとめて記述するように変更。また古いオプションの削除及び置き換えなどが行われています。移行はさほど簡単そうです。

# Astro 4.0

2023年12月5日にAstro 4.0がリリースされました。

Vite 5.0に対応。開発体験を強化するためにDevToolbarが追加。DevToolbarのInspect機能では、プロパティを表示したり、クリックでコンポーネントを直接エディタで開くといったことが出来ます。さらにはDevToolbarはサードパーティによる拡張が出来るとのことです。i18n Routingが正式サポート。他、View Transition APIやLoggingの改善など。

# Major updates of Redux libraries

2023年12月4日にRedux 5.0、Redux Toolkit 2.0、React Redux 9.0、Reselect 5.0などRedux関連パッケージのメジャーリリースが行われました。

全てのReduxライブラリで、TypeScriptへ書き換え、ESM/CJSに対応、ES2020形式で出力されるようになりました。