Frontend Weekly 2023-05-31

2023年5月31日

Chrome 114、text-wrap: balance、Popover API、Safari 16.5、CSS Nesting、Parcel v2.9.0、Deno 1.34、Node.js v19 EOL、Astro 2.5、Bun v0.6.0などについて紹介する。

#Frontend weekly

Table of Contents

# Matsuri-tech Frontend Weekly 2023-05-14
# Q&A
# Chrome 114
# text-wrap: balance
# Popover API
# Safari 16.5
# CSS Nesting
# Parcel v2.9.0
# SWC minifier
# Local plugin
# New resolver
# ESM plugins and configs
# Deno 1.34
# Node.js v19 EOL
# Astro 2.5
# Bun v0.6.0

Matsuri-tech Frontend Weekly 2023-05-14

Q&A

普段の業務において、質問を受けた際の回答などで有益そうなものをピックアップしています。今回は面白いネタがなかったので、ありません。

Chrome 114

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

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

text-wrap: balance

text-wrap: balanceを利用すれば、長い文字列をそれぞれの行の長さができるだけ等しくなるように改行できます。

これを利用すれば多言語サイトで、言語毎に見た目を微調整するといったケースを少し回避できるかもしれません。ただし現状Chrome以外でtext-wrapはサポートされていないので、使用できる機会はかなり限られます。

Popover APIを利用すれば、一時的なUI要素、ユーザーの行動を制限しない非モーダルなオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを簡単に実装できます。

モーダルつまり、それ自身が何らかのインタラクションを行うまでユーザーの行動を制限したい場合は、既に主要なブラウザで利用できるdialog要素が推奨されます。ただし、dialog要素はデフォルトで最上位レイヤーに来ないため、最上位に配置されるPopover APIを併用したくなることは多々あるように思います。

Popover APIには、HTML属性を利用した宣言的な方法とJavaScriptを利用する方法が用意されています。HTML属性を利用した方法では次のようにします。

<button popovertarget="my-popover">押すとポップオーバーが表示される</button>

<div id="my-popover" popover>
  <p>これはポップオーバーです。</p>
  <p></p>
</div>

詳しい使い方については、次のChromeの記事などを呼んでください。

https://developer.chrome.com/blog/introducing-popover-api/

現時点では、Chrome及びSafariのTechnology Previewでのみ利用できます。

Safari 16.5

2023年5月18日にSafari 16.5がリリースされました。

https://developer.apple.com/documentation/safari-release-notes/safari-16_5-release-notes

リリースノートが雑すぎるせいか、3件のゼロデイを含む脆弱性や不具合の修正が多いためセキュリティアップデートだと思われているのか、全く話題になっていない気がしますが、1つだけ嬉しい機能追加があったので書いておきます。

CSS Nesting

CSS NestingがSafariでもサポートされました。これでChrome/Edge/SafariにCSS Nestingが出揃いました。

Chromeの際に説明した気がするので詳細は省きますが、次のように記述できます。

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

https://developer.chrome.com/articles/css-nesting

Parcel v2.9.0

2023年5月26日にParcel v2.9.0がリリースされました。かなり大きなリリースです。

https://parceljs.org/blog/v2-9-0/

SWC minifier

デフォルトのminifierがTerserからSWCに変更されました。動作は約7倍高速であり、出力サイズは同等以下とのことです。Terser設定ファイルやオプションをほぼそのまま利用できるようになっているそうです。

Local plugin

プラグインをparcelrc設定ファイルから相対パスで参照できるようになりました。これにより新しいプラグインのプロトタイピングが容易になったので、今後プラグインの開発がより活性化するといいですね。

New resolver

Parcelに欠けていたpackage.jsonの”exports”やtsconfig.jsonの”baseUrl”、“paths”、“moduleSuffixes”のサポートを追加したRust製の新しいリゾルバが導入されました。

ESM plugins and configs

Parcelは、ESMモジュールに対するプラグインと設定ファイルのサポートを追加しました。これにより、プラグインをmjs形式でnpmに公開したり、package.jsonで”type”: “module”を使用してjsファイルでESM構文を有効にしたりできます。また、postcss.config.mjsなどの設定ファイルもサポートされています。

Deno 1.34

2023年5月25日にDeno 1.34がリリースされました。Deno Compileがnpmパッケージをサポートし、npmパッケージを用いたDenoアプリケーションでもDeno Compileによって単一の実行系ファイルが生成できるようになった他、 deno.jsonでglobを指定できるようになりました。

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

Node.js v19 EOL

Node.js v2023年6月1日にEOLを迎えます。Node.js v20に移行するかv18へのダウングレードを検討しましょう。

またNode.js v14も4月30日にEOLを迎えています。Node.js v14から移行する場合は、v15・v17は既にEOL、v16も9月EOLを迎えるので、v18かv20に移行すると良いかもしれません。

Astro 2.5

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

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

Bun v0.6.0

2023年5月16日にBun v0.6.0がリリースされました。

https://bun.sh/blog/bun-v0.6.0

Bun Bundlerが搭載され、bun buildでbundleとminifyができるようになった他、bun build --compileで単一実行可能ファイルを生成できるようになりました。

https://bun.sh/blog/bun-bundler

またBun bundlerは大きなプロジェクトの始まりにすぎず、数ヶ月内にHTTPサーバーやファイルシステムルーターも1つに統合したSuper API”Bun.App”を発表する予定とのことです。