asyncとawaitを使用すると、メインスレッドをブロックすることなく、プロミスベースのコードを書くことができます。- ポインタ イベントは、すべての入力イベントを統一された方法で処理します。
- ホーム画面に追加されたサイトには、永続ストレージ権限が自動的に付与されます。
他にもさまざまな機能があります。
Pete LePage と申します。Chrome 55 のデベロッパー向けの新機能について説明します。
ポインタ イベント
ウェブ上のものを指す操作は、以前は簡単でした。マウスを動かしたり、ボタンを押したりするだけでした。しかし、これは YouTube ではうまく機能しません。
タッチイベントは便利ですが、タッチとマウスをサポートするには、次の 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 の 永続ストレージに関する投稿をご覧ください。
CSS 自動ハイフネーション
Chrome で最もリクエストの多いレイアウト機能の 1 つである CSS 自動ハイフネーションが、Android と Mac でサポートされるようになりました。
Web Share API
最後に、新しい Web Share API を使用してネイティブ共有機能を簡単に呼び出せるようになりました。この API はオリジン トライアルとして利用できます。詳細については、Paul（Mr. Web Intents）Kinlan の ナビゲーター共有に関する投稿をご覧ください。
結びの言葉
これらは、デベロッパー向け Chrome 55 の変更のほんの一部です。
Chrome の最新情報や今後の予定を知りたい場合は、ぜひチャンネル登録してください。また、Chrome Dev Summit の動画もぜひご覧ください。Chrome チームが取り組んでいる素晴らしい機能について詳しく説明しています。
担当の Pete LePage です。Chrome 56 がリリースされ次第、Chrome の新機能についてお知らせします。