[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
こんにちは、@yoheiMuneです。
4/10のThe Chromium Blogによると、Chrome 35 betaがリリースされたようです。β版ということは、次のメジャーバージョンにも反映される内容です。
かいつまんで、Chrome 35 betaでの追加/削除された機能をメモ的に残したいと思います。
https://www.google.com/intl/en/chrome/browser/beta.html
また、
またWeakMapとWeakSetは、その名前の通り格納するデータに対して弱い参照を保持するデータ構造です。これを用いることで、Map内やSet内にしか存在せず、他から参照されていないようなデータについては、ガーベッジコレクション対象となり、メモリリークを防ぐことができます。Firefoxでは既に利用可能なようですね。
Object.observe(obj, func)を使えば、JavaScriptのオブジェクトを監視することができ、監視対象のオブジェクトに変更があると、通知を受けることができます。これを使うことで、
HTMLVideoElement-specific prefixed fullscreen API、 TextTrackCue constructor、 <isindex>、 Legacy Web Notifications、 support for NPAPI on Linux、 Attr.isId, ownerElement, prefix setterです。
より詳しい情報は、mailing listで「Intent to Remove」や「Intent to Deprecate」のスレッドを参照してください。
他にも、 Element.setAttributeNodeNS、 overflowchanged Event、 HTMLSourceElement.media、 MediaError.MEDIA_ERR_ENCRYPTED、 Prefixed media source extensions、 webkitRequestAnimationFrame、 が削除予定のようです。
最後までご覧頂きましてありがとうございました。
4/10のThe Chromium Blogによると、Chrome 35 betaがリリースされたようです。β版ということは、次のメジャーバージョンにも反映される内容です。
かいつまんで、Chrome 35 betaでの追加/削除された機能をメモ的に残したいと思います。
Special Thanks to https://flic.kr/p/mCxiCc
Chrome beta版のインストール
この記事で扱う機能は、Chrome 35 betaに搭載された機能です。そのため、安定板Chromeのバージョンが35になるまでは、β版で試す必要があります。 β版のインストール先を下記に記載しますので、そちらよりダウンロード＆インストールしてみてください。https://www.google.com/intl/en/chrome/browser/beta.html
また、
chrome://flagsから、「JavaScriptの試験運用機能を有効にする」を有効にする必要があります。TouchとZoomをより柔軟にコントロールする
touch-action CSS propertyを使うことで、タップスクロール、ピンチによるズーム、ダブルタップによるズーム、といった挙動を選択的に制限することができるようになります。 これは、300ms click delay on mobile問題への対応や、精度の高いフリック、polyfills of Pointer Eventsなどに使えるようです。 またこれは、将来的にスクロールやズーム動作が、main threadを妨げないための布石ともなっているようです。JavaScript
たくさんのECMAScript 6の機能がサポートされました。これらの機能を使うことで、より明快に、より強力に、よりメモリに優しいコーディングが可能となります。 注目されているPromiseはまだサポートされていませんが、近い将来に実装されるようです。またWeakMapとWeakSetは、その名前の通り格納するデータに対して弱い参照を保持するデータ構造です。これを用いることで、Map内やSet内にしか存在せず、他から参照されていないようなデータについては、ガーベッジコレクション対象となり、メモリリークを防ぐことができます。Firefoxでは既に利用可能なようですね。
Object.observe(obj, func)を使えば、JavaScriptのオブジェクトを監視することができ、監視対象のオブジェクトに変更があると、通知を受けることができます。これを使うことで、
setTimeoutなどで対象オブジェクトを定期的に監視するようなコードを書く必要がなくなります。便利ですね。プレフィックスなしでShadow DOM
Shadow DOMは、Web Componentsで定義する機能の1つです。Webコンポーネントを使うことで、以下のようなことを行うことができます。- HTMLやCSSにスコープの概念を持ち込むことができ、モジュール内にスコープを限定することができます。その結果、既存のモジュールとCSSがぶつかるといった問題を回避することができます。
- Custom Elementを作ることができます。
その他の新機能
- CSS Font Loadingの機能を用いて、フォントを読み込むことができるようになりました（デモ）。必要な時にロードすることができ、ロードが完了した際に通知を受けることができます。
- SVGのPaint Order Propertyを用いることで、fill、stroke、markerの描画順を指定することができるようになりました。
- Web Audio APIがベンダープレフィックスなしで使えるようになりました。
削除された機能
Web健全性のため、またChromeの将来の進化のため、セキュリティ向上のために、削除された機能もあるようです。以下、列挙しておきます。HTMLVideoElement-specific prefixed fullscreen API、 TextTrackCue constructor、 <isindex>、 Legacy Web Notifications、 support for NPAPI on Linux、 Attr.isId, ownerElement, prefix setterです。
より詳しい情報は、mailing listで「Intent to Remove」や「Intent to Deprecate」のスレッドを参照してください。
将来削除予定の機能
Chrome 36では、window.showModalDialogが削除されるようです。IE6の頃に良く使ったなぁと思い出します。理由は、セキュリティ向上のため、実装が大変、ほとんど使われていないの3つのようです。より詳しい情報は、DEV.OPERAで解説されています。他にも、 Element.setAttributeNodeNS、 overflowchanged Event、 HTMLSourceElement.media、 MediaError.MEDIA_ERR_ENCRYPTED、 Prefixed media source extensions、 webkitRequestAnimationFrame、 が削除予定のようです。
最後に
Chromeは仕事で使う中心的なツールの1つなので、しっかりと機能の増減についてはキャッチアップしていきたいとことです。 またChromium Blogの記事にはたくさんの関連リンクが掲載されており、それらを1つずつ見ていくのも本当に勉強になります。ぜひ見てみてください〜☆最後までご覧頂きましてありがとうございました。
