こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。
はじめに
サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。
今回は、2024/6/18 の Frontend Weekly で取り上げた記事や話題を紹介します。
取り上げた記事・話題
feat: Add support for TypeScript config files
ESLint の設定ファイルを TS でかけるようにする RFC がマージされました。
TS で設定ファイルを書く場合は読み込む際にトランスパイルする必要があり、これには UnJS のパッケージの１つである jiti が利用される予定のようです。(2024/06/18 現在は draft PR なので今後変更される可能性があります。)
Maybe Don’t Name That Landmark
ページごとに 1 つしか設置できない WAI-ARIA のランドマークにアクセシブルな名前は不要であると言う記事です。
基本的に <header>, banner, <main>, <footer>, contentinfo はページごとに 1 つしか配置できないので、文脈と一意性だけでランドマークを識別できます。このようなランドマークにアクセシブルな名前をつけてしまうと、ローカライズのリスクとなったりノイズになったりする可能性すらあります。例外として <header> の中に複数の <nav> があるような場合は、ランドマークが一意に定まらないので名前が必要になります。
The Goldilocks zone: Achieving an accessible digital future in the AI age | Deque
AI を活用してアクセシビリティの問題を検知する取り組みについてまとめた記事です。
アクセシビリティのテストで AI を利用したことで、次のようなアクセシビリティ上の問題を検知できたとしています。
- table のマークアップが正しくない
- キーボードで操作できないボタン
- コントラストを満たさない画像に埋め込まれたテキスト
もちろん完璧ではないため人間のチェックも必要ですが、全て手動試験にするのではなく、適度にバランスを取って AI を活用すると良いと結論づけています。
Turborepo 2.0
Turborepo 2.0 がリリースされました。大きな変更点として以下のようなものがあります。
- ターミナル UI の改良
- ウォッチモードの追加
- ドキュメントが新しくなる
- ライセンスを MIT に変更
- 2 年間の LTS ポリシーの追加
今話題となっている React 19 の Suspense の変更内容を詳しく見てみました
React で複数の非同期処理を行うコンポーネントを並列に Suspense で囲うと、React 18 では並列実行されていましたが、React 19 では直列実行に変わっているという内容です。
この挙動変更により場合によってはパフォーマンスが下がってしまう可能性があります。この問題については以下の一連のポストもわかりやすいです。
このポストでも触れられているように、この変更は不要な再レンダリングを防ぐためのものでしたが、React 側の想定よりも Render as You Fetch パターンを使っていないユーザーも多く問題になったようです。
Discussion