GameWith Advent Calendar 2018 4日目担当の
GameWithのエンジニアの tiwu です。
先日開催されたHTML5 Conference 2018に参加してきました！
HTML5 Conferenceに参加するのは3度目で、毎回刺激をもらっています。
今回も見たいセッションがたくさんあったのですが、厳選に厳選を重ね以下のセッションを見ました。
- 光を超えるためのパフォーマンスチューニング/アーキテクチャ
- カンファレンススポンサーによるライトニングトーク大会
- 「それ、AMPで作りませんか？」--- RichでResponsiveかつPWAなAMPの作り方
- Web Components のリアル
- Web プラットフォーム再考 ～PWA のもたらす未来の光と影 ～
- HTTP の今と未来 ー BBR, HTTP/2, QUIC の基礎から 5G 試験ネットワークでのブラウザベース評価試験まで
- スペシャルセッション
各セッション簡単にですが概要と感想を書いていきたいと思います。
光を超えるためのパフォーマンスチューニング/アーキテクチャ
- 賽の河原でdivを積む
- この世界の光の速度はとても遅く、世界中の人とリアルタイムにゲームするにはまだ耐えられない(格ゲーなど致命的
- 60fpsをwebで目指す= 16msの壁を超える必要がある
- フロントから見たらサーバーというものはデータをシンクするシステム
- ローカルキャッシュ ＞ CDN Edgeキャッシュ ＞ サーバーキャッシュ ＞ クエリ叩く
- しかしキャッシュの設計は難しい
- 高速化は目的ではなく結果に過ぎない＝高速化ができるキレイなアーキの証明
- コードの綺麗さと速度は両立する
- つまりみんな綺麗なコードを書こう
SWでHTMLキャッシュをしてサイトを作ったことがあるのですが、あれは本当に光を超える・・・
ただキャッシュ破棄戦略とかが難しい・・・
ここの戦略の難しさは綺麗なコードによる綺麗なアーキが繋がってくるんですね・・・！
資料
カンファレンススポンサーによるライトニングトーク大会
印象に残っているのは新人研修でSlackを作ったLTで、サイバーエージェントさんの新人研修のレベルの高さとそれを超える新卒の技術力を感じました。
ほかチームが機能を沢山開発している中で、開発フローや開発体制などに力をいれ、賞を取ったそうです。
※ビデオチャット？の時に美肌加工する機能などあったらしいです（うろ覚えです
最後に苦労した点を聞かれた際に「他チームが機能を作っている中、開発フローなどに力を入れたため、他チームと比べて遅れている、進捗が悪いなど不安になった」と言っていました。
しかし、メンターに相談して不安を取り除いてもらい自信もって開発を進めることができたそうです。
新人研修の内容、新人、メンター全て合わさって素晴らしい新人研修ができていると実感しました。
「それ、AMPで作りませんか？」--- RichでResponsiveかつPWAなAMPの作り方
- AMPは3年経って、LP以外にサイト全体をAMPで構築する事例も増えてきた
- 便利なAMPコンポーネントもたくさんできた
- AMPは簡単にレスポンシブにでき、一休さんのサイトはとてもいい事例
- AMPとPWAは相性がいい（文字をひっくり返すとAMP <=> PWAになることからもわかる...w）
- ただ、URLがGoogleドメインになるのは課題として感じており現在対応中（Signed Exchangeを利用）
- さらに、AMPでJSが使えるようになる！（WorkerDOMを利用）
ついにAMPでJSが動くそうです（震え声）
サイト全体をAMPで構築し、ほぼ光の速度のサイトを作れるのは夢がありますね！
登壇者によるタイムライン
本日はご参加ありがとうございました！残念ながらスライドは共有できないのですが、こちらに「それ、AMPで作りませんか？」--- RichでResponsiveかつ**PWA**なAMPの作り方 のサマリを連投させて頂きます！（タイムライン汚したらすみません）#html5j #html5j_h pic.twitter.com/4umlupV2XZ
— Yusuke Utsunomiya (@uskay) 2018年11月25日
Web Components のリアル
- IEを無視すれば今すぐにでもいける（2020年にWin7のサポートが切れるからそこまで待つ説）
- Custom Elements,Shadow DOM,HTML Template,ES Modulesの組み合わせの技術
- Custom Elements独自タグを作り、コールバックを定義できる
- Shadow DOMはDOMをスタイルごと隠す
- slotで小要素を表示する
- プロジェクトをまたぐコンポーネントを作る時に便利（ロゴなど）
- ライブラリに依存しないコンポーネントを作る時に便利（Vue,Reactなど）
- マイクロフロントエンドの実現
- コンポーネント内にVueやReactを隠蔽できる
- ボタンはVueが得意なチームが、カルーセルはReactが得意なチームが作るといった分離ができる
- Web Componentsは標準の仕様なので使えるなら使ったほうがいい
- 現実的に作るなら、バニラ,lit-html,lit-element,Vueなどを利用したほうがいい
- lit-elementが作る時は便利
以前Polymer使ってWebComponentsを作ったことがあるのですが今はlit-elementが主流？ぽいんですね
AMPのコンポーネントもWebComponentsベースらしいです。
今後はJSフレームワークではなく、コンポーネントによるサイト構築が主流になるのかも。
資料
Web プラットフォーム再考 ～PWA のもたらす未来の光と影 ～
- PWA + ○○ が来ている（Web VRなど）
- WebなのにPWAのせいで使いづらくなることがある
- スタンドアローンモードは検索バーが消えるので、検索したい時にブラウザにアプリ切り替えをする必要がある
- 別のページを開くとき、前のページを上書きして開くので前のページに戻れない
- PWAで夢を見るな、現実を見ろ
僕も作ったサイトにAdd to homescreen入れたのですが、完全にUXの向上など無視してました・・・。
HTTP の今と未来 ー BBR, HTTP/2, QUIC の基礎から 5G 試験ネットワークでのブラウザベース評価試験まで
- 5Gが来たが、5Gで何ができるのかが課題になっている
- この前HTTP/3が出た(HTTP over QUIC)
- ネットワーク技術の変化を知らないWeb開発者はやばい
- Softbank X WebDinoJapanが世界初の調査結果を公表
- Web開発者と共に、5Gネットワークの使い方を創っていきたい
- 5G IoT Studioという場所を提供している
- 5GだとHTTP/2のほうが遅い
- ただまだまだ5Gは調査不足
ネットワーク技術の変化を知らないWeb開発者はやばい
この一文にすべてが込められていました。
資料
スペシャルセッション
LT大会とクイズ大会でした！
1000万以上をAMPにした話
- WeblioをAMP対応
- 段階的にAMPにしていった
- 通常のサイトにAMPコンポーネントを使っている
PureJS
- Haskellライクな関数型
CSSアンチパターン
- ビルドプロセスから考えることが必要
- コンポーネント化されているのにCSSだけグローバルになっていた・・・
- ビルド後のJSはDRYだがCSSはDRYになってない
Preload,Preconnect
- とりあえず入れるだけでも負担にならない先読みの仕様
- APIもフェッチできる
Vivliostyle
- css組版
- ブラウザの印刷機能を利用しPDF出力する
- 利用者が増えてきた
Passive Event
- Chromeの絵を書く人
- スクロールにEventを貼ると、スクロールがカクつく
- heightが変わったりする可能性があるので処理が終わるのを待っているため
- addEventListenerに{passive: true}を渡すと、処理が終わるまでにスクロールするのでなめらかになる
最後に
以前参加したHTML5 ConferenceはAMPやPWAやWeb Componentsは紹介するセッションが多くありましたが
今回は使ってみてどうだったか、などといった事例のセッションが多かった気がします！
GameWithは、ゲームが大好きで、フロントエンドが大好きな方、新しいWeb技術に興味がある方を大募集中！ Wantedly でもよいので是非お気軽にお声がけください！
