必知事項は次のとおりです。
- ブラウザに組み込まれた
URLPattern
により、ルーティングがさらに簡単になります。 - Eye Dropper API には、色を選択するための組み込みツールが用意されています。
- 新しいオリジン トライアルでは、短縮された UA 文字列の受信を今すぐオプトインできます。
- PWA Summit の動画はすべてオンラインです。
- 他にもたくさんあります。
自宅で撮影をしている Pete LePage です。Chrome 95 のデベロッパー向け新機能を紹介します。
URLPattern
を使用したルーティング
ほぼすべてのウェブアプリは、なんらかの方法でルーティングに依存しています。これは、ディスク上のファイルへのパスをマッピングするサーバー上で実行されるコードと、URL が変更されたときに DOM を更新するシングルページ アプリ内のロジックです。URLPattern
は、ルーティング パターンの構文を標準化する新しいウェブ プラットフォーム API です。
既存のフレームワークを基盤として構築されており、一般的なルーティング タスクの実行が簡単になります。たとえば、完全な URL または URL パス名と照合し、トークンとグループの一致に関する情報を返します。
Express、Ruby on Rails、path-to-regexp で使用されているルーティング構文に習熟している場合は、見覚えがあるでしょう。
これを使用するには、新しい URLPattern()
を作成し、パターン マッチングに使用する詳細を指定します。パターンには、ワイルドカード、名前付きトークン グループ、正規表現グループ、グループ修飾子を含めることができます。
const p = new URLPattern({
protocol: 'https',
hostname: 'example.com',
pathname: '/:folder/*/:fileName.jpg',
search: '*',
hash: '*',
});
たとえば、Google ドキュメントで使用される URLPattern
を見てみましょう。ファイルの kind
、ファイル ID
、ファイルを開く mode
を指定します。次に、パターンを使用するために、test()
または exec()
を呼び出します。
const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';
const pattern = new URLPattern({
pathname: '/:kind/d/:fileID/:mode',
hash: '*',
});
const r = pattern.exec(url);
// {
// "pathname": {"groups": {
// "fileID": "1s...5c",
// "kind": "document",
// "mode": "edit"
// }, ...},
// "hash": {"groups": {"0":"heading=h.8...c"}, ...},
// ...
// }
Chrome と Edge バージョン 95 以降では、URLPattern
がデフォルトで有効になっています。Node などのブラウザや環境でまだサポートされていない場合は、urlpattern-polyfill ライブラリを使用できます。
詳しくは、Jeff の記事「URLPattern によってウェブ プラットフォームへのルーティングが可能になる」をご覧ください。
Eye Dropper API を使用した色の選択
私がこれまで使ったほぼすべてのデザインアプリにスポイトツールが付属しており、色が何であるかを簡単に把握できるようになっています。一部のブラウザでは、スポイト機能が <input type=color>
に組み込まれていますが、これは理想的ではありません。
Microsoft のメンバーが実装したアイドロッパー API は、その機能をウェブに導入したものです。これを使用するには、新しい EyeDropper()
インスタンスを作成して、そのインスタンスで open()
を呼び出します。
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}
他の多くの最新のウェブ API と同様に、非同期的に動作するため、メインスレッドをブロックしません。ユーザーが目的の色をクリックすると、その色で解決されます。
PWA サミット
今月初めに PWA Summit に参加されましたか?
多くの方が PWA について語り、その経験を共有するのを見て、感激しました。見逃した方は、動画がすべて公開されていますので、PWASummit.org または PWA Summit の YouTube チャンネルをご覧ください。
ユーザー エージェントの情報量削減のオリジン トライアル
ユーザー エージェントの情報量削減は、ユーザー エージェント文字列に含まれる情報を、ブラウザのブランドと重要なバージョン、パソコンまたはモバイルの区別、実行されているプラットフォームのみに限定することで、受動的なフィンガープリント サーフェスを減らす取り組みです。
Chrome 95 以降では、新しいオリジン トライアルが導入され、短縮された UA 文字列の受信を今すぐオプトインできます。これにより、短縮された UA が Chrome のデフォルトの動作になる前に、問題を検出して修正できます。
変更は多数のリリースで段階的に適用されますが、準備とテストに必要なすべてのものをすぐに利用できます。
詳細とタイムラインについては、developer.chrome.com の User-Agent Reduction オリジン トライアルの投稿をご覧ください。
など多数
他にもたくさんあります。
- Storage Foundation API を使用している場合、新しいアクセス ハンドルのオリジン トライアルを利用できます。
- WebAssembly が例外処理のサポートを提供するようになりました。これにより、例外がスローされたときにコードで制御フローを中断できます。
- Chrome 100 は来年リリースされます。そこで、2 桁を超える数字を処理できるコードを用意する必要があります。
関連情報
ここでは、重要なハイライトの一部についてのみ説明します。Chrome 95 で追加される変更点については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(95)
- Chrome 95 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 95)
- JavaScript の新機能(Chrome 95)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。
Chrome 96 のリリースと同時に Chrome の新機能をお伝えします