HTML5 Conference 2018 行ってきた

普段業務ではレポート提出してるけど、今回はプライベートだったのでQiitaに上げてみる

## TypeScript Evolution

https://speakerdeck.com/quramy/typescript-evolution

普段から少しは書いているんだけど、あまり最新の機能をキャッチアップ出来ていなかったので受講。
基本的には2.0くらいの時期の知識だったので、いろんな単語が新鮮だった。
スライドの一つ一つを理解していけばかなり追いつけるはず。

<!--
### Compirer
* Structual Subtyping
* esModuleInterop
  * デフォルトでON
* Mappd Type Modifier
* Conditional types
* Type Intarface
* unkown
* Tuple系にいろいろ進捗
* Rest Param
* Mapped tuple types
* sctrictBindCallApply
  * デフォルトでON

### Language Service

* オーガナイズインポート
  * VS codeで使える？
  * importの最適化
* Error & Code fix
  * エラーを直す
* Suggestion Error
  * 80000番台
* rename import declaration
  * import のfrom の後ろを変えるとファイル名も変わる
-->

## 使い倒そうVisual Studio Code!

https://www.slideshare.net/sakkuru/visual-studio-code-123930261

「使い倒そう」ってことはそこそこマニアックな使い方を紹介してくれるのかと思ってたら、始まる直前に基本的な内容だと説明があって少しガッカリ。移動するのも面倒だったので、そのまま受講。
ただ意外と知らない機能があったので、参考にはなった。

セッションのほとんどはデモでビデオチャットを作るという内容だったが、skywayというライブラリを使うと簡単にビデオチャットアプリを作れることに驚いた。

また、LiveShareの機能は便利ではあるが、業務では他の人がいるフロアで外部の人とほぼ話せないので実際に使える場面がないのが残念。

### 知らなかった機能
* 拡張機能のインストールの右上でソートとかできる
* Dockerタブでプライベートリポジトリも表示できる

<!--
* ビデオタグを取得していストリームをながす
* VSLiveShare
  * 幹事とやれるかも
  * AndroidStudioでもできないかな？
-->

## PWAの導入で得られた成果と見えてきた課題

https://speakerdeck.com/sisidovski/nikkei-pwa-html5conf2018

自分もPAWの開発をしているのと、国内の事例でかなり有名な日経さんのセッションなので受講。

成果についてはいろいろなところで語られているが、課題についても共有してもらえた。
PWAを作る際には何と戦わなければいけないのかが良くわかるので、とても有意義なセッションだった。

<!--
* クリティカルレンダーパス
  * ファイルサイズが大きくなる
  * それでもファイルを少なくする恩恵の方が今の所大きい
* inline-critical-pass CSS
  * 手動でメンテしている
  * 辛い
* A2HS
  * 記事読んだ後に出すA/Bテストをしてみた
    * 率は上がったが、絶対数が減った
    * デフォルト挙動を採用
    * 今は動かない
* ServiceWorker
  * 起動に時間がかかる(50ms~)
  * Navigation　Preload requestで解決
* モニタリング
  * Speedcurv
  * ダッシュボード用モニタを置く
  * 集計期間は短期(1週間1ヶ月)と長期(数ヶ月)両方でやる
* パフォーマンス改善日を設ける
* Performance Budget
* 3rd party JS
  * 自分がどれだけ頑張っても他のJSが遅ければ早くならない
-->

## コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践

https://www.slideshare.net/linecorp/webassemblyline-123931200

WebAssemblyを作るための言語とコンパイラを作ってみました。という内容のお話。
Webで使うためにはサイズが小さい必要があるというのは理解できるが、言語とコンパイラまで作る必要はないと思った。

作った言語に対する結論が、「JavaScriptって便利だな」っていうのは失敗したという理解で良いのだろうか。

<!--
* Webで使うなら容量をへらす必要がある
  * LLVMを使わない
* Lexer
* UIの利用状況をヒートマップで可視化するツール
* webm
* webp
-->

## webpackのいままでとこれから

https://slides.hiroppy.me/webpack-history/

webpackの歴史を紹介しつつ内部実装についても紹介されていたセッション。
聞きながらだと展開が速すぎて内部実装についてあまり理解出来なかったが、スライドを見返せば理解はできそう。
webpackの挙動をハックしたいと思っていたので、とてもありがたいセッションだった。

<!--
* プルリクするとお金がもらえる
* お金出してる企業が投票権をたくさん持つ
* dynamic importのプラガブル化聴きたい
* in-memory caching
* Tree Shaking
* prefetch preload
    * dynamite importで設定
-->

## 展示フロア等のアンケート

Yahooさんところのアンケート結果
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">HTML5 Conference 2018 のヤフーブースのフロントエンド総選挙アンケートは夕方になりこのような回答状況になっております。ステッカーはなくなってしまいましたが、参加者の皆様の回答をお待ちしております。 <a href="https://twitter.com/hashtag/html5j?src=hash&amp;ref_src=twsrc%5Etfw">#html5j</a> <a href="https://t.co/ryiqVuMDwA">pic.twitter.com/ryiqVuMDwA</a></p>&mdash; Yahoo!デベロッパーネットワーク (@ydnjp) <a href="https://twitter.com/ydnjp/status/1066591564477026304?ref_src=twsrc%5Etfw">2018年11月25日</a></blockquote>

