🏄
Matsuri-tech Frontend Weekly 2023-12-08

hrdtbs

hrdtbs

2023年12月8日
ChromeVitestAstroReduxMFW

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

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

# Chrome 120

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

Chrome 120 の新機能  |  Blog  |  Chrome for DevelopersChrome 120 がリリースされました。今回、CloseWatcher API により、クローズ リクエストを処理する際に一貫したエクスペリエンスを実現する、details 要素を使用したアコーディオン パターンの簡単な実装、権限ポリシー違反レポートなど、多くの機能が利用可能になっています。Chrome 120 の新機能  |  Blog  |  Chrome for Developers

# CloseWatcher API

GitHub - WICG/close-watcher: A web API proposal for watching for close requests (e.g. Esc, Android back button, ...)A web API proposal for watching for close requests (e.g. Esc, Android back button, ...) - WICG/close-watcherGitHub - WICG/close-watcher: A web API proposal for watching for close requests (e.g. Esc, Android back button, ...)

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

CloseWatcher sample - StackBlitzBlank starter project for building ES6 apps.CloseWatcher sample - StackBlitz

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

details name property sample - StackBlitzBlank starter project for building ES6 apps.details name property sample - StackBlitz

# 緩和されたCSSネスト

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

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

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

CSS ネストの緩和された構文の更新  |  Blog  |  Chrome for DevelopersChrome 120 で先読みネストが有効になりました。

# Vitest 1.0

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

Release v1.0.0 · vitest-dev/vitestVitest 1.0 is here! This release page lists all changes made to the project during the beta. For the migration guide, please refer to the documentation.    🚨 Breaking Changes Add support for pool ...Release v1.0.0 · vitest-dev/vitest

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

VitestNext generation testing framework powered by ViteVitest

# Astro 4.0

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

Astro 4.0 | AstroAstro 4.0 is here! New APIs, faster builds, redesigned docs, and a unique new Dev Toolbar for Astro that enhances your local dev environment in new and exciting ways.Astro 4.0 | Astro

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関連パッケージのメジャーリリースが行われました。

Release v2.0.0 · reduxjs/redux-toolkitThis major release : Removes the deprecated object syntax from createSlice and createReducer Removes other deprecated options Updates the middleware and enhancers options of configureStore to requ...Release v2.0.0 · reduxjs/redux-toolkit

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