えんぴつぶろぐ

子育て中のフロントエンドエンジニアのブログ。

HTML5 Conferenceに行ってきたレポートとリンク集

HTML5 Conference 2018

年に一度のフロントエンドの祭典、HTML5 Conference 2018に行ってきました。

f:id:empitsu88:20181126005255j:plain
もらったノベルティ

f:id:empitsu88:20181126005304j:plain
会場ごとにハッシュタグ

関連したハッシュタグがまとめてみれるリンク

#html5j OR #html5j_h OR #html5j_a OR #html5j_b OR #html5j_c OR #html5j_d OR #html5j_e - Twitter Search

ホール以外の動画も後日アップされるらしい!
(全部ではないかもとのことだが)

まさに「祭典」。学べるだけじゃなくて楽しい

学びの深いセッションばかりで本当に行ってよかった!
今どきのカンファレンスらしく動画配信やスライド共有もあるので、現地に行かなくても大いに学びは得られるのだろうけど…
直接プレゼンを聞いたほうがやっぱり臨場感がある。
Twitter実況をするのも追いかけるのも楽しいしね!
タイムテーブルとにらめっこしながら「なんでこの時間、聞きたいセッションかぶってるんや…!」と迷い、セッションが終わるや満席になる前に急いで次の会場に向かい、
展示ブースを物色し、「次は〇〇に行く」とハッシュタグをつけてツイート…の感じ、まさに音楽フェス。

あとは顔見知りにばったり会場で遭遇したり、久々にお会いする方と挨拶できたり。
行ってる間娘を看てくれてた夫には感謝…(-人-)

基調講演

基調講演 吉川徹、えーじ

ビデオメッセージ 東京電機大学学長 安田浩教授

メッセージ 東京電機大学総合研究所特命教授・サイバーセキュリティ研究所長 佐々木良一 https://cysec.dendai.ac.jp サイバーセキュリティのより一層の充実は、社会を安心・安全・豊かにするための喫緊の課題です。東京電機大学CySecプログラムは、社会ニーズに応えるべく、社会人向けにサイバーセキュリティ意識の高揚を先導する、高度サイバーセキュリティ専門家を大学院レベルの授業により養成します。ご興味がある方、ご賛同頂ける方のご連絡をお待ちしております。

IoTとWEB技術が支える社会・大学としての人材育成の役割 岩井将行

吉川徹 html5j

えーじ Google

岩井将行 東京電機大学

source: https://events.html5j.org/conference/2018/11/session/#keynote

娘を朝寝に導いてから出発したので配信を道中の電車で見てました。
便利な時代…!

HTML5 Conference 2018 #html5j #html5j_h - YouTube

Highlight & memo

  • WebXR
    • ウェブ上からVRだけでなく、ARコンテンツにもアクセス可能にするAPI
  • Web Authentication API
  • Web Asesmbly + Web Audio
    • C++で書かれたオーディオ編集ソフトウェアをWeb Assemblyで変換してブラウザで動くようにしたり
  • Web Packagingを有効にしたAMP
    • 今年のGoogleI/Oで発表。
    • googleにキャッシュされたAMPのページにアクセスしても、GoogleではなくオリジナルのURLが表示される

Web is the only platform no one owns. by Dave Winer

  • ウェブをより良くするためにできること
    • ドキュメントの翻訳
    • 仕様やブラウザベンダーへのフィードバック
    • ブログを書く
    • 勉強会への参加・登壇

持続可能なプロダクト開発のために - フロントエンドと新陳代謝の話

Webフロントエンドの開発は日々進化していますが、徐々にそれも落ち着きつつあります。

それと同時に、 Web フロントの進化によって生まれた特有の事情とアーキテクチャ上の課題が私たちには残されました。

全ての要件の落としどころとなることが多いフロントの世界で、ソースコードの秩序を保ちつつ、持続可能なプロダクトを開発するためには何が必要か。

