このページは Cloud Translation API によって翻訳されました。

Chrome 74 の新機能

Pete LePage

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

JavaScript でプライベートクラスフィールドを作成するのがはるかにクリーンになりました。
ユーザーがモーションの少ないエクスペリエンスをリクエストしたタイミングを検出できます。
CSS 遷移イベント
機能が有効かどうかを確認する新しい機能ポリシー API を追加しました。

他にもさまざまな機能があります。

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

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 の新機能についてお知らせします。