Cybozu Frontend Monthly #44

タイトル画像

イベント概要

サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエキスパートチームのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。

※フロントエンドウィークリーとは

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ #サイボウズフロントエンドウィークリー で実況しています。

zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend

開催日

2024年02月27日

イベントページ

https://cybozu.connpass.com/event/309546/

メンバー

@nakajmg@nakajmg
@sajikix@sajikix
@nus3_@nus3_

コンテンツ

👀 Notable Articles

Interaction to Next Paint becomes a Core Web Vital on March 12

ユーザー体験を計測する Core Web Vitals の指標の 1 つである First Input Delay (FID) が、3 月 12 日から Interaction to Next Paint (INP) に変更されることが web.dev で発表されました。

これまでの FID ではユーザーの最初のインタラクション(クリックなど)が対象でしたが、INP では全てのインタラクションが対象になります。

INP は最近の Web アプリケーションのようにインタラクションが多い画面に対して、ユーザー体験がどうなっているかをより詳細に計測できて良さそうに感じました。

The web just gets better with Interop 2024

ブラウザ間の機能の相互運用性を高める取り組みである「Interop」が 2024 年に取り組む重点分野が公開されています。2024 年は次の 17 の分野に取り組むとしています。

進捗は Interop 2024 Dashboardd から見れます。

Announcing typescript-eslint v7

typescript-eslint v7 がリリースされました。v6 のような大きな BreakingChange は無く、サポートする Node.js や TypeScript、ESlint のバージョン引きあげがメインです。特に ESLint サポートバージョンを v8 系まで上げることで ESLint v9 で削除される API の影響を抑えることを狙っているようです。

むしろ今回のリリースで利用者側が知っておきたい変更は同時に発表された Flat Config Support でしょう。ESLint では次のメジャーバージョンである v9 で Flat Config を default にし、 v10 から旧来の設定ファイルのサポートをしない予定です。このように Flat Config 対応が迫る中、typescript-eslint が Flat Config に対応していなかったために移行を見送っていたユーザーも多かったと思います。

今回 typescript-eslint は Flat Config 対応のために新しく typescript-eslint と言うパッケージを公開しました。今までは @typescript-eslint/parser と @typescript-eslint/eslint-plugin を install して利用していたのに対し、Flat Config 利用下では typescript-eslint パッケージ 1 つで設定が済むようになります。この typescript-eslint パッケージは Flat Config に対応した Config オブジェクトとそれを生成する関数、parser などを提供する wrapper のような役目を果たします。

利用する際は以下のようにtypescript-eslint の提供する configと言うユーティリティ関数で Flat Config に対応したオブジェクトを生成するのが一般的になりそうです。

import eslint from "@eslint/js"
import tseslint from "typescript-eslint"

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended
)

🗓 Monthly Articles

📖 Framework, Library

💬 Languages

🖥 Browsers

🦆 Others

フロントエンドエキスパートチームについて

https://speakerdeck.com/cybozuinsideout/frontendexpert-team