Vue.js による具体例を交えつつ、マイクロサービス文脈にも通ずる「捨てやすい」と「作り変えやすい」をテーマにした、フロントエンドのこれからについて考えてみます。

花谷拓磨(potato4d) ElevenBack

source: https://events.html5j.org/conference/2018/11/session/#c1

「変化が激しいフロントエンドにおいて、採用した技術はどれだけの期間使い続けることができるのか?」
「学習コストが高い技術を使った環境で、変化に強い設計を組めたとしても、多人数のチームでクリーンなコードを守り続けられるか?」
という悩みに対して、
ずばっと「捨てやすい設計にしたほうが心穏やかでいられるよ!」 という一つの解を与えてくれたセッション。

Highlight & memo

軽量な時刻操作で人気のday.jsは1年前になかった

Moment.js の存在を知って感動したのがつい最近だった記憶もあるけどいつの間にかより軽量なday.jsというものがでていたようだ。。

GitHub - iamkun/dayjs: ⏰ Day.js 2KB immutable date library alternative to Moment.js with the same modern API

フロントエンドにおける課題のサンプルケース

  • とある実装者に追加されたテスタビリティを欠いたコードや密結合な追加ロジックの実装が出現
  • すぐにマージするわけにもいかず、いは言え入れない場合の開発工数のロスも大きく、痛みを伴うトレードオフを要求される
    • => あるあるすぎて泣ける

闇の魔術に対する防衛策として求められる2つの選択肢

  • 「作り変える必要が極力ない」設計を組み上げる
    • 技術水準が高いかつ安定した環境ではワークする
    • => エンジニアの理想としてはこちらだけど・・・突然の外的要因変更には強くない
  • 「作り変えやすい」設計を組み上げる
    • =臭いものにフタ
    • エンジニアとしては「負け」と感じる箇所も出てくる
    • => 今回はこちらの「作り変えていく」方向性で課題解決を検討する

「分割統治」の徹底

壊れにくくするよりも破棄しやすくすることに主眼をおく

  • =>バックエンドやMicroService文脈が参考になる

  • Flux / Redux層の肥大化に注意する

    • グローバル関数・変数のようなものだから、なんでもかんでも突っ込まない。チェックボックスの値一つとか。
    • Redux ducks パターンやnamespaced Vuexの考え方が参考になる
  • フロントエンドの"ドメイン"はバックエンドやUIに引きずられやすい。
    • アプリケーションのプレゼンテーション層を担当している領域の一つとして考える
  • frameworkを使う必要ないところはpureJSのmoduleにして、SOLID原則さえ守れば問題なかったりもする

ドメイン駆動設計についてのおさらい

  • フロントエンドをMicroServices文脈における「サービス」の大きくなったものと解釈する

    • UIの操作= Inに対して適切なAPI Callとレスポンス=Outが得られる
    • ということは、In/Outが適切であれば、中のコードが変更されようが汚かろうが他のレイヤーに影響はない
  • UI/データモデル・ビジネスロジックの3種が混合する領域については「捨てやすさ」を重視したほうが費用対効果が高い

    • でも以下のようなものは息が長い
    • frameworkから切り出されたpureJSのコード
    • 単一責務を守っている便利なユーティリティコード
    • APIクラインアント
  • Vuex, Vue.jsコミュニティは分割統治に積極的

マイクロサービスアーキテクチャ

マイクロサービスアーキテクチャ

カンファレンススポンサーによるライトニングトーク大会

株式会社 ディー・エヌ・エー/株式会社サイバーエージェント /株式会社ドリコム/日本事務器株式会社/グレープシティ 株式会社/株式会社 日本経済新聞社

f:id:empitsu88:20181126005206j:plain

「先着順でお弁当がもらえる・・・だと・・・」

大行列でしたがなんとか240名の中に入れたのでお弁当がいただけました。太っ腹!

f:id:empitsu88:20181126005244j:plain