サイバーエージェントさんところのアンケート結果
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">アンケートご協力いただいた方々、ありがとうございました！<br>12月19日にFrontrend Vo.13があるのでご興味ある方は是非応募してください〜😊<a href="https://t.co/7aMKpTjlPc">https://t.co/7aMKpTjlPc</a> <br> <a href="https://twitter.com/hashtag/html5j?src=hash&amp;ref_src=twsrc%5Etfw">#html5j</a>  <a href="https://twitter.com/hashtag/cyberagent?src=hash&amp;ref_src=twsrc%5Etfw">#cyberagent</a> <a href="https://t.co/sHBYSJmt0z">pic.twitter.com/sHBYSJmt0z</a></p>&mdash; きっしー (@kitta0413) <a href="https://twitter.com/kitta0413/status/1066610276546502656?ref_src=twsrc%5Etfw">2018年11月25日</a></blockquote>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ほぼ最終。ReactとAngularは世界的な割合と同じかな。なぜVueが高い…俺も使ってるけど。<a href="https://twitter.com/hashtag/html5j?src=hash&amp;ref_src=twsrc%5Etfw">#html5j</a> <a href="https://t.co/CyDdYkDsLi">pic.twitter.com/CyDdYkDsLi</a></p>&mdash; Freesia (@Freesia_t) <a href="https://twitter.com/Freesia_t/status/1066606153159725057?ref_src=twsrc%5Etfw">2018年11月25日</a></blockquote>


## その他受講できなかったセッション

* ZOZOのグローバルECのフロントエンドアーキテクチャ設計
* [それ、AMPで作りませんか？」--- RichでResponsiveかつ**PWA**なAMPの作り方](https://twitter.com/uskay/status/1066579287090749440)
* [Yahoo! JAPANアプリ上で動くWebVIewサービス開発〜Web技術で動くライブクイズ「ワイキュー」〜](https://speakerdeck.com/naoishii/yahoo-japanapurishang-dedong-kuwebviewsabisukai-fa)
* [HTTP の今と未来 ー BBR, HTTP/2, QUIC の基礎から 5G 試験ネットワークでのブラウザベース評価試験まで](https://www.slideshare.net/dynamis/http-and-5g)
    * [事前配布資料](https://www.webdino.org/updates/blog/201811221554/)
* [光を超えるためのパフォーマンスチューニング/アーキテクチャ](https://speakerdeck.com/mizchi/guang-wochao-erutamefalsehurontoendoakitekutiya)
* FIDO認証によるパスワードレスログイン実装入門
* [Node.js まとめ](https://speakerdeck.com/yosuke_furukawa/node-dot-js-2018)
* 2018年のHTMLやCSSやAPIとか
* [Web Components のリアル](https://speakerdeck.com/aggre/realistic-web-components)
* Web プラットフォーム再考 ～PWA のもたらす未来の光と影 ～
* [Angular 製 高機能グリッドのパフォーマンス問題に立ち向かった（ている）話 - IE11、お前もか・・・ -](http://slides.com/tkiryu/deck#/)
* [持続可能なプロダクト開発のために - フロントエンドと新陳代謝の話](https://speakerdeck.com/potato4d/frontend-premised-on-making-changes)
* 組み込みブラウザとMediaの仕様あれこれ
* TechFeedのつくりかた 2018
* [Angularを使用したWebアプリケーションの最新設計手法](https://speakerdeck.com/koumatsumot0/angular-webahurikesiyonfalsezui-xin-she-ji-shou-fa)
* [Reactにおけるパフォーマンスチューニング](https://speakerdeck.com/maxmellon/reactzhi-spa-niokeru-pahuomansutiyuningu)
* ブラウザでARとAIを動かした話
* [VOXELCANVAS：WebGLでのボクセルモデリングツール開発 ~ 開発ノウハウとブラジルの小学校で使ってもらえた話](https://speakerdeck.com/utautattaro/html5-conference-2018-voxelcanvas)
* あんずフォト：PlayCanvasでリッチアドコンテンツを開発して発信してみた
    * https://playcanvas.com/
* [WebXR: Beyond WebGL](https://speakerdeck.com/yomotsu/webxr-beyond-webgl)
* [デザインを共有するための言語化あれこれ](https://speakerdeck.com/yhassy/dezainwogong-you-surutamefalseyan-yu-hua-falsequ-rizu-mi)
* [アクセシビリティ、はじめよう! 〜「できない」から脱出するための20（仮）のネタ🍣〜](https://docs.google.com/presentation/d/1iaF3oQbx-nN8h1suyvDRFm5DAgvZE1DwbFwkmlV2JYU/edit#slide=id.g46e8befc71_0_291)
* [「セマンティクスの作り方、これまで、今、そして未来」](https://masup9.github.io/html5conf2018/)
* [開発体制に合わせたCSS設計](https://yoshikawaweb.com/css-structure.html)
* さらに便利になった最新版SketchとMaterial Theme Editor