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

Chrome 74 の新機能

Pete LePage

Chrome 74 では、次のサポートが追加されました。

JavaScript でプライベートクラスフィールドを作成する操作が大幅に簡素化されました。
ユーザーがモーションエクスペリエンスの低減をリクエストしたことを検出できます。
CSS 遷移イベント
機能が有効になっているかどうかを確認する新しい機能ポリシー API が追加されています。

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

ピートルページです。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 フィールドは単なる private です。クラス内でアクセスできますが、クラス本体外では使用できません。

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

公開クラスと非公開クラスについて詳しくは、クラスフィールドに関する Mathias の投稿をご覧ください。

`prefers-reduced-motion`

一部のユーザーから、視差スクロール、ズーム、その他のモーション効果を表示した際に、気分が盛り上がるという報告が寄せられています。この問題に対処するために、多くのオペレーティングシステムでは、可能な限りモーションを減らすオプションを提供しています。

Chrome では、メディアクエリレベル 5 の仕様の一部であるメディアクエリ prefers-reduced-motion が提供されるようになりました。これにより、このオプションがオンになったことを検出できます。

@media (prefers-reduced-motion: reduce)

ちょっとした動作で注意を引く登録ボタンがあるとします。新しいクエリでは、ボタンだけの動作を停止できます。

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

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

Tom の記事「Move Ya!ユーザーが Reduced-motion を好むのであれば、そうでない可能性もあります。

CSS の `transition` イベント

CSS Transitions の仕様では、遷移がキューに追加されたとき、開始されたとき、終了したとき、またはキャンセルされたときに遷移イベントを送信する必要があります。これらのイベントはしばらく前から他のブラウザでサポートされています

これまで 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 日）で、素晴らしい新機能をたくさん開催する予定です。参加できない場合は、すべてのセッションがライブ配信されます。終了後は、Chrome Developers YouTube チャンネルで視聴できます。

最新の動画をご覧になりたい場合は、Chrome Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびに、メール通知が届きます。

Chrome 75 のリリースと同時に Chrome の新機能をお知らせします