株式会社サイバーエージェント

新卒研修でslackをチームで開発してテストカバレッジ99%を達成した、という話でした。
slackを入社早々作るというのもすごいけど実務顔負けのモダン開発フローを実施し、かつ英語でのIssue作成やコードレビューをしたとのこと・・・すごすぎる!

アクセシビリティ、はじめよう! 〜「できない」から脱出するための20(仮)のネタ🍣〜

最近流行の兆しを見せつつある「アクセシビリティ」、取り組んでいますか?

まだ何もしていない、何をしていいかわからない、というあなたに向けて、アクセシビリティの基本的な考え方、取り組む理由などについてゆるーくトークしていきます。

これから取り組んでいく、周りの人を巻き込んでいく際のヒントになるかも?

困っている方からの質問も大募集します!

山本和泉

太田良典 弁護士ドットコム株式会社

source: https://events.html5j.org/conference/2018/11/session/#e2

スライド:
docs.google.com

Highlight & memo

  • アクセシビリティ:あらゆる状況の人にとっての使いやすさ
  • ユーザビリティ:特定のユーザにとっての使いやすさ

  • アクセシビリティが低い=そもそもアクセスできなくなるので、マイナスのユーザー体験が生まれてしまう

  • Q.「うちのターゲットに障害者や高齢者はいないよ?」
    • 実はターゲットかもよ?
      • ex)カメラはロービジョン(弱視)の人が遠くのものを観るために便利に使ってたりする
    • ターゲットの知り合いや友人かもよ?
      • 当たり前のことだけど、ハンディキャップのある人は一人で行きているわけじゃない。友人や家族とともに生活している。会話の中で製品の話題を出したり薦めたりするかも
  • Q.「最近アクセシビリティが流行りだしたのはなんで?」
    • 2016年に障害者差別解消法が施行
      • 民間企業も努力義務

Web Content Accessibility Guidelines (WCAG) 2.1

Web Content Accessibility Guidelines (WCAG) 2.1

2.0の翻訳版:
Web Content Accessibility Guidelines (WCAG) 2.0

2.1の翻訳も今やっている:
GitHub - waic/wcag21: WCAG 2.1 Japanese

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

PWAに関するブログや事例を見聞きすることは増えてきましたが、実際にプロダクションに導入してみて得られた発見や運用面での課題について語られることは少なかったのではないでしょうか。

この発表では、PWAを導入して1年以上経つ日経電子版の開発を通じて得られた知見を交えつつ、PWAの現在地や今後の可能性について考えてけたらと思います。

宍戸俊哉 日本経済新聞社

source: https://events.html5j.org/conference/2018/11/session/#a3

PWAは本格的に導入してみたいなと思いつつ、導入ってそれなりにコスト=お金がかかって大変じゃないですか。
「ユーザー体験が向上するのはわかるんだけどビジネス的にどのくらいメリットがあるの?お金に直結するの?」
という疑問にどう戦えばいいのか、 そして導入した結果逆にデメリットはなかったのかiOSでUXがマイナスになったりとか) っていうのとても知りたかったのでその疑問が解消される良いセッションでした!

GoogleのPWA実績紹介にも日経さんは取り上げられてるのだそう。

Nikkei achieves a new level of quality and performance with their multi-page PWA  |  Web  |  Google Developers

Highlight & memo

Performance gains
* 2X better Speed Index
* 14 seconds faster time-to-interactive
* 75% faster loading with prefetch

Business impact
* 2.3X organic traffic
* 58% more conversions (subscriptions)
* 49% more daily active users
* 2X page views per session

