Chrome 72 の新機能

ピート ルページ

Chrome 72 では、次の機能がサポートされるようになりました。

他にもいろいろあります。

ピート ルページです。では デベロッパー向け 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 が動作する前に、ユーザー操作による有効化が必要です。 残念ながら、ブラウザによる有効化の処理方法は異なります。

ユーザーがページで操作する前と後の User activation API。

Chrome 72 では、すべてのゲート型 API のユーザー アクティベーションを簡素化するユーザー アクティベーション v2 が導入されています。この仕様は、すべてのブラウザでの有効化を標準化することを目的とした新しい仕様に基づいています。

navigator と MessageEvent の両方に新しい userActivation プロパティがあり、hasBeenActive と isActive の 2 つのプロパティがあります。

  • hasBeenActive は、関連するウィンドウのライフサイクル中にユーザー アクティベーションが発生したかどうかを示します。
  • isActive は、関連するウィンドウのライフサイクルで現在、ユーザーによる有効化が行われているかどうかを示します。

詳しくは、API 間で一貫したユーザー アクティベーションを実現するをご覧ください。

Intl.format を使用して物事のリストをローカライズする

私は Intl API が大好きです。コンテンツを他の言語にローカライズするのにとても便利です。Chrome 72 では、リストのレンダリングを容易にする新しい .format() メソッドが追加されました。他の Intl API と同様に、パフォーマンスを犠牲にすることなく、JavaScript エンジンに負荷を移します。

目的のロケールで初期化してから、format を呼び出します。そうすると、正しい単語と構文が使用されるようになります。また、接続詞を使用できます。これにより、ローカライズされた and と同等の表現が追加されます（美しいオックスフォード カンマを参照）。また、ローカルで or に相当する単語を追加するなど、分離が可能です。追加のオプションを指定することで、さらに多くのことができます。

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 Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびにメール通知が届きます。

Chrome 73 のリリース時に Chrome の新機能をお知らせします