Chrome Dev Summit 2018が開催!Web制作者がチェックしておきたい、CSSとJavaScriptの最新情報

先週、サンフランシスコで開催された「Chrome Dev Summit 2018」から、Web制作者が特に注目しておきたいハイライトを紹介します。

ナビゲーションの新しい遷移方法、Squooshの開発秘話、新しいPageSpeed API、ChromeでもLazyloadをサポートなど、これからの制作に役立つものばかりです。

サイトのキャプチャ

Highlights from Chrome Dev Summit 2018

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

ナビゲーション遷移(Navigation transitions)

これの元となるのは、2016年にJake Archibald氏がプレビューした「highly speculative API」です。このAPIはスマホのネイティブアプリのようなページ遷移を可能にし、ウィンドウ上に新しいナビゲーションイベントを発生させます。
当時は実現されませんでしたが、アイデアは継続され、再び注目されています。

サイトのキャプチャ

Portals

Portalsは、シームレスなページ遷移の新しい提案です。<portal>要素は<iframe>と似ていますが、常にトップレベルに存在し、ナビゲートすることができます。この提案はまだ初期段階で、変更される可能性がありますが、現時点での機能を紹介します。

まず、ページに<portal>要素を作成します。
<portal>要素はHTMLで記述しても、JavaScriptで生成しても問題ありません。

次に、好きな方法でportalウィンドウをアニメーションさせることにより、ユーザーのクリック(または任意の)イベントを取得することができます。

最後に、新しい<portal>要素をアクティブ化し、現在のトップレベルのブラウジングコンテキストをportalに置き換えます。

元の提案と同様に、portalはWebをナビゲートする際のすべての問題に対する答えにはならないかもしれませんが、解決に近づくための提案があることは喜ばしいことです。

Squoosh -15kbのJavaScriptアプリ

Chrome Dev Summit 2018で私が特に気になったセッションは「Complex JS」で、先日ローンチされた画像圧縮Webアプリ「Squoosh」をどのように構築したのかです。このWebアプリはたった15kbのJavaScriptで構築されており、興味がある人はぜひ自身の目で見ることをお勧めします。

サイトのキャプチャ

Squoosh

この構築には下記のようなさまざまなツール、テクノロジー、ベストプラクティスが活用されています。

  • 3kbの超軽量フレームワーク「Preact
  • コード分​​割用Webpack
  • 並列作業のためのWeb Workers
  • Javascriptのモジュールを動的にインポート

PageSpeedとLighthouse APIによる統一されたパフォーマンス分析

これまで、Webサイトのパフォーマンス測定にはさまざまなツールがあり、それぞれが異なる結果になってしまう可能性がありました。今後は、さまざまなプロダクトのパフォーマンスを測定するためのGoogleのすべてのツールが、新しいPageSpeed API version 5(基本的にLighthouse APIです)によってサポートされるようになります。

サイトのキャプチャ

さまざまなプロダクトが開発用Lighthouse CLI、SEO監視用Search Consoleなどの異なる段階で有効ですが、同じテストツールを使用して信頼性の高い同じ結果が得られるようになります。

ChromeでもLazyloadをネイティブにサポート

まもなくリリースされるChromeの新しいバージョンで、lazyload属性がサポートされます。この新しい属性は、画像やiframe要素のLazyloadをネイティブに対応するもので、ビューポート内にスクロールされた時にそれらのリソースをロードします。

コードは非常にシンプルで、「lazyload 」を加えるだけです。

詳しくは、以前に特集した記事をご覧ください。

サイトのキャプチャ

Chromeの新機能がすごい便利!imgやiframeにlazyload属性を加えるだけでLazyLoad対応に

この機能は既にInternet ExplorerとEdgeで利用可能で、より多くのブラウザで利用できるようになることはは素晴らしいことです。

すぐに試したい人は、下記のフラグを有効化してください。
chrome://flags/#enable-lazy-image-loading

サイトのキャプチャ

Chrome Dev Summit 2018

sponsors

top of page

©2018 coliss