Chrome 72 リリースノート要約

Google Chrome 72 がリリースされました。要約します。

参考資料

• Chrome Releases: Stable Channel Update for Desktop
• New in Chrome 72  |  Web  |  Google Developers
• Deprecations and removals in Chrome 72  |  Web  |  Google Developers
• What's New In DevTools (Chrome 72)  |  Web  |  Google Developers

パブリッククラスフィールド

class Counter {
  // ×: Uncaught SyntaxError: Unexpected token =
  _value = 0;

  constructor() {
    // ○
    this._value = 0;
  }

  get value() {
    return this._value;
  }

  increment() {
    this._value++;
  }
}

今までの Chrome では、上記のようにクラスにプロパティを宣言することが出来ませんでした。

代わりに、コンストラクタで宣言する必要があります。

これは、 JavaScript のクラスがただのシンタックスシュガーであり、実際は下記のようなコードに変換されるためです。

function Counter() {
  this._value = 0;
}
// getter は違う風に展開されるかも
Counter.prototype.value = function() {
  return this._value;
}
Counter.prototype.increment = function() {
  this._value++;
}

クラスと言っているだけで、 JavaScript 上はただの Object です。

今回のアップデートで V8 エンジンがバージョン 7.2 になり、下記のように記述出来るようになりました。

class Counter {
  _value = 0;

  get value() {
    return this._value;
  }

  increment() {
    this._value++;
  }
}

もちろんアクセサはないので console.log(counter._value) として値に直接アクセス出来てしまいますが、プライベートフィールドに関しては現在作業中とのことです。

class Counter {
  // キモい...
  #value = 0;
}

const counter = new Counter();
// SyntaxError
counter.#value

クラスフィールドの詳細についてはこの記事に詳細があります。

(まあ、このあたりは babel のコンパイルを使っている場合は気にしなくても良いレベルですね)

User Activation API

最近のブラウザは、 Web Audio API で音声を再生するために必ずユーザの操作が必要でした（ミュートを解除ボタン、など）。これは onclick などのユーザ起因のイベントを受信した時でないと audio.play() 関数を実行出来ないという仕組みです。

Chrome 72 からはブラウザ間で統一されたインターフェースとして、 navigator.userActivation 及び MessageEvent.prototype.userActivation プロパティが実装され、このフレーム内でユーザがアクティブ(操作している)かどうかを一貫性をもって確認することが出来るようになりました。

また、同一オリジン内の別の window でもアクティブ状態が伝搬するようになるなど、いくつかのフレームまたぎの問題を解決し始めています。

これは新しい HTML 仕様に基づいています。

リストを Intl.format でローカライズ

リストを表現する時、言語によってその表現方法が違います。 a, b, c and d や a、b、cそしてd などのような形です。

これを適切にフォーマット出来るようになりました。

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 詳細はこちら。

58 のセキュリティフィックス

たくさんあります。クリティカルなものもあるため、いつもどおり更新を推奨しています。

開発者ツールの更新

• パフォーマンスメトリクスの可視化で、意味がある描画タイミングについて Performance パネルに表示されるようになりました。
• DOM Tree でテキストに hover した時に、ビューポートのテキストをハイライトするようになりました。
• 選択した DOM node を JS で選択するためのクエリを Copy JS path でコピー出来るようになりました。
• Audits パネルで利用を確認した JS ライブラリが一覧で表示されるようになりました(全ては表示されないこともあります)。

Deprecated

• ページを unload する時に window.open() が使えなくなります。ポップアップ対策。
• HTTP-Based Public Key Pinning(HPKP) は一般に広まらず、逆にセキュリティリスクも含まれるため、削除されます。
• FTP 通信によるリソースのレンダリングはセキュアでないため削除されます。
• TLS 1.0, TLS 1.1 が Deprecated になります。 Chrome 81(2020 年初め頃) で完全に使えなくなる予定です。今後は TLS 1.2, または TLS 1.3 を使った方が良いでしょう。

今後の API アップデート予定 : Shape Detection API

Android の FaceDetector や iOS の CIDetector などのハードウェアモジュールを利用して、画像やカメラの映像から 顔認識, バーコード認識, テキスト認識 を行える統一した API が実装中です。ブラウザから使えるようになれば、より一般に広まることでしょう。