58% more conversions (subscriptions)!! こんだけのビジネスインパクトもかなり与えられてるのはすごい!
これは導入にあたって上を説得する良い材料になりそう。

  • ブロッキングリソースをなくすためにInlineにcritical CSSを埋め込んでる。
    • ただ、自動生成ツールは使用していない。デバイスやユーザーごとに必要なスタイルの違いを担保できないため。
    • なので不要なスタイルも埋め込まれてしまってHTMLの容量は増えてしまっているが、それでも恩恵はある
  • A2HS(Add to Home Screen)がどのくらいされたかの計測はonBeforeInstallPromptのイベントハンドラを使うなど自前で計測しないとだめ
    • 重要な指標になるので計測しておくべし
  • Speedcurveでパフォーマンスはモニタリングしている。
    • モニタに常に重要指標を表示させておくことで気づくやすくする。
    • => 良いアイデア
  • Page Speed Insightは最近大幅にアップデートされ、lighthouseの機能が取り込まれている

  • 日本は通信環境は良いから、オフラインで読むためにコンテンツを保存したい、という要望があんまりでない

  • iOS PWAでは問題が山積み
    • ログインしようとすると、別ドメインなのでSafariが開いてしまう。
    • しかもセッションストレージをiOSとPWAで共有してないので、PWAに戻ってもログインされてない!!
  • ServiceWorkerを修正したときの手間
    • ImportScriptsで呼んでるファイルに対してはブラウザが更新確認してくれない。なのでメインのファイルに記載されてるクエリパラメータつけるなどでむりやり更新させてる。
    • 原則ServiceWorkerの更新はブラウザまかせ。
      • 一応skipwaiting()使えばできるけど

開発体制に合わせたCSS設計

CSS設計手法は、BEMやFLOCSSなど代表的なものから、ECSSやRSCSSなど種類も増えてきました。サイト規模や開発体制という視点から見たとき、どういったCSS設計が望ましいのかをお話します。 吉川雅彦

source: https://events.html5j.org/conference/2018/11/session/#e4

資料:開発体制に合わせたCSS設計 | 吉川ウェブ

プレゼン資料はHTMLでした!
Nodefestでも感じたけど、HTMLでプレゼン資料作ってる人、増えてきている印象。

webpackのいままでとこれから

今やフロントエンドの世界では、JavaScriptのmodule化が一般的となりました。 このセッションでは、多くの開発で使われているwebpackの歴史を辿りながら様々な仕組みを紹介していきます。 廣戸裕大 株式会社ドワンゴ / 株式会社メルカリ

source: https://events.html5j.org/conference/2018/11/session/#a5

スライド:
slides.hiroppy.me

Highlight & memo

  • Vote and Prioritize
    • webpackはスポンサーから調達した資金を貢献者に時給換算で割り振っているだそう!
  • runtimeのしくみ
  • 2012年:CJS をターゲットにmodules-webpack として開発がスタート
    • style-loader, css-loader, file-loaderなどのローダー実装
  • 2014年:プラグイン・ローダー機構、webpack-dev-server
  • Hot Module Replacement
  • Tapable
    • webpack プラグインシステム
    • Waterfall, Bail, Loop のタイプを持ち、
    • webpack のライフサイクルをフックする
  • 2017年:v2リリース
  • Tree Shaking
    • 未使用のモジュールを検知しバンドル時に分解する
  • Dead Code Elimination
    • 実行に影響しない未使用のコードを発見しそれを削除する。uglifyJS(or terser) が使われる。
  • 2017年:v3リリース
  • Scope Hoisting
    • インポートチェーンをフラット化し、1 つのインライン関数に変換できる場所を検出する。
    • 余分な関数呼び出しを減らし、実行時間・コード量を減らすことを期待する。
  • 2018:v4(Legato)
    • CommonsChunkPluginがsplitChunks, runtimeChunkへ
    • webpack-cliへ移行
  • SplitChunksPlugin
  • 未定:v5
    • persistent cachingの追加(FileCachePluginの追加)

展示ブース

夕方にはこのような結果になったようです。

他の方々の参加レポート

この記事を書くにあたってカンファレンスを振り返るのに参考にさせてもらいました。
スライドへのリンクも充実してるのでありがたく見させてもらってます。