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

Post on:2018年11月20日

ナビゲーション遷移（Navigation transitions）

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

Portals

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

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

<portal id="myPortal" src="https://bitsofco.de"></portal>

1	<portal id="myPortal" src="https://bitsofco.de"></portal>

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

navigateButton.addEventListener(('click') => {
  // insert fancy animations here
});

navigateButton.addEventListener(('click') => {

// insert fancy animations here

});

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

navigateButton.addEventListener(('click') => {
  // ... 

	myPortal.activate();
});

navigateButton.addEventListener(('click') => {

// ...

myPortal.activate();

});

元の提案と同様に、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です）によってサポートされるようになります。