asyncとawaitを使用すると、あたかも同期コードのように 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 では部分的にサポートされています。
詳しくは、Pointing the Way Forward をご覧ください。
async、await
非同期 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 では、async と await という JavaScript キーワードがサポートされるようになりました。これによって、同期コードと同じくらい構造化されて読みやすい 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 の Persistent Storage の投稿をご覧ください。
CSS による自動ハイフネーション
Android と Mac で、Chrome で非常に多くリクエストされていたレイアウト機能の CSS による自動ハイフネーションがサポートされるようになりました。
Web Share API
最後に、新しい Web Share API でネイティブ共有機能を簡単に呼び出せるようになりました。これはオリジン トライアルとして利用できます。詳細については、Paul（Mr. Web Intents）Kinlan の ナビゲーター共有に関する投稿をご覧ください。
結びの言葉
これらは、デベロッパー向け Chrome 55 の変更のほんの一部です。
Chrome の最新情報や今後の予定を知りたい場合は、ぜひチャンネル登録してください。また、Chrome Dev Summit の動画もぜひご覧ください。Chrome チームが取り組んでいる素晴らしい機能について詳しく説明しています。
Pete LePage と申します。Chrome 56 がリリースされ次第、Chrome の新機能についてお知らせします。