Chrome 63 の新機能

Pete LePage

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

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

変更内容の完全なリストについては、Chromium ソース リポジトリの変更リストを確認する。

動的なモジュールのインポート

JavaScript モジュールのインポートは非常に便利ですが、静的であるため、ランタイム条件に基づいてモジュールをインポートすることはできません。

幸いなことに、Chrome 63 では新しい動的インポート構文が導入されています。これにより、実行時にモジュールとスクリプトにコードを動的に読み込むことができます。必要に応じてのみスクリプトを遅延読み込みできるため、アプリケーションのパフォーマンスを向上させることができます。

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

ユーザーがページに初めてアクセスしたときにアプリケーション全体を読み込むのではなく、ログインに必要なリソースを取得できます。最初の読み込みは小さく、非常に高速です。ユーザーがログインしたら、残りのデータを読み込み、準備完了です。

非同期イテレータとジェネレータ

async 関数でなんらかの反復処理を行うコードを記述するのは面倒です。実際、面接で私が取り上げるお気に入りのコーディング問題の中核部分でもあります。

非同期ジェネレータ関数と非同期反復処理プロトコルにより、ストリーミング データソースの使用や実装が効率化され、コーディングの問題が大幅に軽減されます。

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

非同期イテレータは、for-of ループで使用できます。また、非同期イテレータ ファクトリを使用して独自のカスタム非同期イテレータを作成することもできます。

オーバースクロールの動作

スクロールはページを操作する最も基本的な方法の 1 つですが、パターンによっては対処が難しい場合があります。たとえば、ブラウザのプルして更新機能では、ページの上部を下にスワイプすると強制再読み込みが行われます。

以前、ページ全体を更新した場合。

その後、コンテンツのみを更新します。

場合によっては、この動作をオーバーライドして独自の操作を提供することもあります。これが Twitter のプログレッシブ ウェブアプリの機能です。プルダウンしたときに、ページ全体を再読み込みするのではなく、新しいツイートを現在のビューに追加するだけです。

Chrome 63 では、CSS の overscroll-behavior プロパティがサポートされるようになりました。これにより、ブラウザのデフォルトのオーバーフロー スクロール動作を簡単にオーバーライドできるようになります。

次のように使用することができます。

しかも、overscroll-behavior はページのパフォーマンスに悪影響を与えません。

権限の UI の変更

ウェブのプッシュ通知は大好きですが、ページ読み込み時に背景情報なしで許可を求めるサイトが多数あることにイライラしています。私は一人ではありません。

すべての権限リクエストの 90% は無視されるか、一時的にブロックされます。

Chrome 59 では、ユーザーがリクエストを 3 回拒否した場合に権限を一時的にブロックすることで、この問題に対処しています。m63 では、Android 版 Chrome の権限リクエストがモーダル ダイアログになります。

これはプッシュ通知だけでなく、すべての権限リクエストに適用されます。適切なタイミングとコンテキストで権限をリクエストすると、ユーザーが権限を付与する可能性が 2.5 倍になることがわかりました。

その他

これらは、Chrome 63 のデベロッパー向けの変更のほんの一部です。もちろん、他にも多くの変更があります。

  • Promise インスタンスで finally が使用可能になり、Promise がフルフィルまたは拒否された後に呼び出されます。
  • 新しい Device Memory JavaScript API を使用すると、ユーザーのデバイスの RAM の合計容量に関するヒントを得ることで、パフォーマンスの制約を把握できます。実行時にエクスペリエンスを調整できるため、低価格デバイスでの複雑さを軽減し、ユーザーの不満を軽減してエクスペリエンスを向上させることができます。
  • Intl.PluralRules API を使用すると、特定の数値と言語にどの複数形を適用するかを指定することで、特定の言語の複数形を理解するアプリケーションを構築できます。序数を入力する際にも役立ちます。

YouTube チャンネルにチャンネル登録すると、新しい動画が公開されるたびにメール通知が届きます。

Chrome 64 がリリースされたら すぐにお知らせします