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

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

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

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

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