Chrome 55 の新機能

YouTube で見る

  • asyncawait を使用すると、メインスレッドをブロックすることなく、Promise ベースのコードを同期コードのように記述できます。
  • ポインタ イベントは、すべての入力イベントを処理する統一された方法を提供します。
  • ホーム画面に追加したサイトには、永続ストレージの権限が自動的に付与されます。

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

Pete LePage と申します。デベロッパー向け Chrome 55 の新機能をご紹介します。

ポインタ イベント

以前は、ウェブ上のものを指し示すのは簡単でした。マウスを動かして ボタンを押すだけの簡単なゲームですしかし、ここではあまりうまくいきません。

タッチイベントは有用ですが、タッチマウスをサポートするには、次の 2 つのイベントモデルをサポートする必要があります。

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

Chrome では、PointerEvents をディスパッチすることにより、統一された入力処理が可能になりました。

elem.addEventListener('pointermove', pointerMoveEvent);

ポインタ イベントにより、ブラウザのポインタ入力モデルが統合され、タップ、ペン、マウスを 1 つのイベントセットに統合できます。現在は IE11、Edge、Chrome、Opera でサポートされています。Firefox では一部サポートされています。

詳しくは、今後の方向性を示すをご覧ください。

asyncawait

非同期 JavaScript は、判断が難しい場合があります。この関数には素晴らしいコールバックが含まれています。

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

promises で書き換えると、ネストの問題を回避できます。

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

しかし、非同期依存関係の長いチェーンが存在する場合は、Promise ベースのコードが読みにくい可能性があります。

Chrome で JavaScript キーワードが async および await でサポートされるようになり、同期コードと同じくらい構造化して読み取れる Promise ベースの JavaScript を記述できるようになりました。

代わりに、非同期関数は次のようになります。

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Jake は、非同期関数 - Promise をわかりやすくするという優れた投稿で、すべての詳細を説明しています。

永続ストレージ

永続ストレージのオリジン トライアルが終了しました。ウェブ ストレージを永続ストレージとしてマークし、Chrome でサイトのストレージが自動的に消去されないようにできるようになりました。

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

また、エンゲージメントが高いサイト、ホーム画面に追加されているサイト、プッシュ通知が有効になっているサイトには、永続性の権限が自動的に付与されます。

詳しい情報とサイトの永続ストレージをリクエストする方法については、Chris Wilson による永続ストレージの投稿をご覧ください。

CSS の自動ハイフネーション

Chrome で最も多くリクエストされるレイアウト機能の一つである CSS 自動ハイフネーションが、Android と Mac でサポートされるようになりました。

Web Share API

さらに、オリジン トライアルとして利用可能な新しい Web Share API により、ネイティブ共有機能を簡単に呼び出せるようになりました。Paul(Mr. Web Intents)Kinlan 氏は、Navigator Share の投稿で詳細をすべて説明しています。

結び

これらは、デベロッパー向けの Chrome 55 での変更点のほんの一部です。

Chrome の最新情報を入手し、今後の予定を把握したい場合は、ぜひご登録ください。また、Chrome Dev Summit の動画で、Chrome チームが取り組んでいる優れた機能の詳細をご覧ください。

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