Chrome 74 の新機能

Pete LePage

Chrome 74 では、以下をサポートするようになりました。

他にもたくさんの機能があります。

Pete LePage と申します。Chrome 74 のデベロッパー向けの新機能について詳しく見てみましょう。

変更履歴

ここでは主なハイライトの一部のみを説明しています。Chrome 74 のその他の変更については、以下のリンクをご覧ください。

プライベート クラス フィールド

クラス フィールドを使うと、インスタンス プロパティを定義するためだけのコンストラクタ関数が不要になるので、クラス構文がシンプルになります。Chrome 72 では、パブリック クラス フィールドのサポートが追加されました。

class IncreasingCounter {
  // Public class field
  _publicValue = 0;
  get value() {
    return this._publicValue;
  }
  increment() {
    this._publicValue++;
  }
}

また、非公開クラス フィールドは現在開発中であるとお伝えしました。Chrome 74 では プライベートクラスフィールドが使えるようになりました新しいプライベート フィールドの構文はパブリック フィールドと似ていますが、#（番号記号）を使用してフィールドをプライベートにします。# はフィールド名の一部と考えることができます。

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

private フィールドは非公開です。クラス内ではアクセスできますが、クラス本体の外では使用できません。

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

パブリック クラスとプライベート クラスの詳細については、Mathias のクラス フィールドに関する投稿をご覧ください。

prefers-reduced-motion

視差スクロールやズームなどのモーション エフェクトを見て、乗り物酔いのような症状を感じるユーザーもいます。この点に対処するため、多くのオペレーティング システムでは、可能な場合にモーションを軽減するオプションを提供しています。

Chrome は、このオプションがオンになっていることを検出できるメディアクエリ prefers-reduced-motion（Media Queries Level 5 仕様の一部）を提供します。


@media (prefers-reduced-motion: reduce)

わずかなモーションでユーザーの注意を引く登録ボタンがあるとします。新しいクエリを使うと、このボタンだけモーションを停止することができます。

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

Tom の記事「Move Ya!ユーザーが prefers-reduced-motion を指定していれば動かない方がいいをご覧ください。

CSS transition イベント

CSS トランジション仕様では、トランジションがキューに格納されたとき、開始されたとき、終了したとき、キャンセルされたときに、トランジション イベントを送ることが求められます。これらのイベントは、他のブラウザではしばらく前からサポートされています。

これまで、Chrome ではサポートされていませんでした。Chrome 74 では、次のイベントをリッスンできるようになりました。

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

これらのイベントをリッスンすることで、遷移の実行時に動作をトラッキングまたは変更できます。

Feature Policy API の更新

フィーチャー ポリシーを使用すると、API などのウェブ機能を指定して、それを有効または無効にしたり、動作を変更したりできます。これは、Feature-Policy ヘッダーまたは iframe の allow 属性を使用して行います。

Feature-Policy: geolocation 'self'

<iframe ... allow="geolocation self">
</iframe>

Chrome 74 では、有効になっている機能を確認するための新しい API セットが導入されています。

  • document.featurePolicy.allowedFeatures() を使用して、許可されている機能のリストを取得できます。
  • 特定の機能が許可されているかどうかは document.featurePolicy.allowsFeature(...) で確認できます。
  • また、document.featurePolicy.getAllowlistForFeature() を使用して、指定された機能を許可しており、現在のページで使われているドメインのリストを取得できます。

詳しくは、機能ポリシーの概要に関する投稿をご覧ください。

その他

これらはデベロッパー向け Chrome 74 の変更のほんの一部であり、もちろん他にも多くの変更があります。個人的には、KV Storage に非常に期待しています。これは、オリジン トライアルとして利用可能な、超高速の非同期 Key-Value ストレージ サービスです。

Google I/O がまもなく開催されます。

Google I/O まであと数週間（5 月 7 ～ 9 日）です。Google からたくさんの新機能が発表されます。参加できない場合でも、すべてのセッションはライブ配信され、後日 Chrome Developers YouTube チャンネルで視聴できます。

登録

最新の動画情報を受け取るには、Chrome デベロッパーの YouTube チャンネルにチャンネル登録してください。新しい動画が公開されるとメール通知が届きます。

Pete LePage と申します。Chrome 75 がリリースされ次第、Chrome の新機能についてお知らせします。