Chrome 72 では、以下をサポートしました。
- JavaScript でパブリック クラス フィールドを作成するのがはるかに簡単になりました。
- ページが有効になっているかどうかは、新しい User Activation API で確認できます。
Intl.format()API を使用すると、リストのローカライズが大幅に容易になります。
他にもさまざまな機能があります。
Pete LePage と申します。Chrome 72 のデベロッパー向けの新機能について詳しく見てみましょう。
変更履歴
ここでは主な変更点の一部のみを説明しています。Chrome 72 のその他の変更については、以下のリンクをご覧ください。
公開クラス フィールド
私の最初の言語は Java でしたが、JavaScript を学ぶのは少し大変でした。クラスを作成したのはまたは継承ですか？公開プロパティと非公開プロパティ、公開メソッドと非公開メソッドはどうなりますか？JavaScript の最近の更新の多くは、オブジェクト指向プログラミングを大幅に容易にします。
コンストラクタ、ゲッター、セッター、静的メソッド、パブリック プロパティを備え、期待どおりに動作するクラスを作成できるようになりました。
Chrome 72 に同梱されている V8 7.2 により、パブリック クラス フィールドをクラス定義で直接宣言できるようになりました。これにより、コンストラクタで宣言する必要がなくなりました。
class Counter {
_value = 0;
get value() {
return this._value;
}
increment() {
this._value++;
}
}
const counter = new Counter();
console.log(counter.value);
// → 0
counter.increment();
console.log(counter.value);
// → 1
非公開クラス フィールドのサポートは現在開発中です。
詳しくは、Mathias のクラス フィールドに関する記事をご覧ください。
User Activation API
ページが読み込まれるとすぐにサイトが音声を自動的に再生していた時代を覚えていますか？慌ててミュートキーを押すか、どのタブだったかを特定して閉じます。 そのため、一部の API では、機能させる前にユーザー操作による有効化が必要になります。残念ながら、ブラウザによって有効化の処理方法が異なります。
Chrome 72 では、すべてのゲート付き API のユーザー アクティベーションを簡素化する User Activation v2 が導入されています。これは、すべてのブラウザで有効化の仕組みを標準化することを目的とした新しい仕様に基づいています。
navigator と MessageEvent の両方に新しい userActivation プロパティがあり、hasBeenActive と isActive の 2 つのプロパティがあります。
hasBeenActiveは、関連付けられたウィンドウがライフサイクルでユーザーがアクティブになったことがあるかどうかを示します。isActiveは、関連付けられたウィンドウのライフサイクルで現在ユーザーがアクティブになっているかどうかを示します。
詳しくは、API 間で一貫したユーザー アクティベーションを実現するをご覧ください。
Intl.format を使用して物体のリストをローカライズする
Intl API は、コンテンツを他の言語にローカライズする際に非常に役立ちます。Chrome 72 では、リストのレンダリングを容易にする新しい .format() メソッドが導入されています。他の Intl API と同様に、パフォーマンスを犠牲にすることなく、負荷を JavaScript エンジンに移します。
目的のロケールを使用して初期化してから format を呼び出すと、正しい単語と構文が使用されます。連結も可能で、and に相当するローカライズされた接続詞を追加できます（美しいオックスフォード カンマも追加できます）。論理和演算（「または」）を追加して、論理和演算を実行できます。さらに、追加オプションを指定することで、さらに多くのことを実行できます。
const opts = {type: 'disjunction'};
const lf = new Intl.ListFormat('fr', opts);
lf.format(['chien', 'chat', 'oiseau']);
// → 'chien, chat ou oiseau'
lf.format(['chien', 'chat', 'oiseau', 'lapin']);
// → 'chien, chat, oiseau ou lapin'
詳しくは、Intl.ListFormat API に関する投稿をご覧ください。
その他
これらは、デベロッパー向けの Chrome 72 の変更のほんの一部です。もちろん、他にも多くの変更があります。
- Chrome 72 では、仕様に合うように
Cache.addAll()の動作が変更されました。以前は、同じ呼び出しで重複するエントリがあった場合、後続のリクエストによって最初のエントリが上書きされていました。仕様に準拠するため、重複するエントリがある場合は、InvalidStateErrorで拒否されます。 - リクエスト URL が Service Worker と同じオリジンにある限り、ファビコンのリクエストは Service Worker によって処理されるようになりました。
登録
最新の動画情報を受け取るには、Chrome デベロッパーの YouTube チャンネルにチャンネル登録してください。新しい動画が公開されるとメール通知が届きます。
Pete LePage と申します。Chrome 73 がリリースされ次第、Chrome の新機能についてお知らせします。