このページは Cloud Translation API によって翻訳されました。

Chrome 66 の新機能

Pete LePage

新しい CSS 型モデルオブジェクトを使用すると、CSS の操作がより簡単になります。
クリップボードへのアクセスが非同期になりました。
キャンバス要素用に新しいレンダリングコンテキストが追加されました。

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

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

変更内容の完全なリストについては、Chromium ソースリポジトリの変更リストをご覧ください。

CSS 型オブジェクトモデル

JavaScript で CSS プロパティを更新したことがあるなら、CSS オブジェクトモデルを使っています。ただし、すべてを文字列として返します。

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

opacity プロパティをアニメーション化するには、文字列を数値にキャストし、値をインクリメントして変更を適用する必要があります。理想的とは言えません。

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

新しい CSS 型オブジェクトモデルでは、CSS 値が型付き JavaScript オブジェクトとして公開されるため、多くの型操作が不要になり、より実用的な方法で CSS を操作できます。

スタイルにアクセスするには、element.style を使用する代わりに、.attributeStyleMap プロパティまたは .styleMap を使用します。読み取りや更新を簡単に行える地図のようなオブジェクトを返します。

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

以前の CSS オブジェクトモデルと比較して、初期のベンチマークでは 1 秒あたりのオペレーションが約 30% 改善されています。これは、JavaScript アニメーションで特に重要なことです。

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

また、文字列から数値への値のキャストを忘れたために生じるバグを排除でき、値の丸めとクランプを自動的に処理できます。さらに、単位変換、算術、等式を扱う非常に便利な新しいメソッドもあります。

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Eric の説明には、いくつかのデモと例が掲載された素晴らしい投稿があります。

Async Clipboard API

const successful = document.execCommand('copy');

document.execCommand を使用した同期的なコピーと貼り付けは、小さなテキストの場合は問題ありませんが、その他の場合は、同期的な性質によってページがブロックされ、ユーザーエクスペリエンスが低下する可能性が高くなります。また、ブラウザ間の権限モデルにも一貫性がありません。

新しい Async Clipboard API は、これに代わるものとして非同期で機能します。また、Permission API と統合することで、ユーザーエクスペリエンスを向上させます。

writeText() を呼び出すと、テキストをクリップボードにコピーできます。

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

この API は非同期であるため、writeText() 関数は、渡されたテキストが正常にコピーされたかどうかに応じて、解決または拒否される Promise を返します。

同様に、クリップボードからテキストを読み取るには、getText() を呼び出して、返された Promise がテキストで解決されるのを待ちます。

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

説明にある Jason の投稿とデモをご覧ください。また、async 関数を使用する例もあります。

キャンバスの新しいコンテキスト `BitmapRenderer`

canvas 要素を使用すると、ピクセルレベルでのグラフィックの操作、グラフの描画、写真の操作、さらにはリアルタイムの動画処理を行うことができます。ただし、空の canvas で始めるのでない限り、canvas で画像をレンダリングする方法が必要です。

これまでは、image タグを作成し、そのコンテンツを canvas にレンダリングする必要がありました。つまり、ブラウザは画像の複数のコピーをメモリに保存する必要があります。

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

Chrome 66 以降では、ImageBitmap オブジェクトの表示を効率化する新しい非同期レンダリングコンテキストが導入されています。非同期で動作し、メモリの重複を回避することで、より効率的かつジャンクの少ないレンダリングが可能になりました。

使用方法は次のとおりです。

createImageBitmap を呼び出して画像 blob を渡し、画像を作成します。
canvas から bitmaprenderer コンテキストを取得します。
次に、画像をそこに転送します。

const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

これで、画像がレンダリングされました。

AudioWorklet

ワークレットが到着！PaintWorklet は Chrome 65 でリリースされましたが、Chrome 66 では AudioWorklet がデフォルトで有効になります。この新しいタイプの Worklet は、メインスレッドで実行されていた以前の ScriptProcessorNode に代わって、専用のオーディオスレッドで音声を処理するために使用できます。各 AudioWorklet は独自のグローバルスコープで実行されるため、レイテンシが短縮され、スループットの安定性が向上します。

AudioWorklet の興味深い例については、Google Chrome Labs をご覧ください。

ほか多数

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

TextArea と Select が autocomplete 属性をサポートするようになりました。
form 要素で autocapitalize を設定すると、すべての子フォームフィールドに適用されます。これにより、Safari の autocapitalize 実装との互換性が向上します。
trimStart() と trimEnd() が、文字列から空白を取り除く標準ベースの方法として利用できるようになりました。

Chrome 66 の DevTools の新機能については、Chrome DevTools の新機能をご覧ください。また、プログレッシブウェブアプリに関心をお持ちの場合は、新しい PWA Roadshow 動画シリーズをご覧ください。次に、YouTube チャンネルの [チャンネル登録] ボタンをクリックすると、新しい動画が公開されるたびに、メール通知が届きます。

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