Chrome 74 の新機能

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-motionMedia 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!ユーザーが「モーションの低減」を希望している場合は、この処理を行わない場合もあります。

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 の変更のほんの一部です。もちろん、他にも多くの変更があります。個人的には、オリジン トライアルとして利用可能な、超高速の非同期 Key-Value ストレージ サービスである KV Storage に非常に期待しています。

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

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

登録

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

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