Frontend Weekly 2024-04-19
Chrome 124
2024 年 4 月 16 日に Chrome 124 がリリースされました。
Chrome 124 | Release notes | Chrome for Developers
Chrome 124 | Release notes | Chrome for Developers
JavaScript から Shadow DOM を使用する API の追加
今まで、Element.innerHTMLなどに Shadow DOM を含む HTML を記述しても正しく解析されず表示されない問題がありました。
次の API を利用することで Shadow DOM の解析も可能になります。
Element.setHTMLUnsafe()Element.innerHTMLと同様に、要素の内部 HTML を指定された文字列に設定する。
Document.parseHTMLUnsafe()DOMParser.parseFromString()と同様に、文字列を解析して Document を返す。
ただし、これらは Unsafe と付いている通り危険であり、script やイベントハンドラの content 属性など危険な要素や属性の削除を行うサニタイズを行わないため、利用には注意が必要です。
今後、入力のサニタイズを行うバージョンの提供予定とのことです。また、これらの API は Safari などでも利用可能です。
WebSocket Stream API
WebSocket API と Stream API を統合した WebSocket Stream API が追加されました。ブラウザの WebSocket API では、受信メッセージの Back-pressure がサポートされていないため、処理能力を超える量のメッセージを受信した場合、メッセージのバッファでメモリが占拠されたり、CPU 使用率が 100%になってしまう問題があります。
Back-pressure とは、WebSocket の文脈で簡単に言えば、処理が間に合わなければ受信を遅延させることであり、これをユーザーランドで適切に行うことは出来ませんでした。
https://www.reactivemanifesto.org/ja/glossary#Back-Pressure
WebSocket Stream API では、追加コストなく Back-pressure を適用できます。
WebSocket Stream API は次のように記述します。
const wss = new WebSocketStream(WSS_URL);const { readable, writable } = await wss.opened;const reader = readable.getReader();const writer = writable.getWriter();
while (true) { const { value, done } = await reader.read(); if (done) { break; } const result = await process(value); await writer.write(result);}Pageswap event
View Transition など、ナビゲーションによって古いドキュメントが新しいドキュメントに置き換えられる直前に発火するイベントです。一方、Chrome 123 で追加された Pagereveal は View Transition の文脈では紹介されていませんでしたが、これは新しいドキュメントで最初のレンダリングが行われる直前に発火します。
それぞれ、次のように古い/新しい URL を取得できます。
window.addEventListener("pageswap", async (event) => { if (event.viewTransition) { const current = new URL(navigation.currentEntry.url); const destination = new URL(event.activation.entry.url); }});
window.addEventListener("pagereveal", async (event) => { if (event.viewTransition) { const from = new URL(navigation.activation.from.url); const current = new URL(navigation.activation.entry.url); }});URL や viewTransition であることを確認することで、ナビゲーション時に適切な事前準備が出来るようになります。
その他
- PictureInPicture の元のタブに戻るボタンを非表示にするオプション disallowReturnToOpener の追加
- tabindex の指定されていないスクロールコンテナにもフォーカスが可能に。今まで、tabindex が指定されておらず、内部にフォーカス可能な要素がなければ、キーボードユーザーは一度キーボードから手を放す必要があった。フォーカスさせたくない場合は、明示的に tabindex に負の数を指定する必要がある。
- ユニバーサルインストールによって、PWA の条件を満たさなくても、任意のページをインストールできるようになった。
writingsuggestions属性。ブラウザによる入力要素への書き込みの提案をコントロールできる。いくつかのブラウザで提供がはじまっている AI による入力支援機能を無効化した場合は、これを false にしておく必要がある。autoComplete 属性など、このようなブラウザの機能は開発者が入力要素に HTML 外でバリデーションをかけている場合、疑似的な select 要素などで問題になる。- 継承されるため、個別に付ける必要はない。
- ドキュメントのレンダリングブロック。
<link rel="expect" href="#id">のように指定すると、指定された ID の要素が完全に解析されるまで、レンダリングをブロックできる。これにより、重要なコンテンツの解析が終了するまでレンダリングが遅延でいるため、最初の描画に一貫性を持たせられる。 - WebGPU が ServiceWorker および SharedWorker をサポート。これにより例えば、タブ間でリソースを共有できるようになる。
Biome 1.7
2024 年 4 月 15 日に Biome 1.7 がリリースされました。
次の変更がありました。
biome migrate eslintとbiome migrate prettierの追加- ESLint と Prettier の設定から Biome にマイグレーションできるコマンド
biome check —-stagedの追加- Git で staging されているファイルのみを対象に実行できるコマンド
pnpm v9
pnpm v9 が 2024 年 4 月 18 日にリリースされました。
https://github.com/pnpm/pnpm/releases/tag/v9.0.0
次の変更がありました。
- Node.js v16 のサポート終了
- dedupe-injected-deps がデフォルトで有効化
- Inject された依存関係が、可能な限りワークスペースからシンボリックリンクされるようになりました。例えば、他の workspace を依存関係に指定した場合、その workspace でビルドを実行した度に、インストールを実行して node_modules にコピーさせる必要がありましたが、これがシンボリックリンクで解消されます。
- enable-pre-post-scripts がデフォルトで有効化
- package.json の scripts に記載する npm scripts では、pre/post プレフィックスを付けたコマンドは、付いていないコマンドの前後で実行されます。
- package.json の packageManager フィールドの確認
- 指定と異なるパッケージマネージャーや pnpm のバージョンを利用している場合、処理が行われなくなります。
- packageManager フィールドは、corepack などが利用しています。
- Git リポジトリからサブディレクトリのみをインストール可能に。
pnpm add github:user/repo#path:packages/foo
Farm v1
Most powerful, fastest, and most stable をうたう Rust 製ビルドツールの Farm v1 がリリースされました。公開している 1000 個の React コンポーネントを利用したベンチマークテストでは、Vite の 10 倍高速であるとのこと。
https://github.com/farm-fe/farm/releases/tag/v1.0
Farm は、Vite のプラグインエコシステムと互換性があります。元々 Rollup 形式のプラグインシステムを採用していたこともあり、早く本番稼働できるように Vite 互換性を持つことを選択したようです。
Make Farm compatible with most Vite plugins #622
またキャッシュを利用した Incremental build、Lazy compilation がデフォルトで利用している他、開発と本番のビルドで全く同じ戦略を利用するため Vite の欠点も解消されます。
Vite では ESBuild と Rollup を使い分けているため、開発環境と本番環境で差が生まれる可能性があることや、複数のツールを使うことによるパフォーマンスの低下や複雑度が増加する問題があります。
Vite は、この問題を解決するために Rust 製の Rollup 互換の Rolldown を現在開発中であり、Farm と多くの部分で被っているため、どのような差が生まれるのかは気になります。
Panda CSS the origin story
Panda CSS がなぜ、どのように作られたのか。
Chakura UI がナルトから来ているように、作者は基本的にアニメや漫画から名前を付けているらしく、Panda CSS はカンフー・パンダ由来とのこと。
Others
Vitest UI が便利。モジュール同士の依存関係を視覚的に確認できる機能があったりする。
NOT A HOTEL の Cloludflare Workers 導入事例。AI チャットボットに利用している。
Cloludflare Workers 導入でデプロイ時間を大幅改善。リリース頻度も二週に一度 → 毎日へ。
リファクタリングに対してポジティブなイメージをチームに持ってもらうために、この辺りの考えは必要。
“リファクタリングはチームのためにするものなので、チームがどういうリファクタリングを求めているのかの認識を揃えておく必要があります” -https://zenn.dev/mike/articles/4542d9f51503e3#周囲とコミュニケーションをとる
“リファクタリングしたくなったら、影響範囲や今後の開発にメリットがあるかを、実装する前に考えてください。実装中にリファクタリングできるポイントに気付いた場合は、その作業が終わってから…” - https://zenn.dev/mike/articles/4542d9f51503e3#よく計画を立てる
ついに App Router をサポートしていないの CSS-in-JS ライブラリは Emotion だけに…
JSR の仕組みと、サイトの構成について。かなり詳細に書かれている。DB は Postgres で API は Rust、アプリケーションは fresh で作られている。
Playwright 公式サイトにかかれている Best Practices の翻訳
Best Practice の他、Playwright のテストの考え方や、知っておいた方が良い機能なども紹介されているので、Playwright を触りたくなったら読み込んでおくと良い。
上の記事で紹介されていないが、UI Mode も存在を知っておくと捗る。
文章の折り返しは日英混ざっていると困難になる。CSS の進化によって細かなコントロールが出来るようになった。
文章の折り返し指定の CSS 最新版 - ICS MEDIA
記事では、次の記述をおすすめしている。
body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */}Figma 公式による Codegen 特集
Codegen Plugins (And Other Tips) for Automating Design to Code | Figma Blog
4 秒以上の待機は Spinners よりも Progress Bar を使った方がいいという話
Progress Bars vs. Spinners: When to Use Which
Moonbit はネタが全くないとかでなければ調べない