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

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

# Matsuri-tech Frontend Weekly 2023-05-14

# Q&A

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

# Chrome 114

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

Chrome 114'teki yenilikler | Blog | Chrome for DevelopersChrome 114 kullanıma sunulmaya başladı! Chrome 114 kullanıma sunulmaya başladı! text-wrap: Denge ile metin düzenlerini iyileştirmek için Cookies Independent Partitioned State (Bağımsız Bölümlü Duruma Sahip Çerezler)

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

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

Introducing the popover API | Blog | Chrome for DevelopersLearn how to build tooltips, menus, and more with the new popover API.

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

# Safari 16.5

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

Safari 16.5 Release Notes | Apple Developer DocumentationReleased May 18, 2023 — Version 16.5 (18615.2.9)

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

# CSS Nesting

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

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

.nesting {
  color: hotpink;
 
  > .is {
    color: rebeccapurple;
 
    > .awesome {
      color: deeppink;
    }
  }
}

CSS Nesting | CSS and UI | Chrome for DevelopersOne of our favorite CSS preprocessor features is now built into the language: nesting style rules.

# Parcel v2.9.0

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

Parcel v2.9.0Parcel v2.9.0 includes many long requested features, including a brand new resolver with support for package.json "exports" and tsconfig.json features, support for ESM plugins and configs, and local Parcel plugins. It also improves performance with a new default JS minifier powered by SWC, incremental symbol propagation, and improved bundler data structures, and includes a new build performance tracing feature. This is a big release – let's dive in!

# 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を指定できるようになりました。

Deno 1.34: deno compile supports npm packagesThis update augments compatibility with npm and Node.js, incorporates glob support, and enhances TLS certificates with IP addresses. It also brings forth improvements to the configuration, language server, APIs, and updates to V8 and TypeScript.