Chrome 63 の新機能

ピート ルページ

他にもいろいろあります。

ピート ルページです。では、Chrome 63 のデベロッパー向けの新機能を詳しく見ていきましょう。

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

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

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

幸いなことに、Chrome 63 では新しい動的インポート構文を使用して変更が加えられています。これにより、実行時にモジュールやスクリプトにコードを動的に読み込むことができます。これを使用すると、必要なときにのみスクリプトを遅延読み込みできるため、アプリケーションのパフォーマンスを改善できます。

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

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

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

async 関数を使用してなんらかの反復処理を行うコードの記述は煩雑です。私がインタビューをコーディングする際に最もよく使う質問の核心部分です。

今では、async generator functionsと非同期イテレーション プロトコルにより、ストリーミング データソースの利用や実装が効率化され、コーディングに関する疑問が軽減されます。

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 ループで使用できます。また、非同期イテレータ ファクトリを介して独自のカスタム非同期イテレータを作成することもできます。

オーバースクロール動作

スクロールは、ページを操作するための最も基本的な方法の一つですが、特定のパターンは扱いにくい場合があります。たとえば、ブラウザの場合、下にスワイプして更新する機能があり、ページの上部を下にスワイプするとハードリロードされます。

変更前、ページ全体が更新されます。

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

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

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

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

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

権限 UI の変更

ウェブプッシュ通知は大好きですが、背景情報なしでページ読み込みの権限をリクエストするサイトの数が多いのは実にイライラしています。私は一人ではありません。

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

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

なお、これはプッシュ通知だけではなく、すべての権限リクエストが対象になります。適切なタイミングと状況に応じて権限をリクエストすると、ユーザーが権限を付与する可能性が 2.5 倍高くなります。

など多数

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

  • finally が Promise インスタンスで使用可能になり、Promise が実行または拒否された後に呼び出されます。
  • 新しい Device Memory JavaScript API を使用すると、ユーザーのデバイスの RAM の合計容量に関するヒントが提供され、パフォーマンスの制約を把握しやすくなります。実行時にエクスペリエンスを調整してローエンド デバイスの複雑さを軽減し、ユーザーに不満を抱かせることなく優れたエクスペリエンスを提供できます。
  • Intl.PluralRules API を使用すると、特定の数字と言語に適用される複数形を示すことで、特定の言語の複数形を理解するアプリを構築できます。序数でも使用できます。

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

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