HTML5 Conferenceに行ってきたレポートとリンク集
HTML5 Conference 2018
年に一度のフロントエンドの祭典、HTML5 Conference 2018に行ってきました。
- 日時:2018年11月25日 10:00〜19:30 (9:30開場)
- 会場:東京電機大学 千住キャンパス 1号館(東京都足立区千住旭町5番)
- 公式サイト
- イベント申し込みページ
- タイムテーブル
関連したハッシュタグがまとめてみれるリンク
ホール以外の動画も後日アップされるらしい!
(全部ではないかもとのことだが)
HTML5 Conference 2018のライブ配信をご視聴いただき、ありがとうございました。
— みずまん / 水嶋彬貴 (@mizuman_) 2018年11月25日
ホール以外の映像も下記チャンネルに後日アップします。https://t.co/l1tvNv4yzC
動画公開時や #html5j 関連の勉強会のライブ配信通知が届きますので、是非この機会に登録をお願いします
まさに「祭典」。学べるだけじゃなくて楽しい
学びの深いセッションばかりで本当に行ってよかった!
今どきのカンファレンスらしく動画配信やスライド共有もあるので、現地に行かなくても大いに学びは得られるのだろうけど…
直接プレゼンを聞いたほうがやっぱり臨場感がある。
Twitter実況をするのも追いかけるのも楽しいしね!
タイムテーブルとにらめっこしながら「なんでこの時間、聞きたいセッションかぶってるんや…!」と迷い、セッションが終わるや満席になる前に急いで次の会場に向かい、
展示ブースを物色し、「次は〇〇に行く」とハッシュタグをつけてツイート…の感じ、まさに音楽フェス。
11時から休憩ゼロ(スポンサートークはお弁当食べながらだけど)でセッションを聞き続けてお腹いっぱい_(┐「ε:)_
— えんぴつ@育休中フロントエンジニア (@empitsu88) 2018年11月25日
次何を聞くか迷いながら会場に移動する感じ、音楽フェスっぽくて楽しかった! #html5j
あとは顔見知りにばったり会場で遭遇したり、久々にお会いする方と挨拶できたり。
行ってる間娘を看てくれてた夫には感謝…(-人-)
- HTML5 Conference 2018
- まさに「祭典」。学べるだけじゃなくて楽しい
- 基調講演
- 持続可能なプロダクト開発のために - フロントエンドと新陳代謝の話
- カンファレンススポンサーによるライトニングトーク大会
- アクセシビリティ、はじめよう! 〜「できない」から脱出するための20(仮)のネタ🍣〜
- PWAの導入で得られた成果と見えてきた課題
- 開発体制に合わせたCSS設計
- webpackのいままでとこれから
- 展示ブース
- 他の方々の参加レポート
基調講演
基調講演 吉川徹、えーじ
ビデオメッセージ 東京電機大学学長 安田浩教授
メッセージ 東京電機大学総合研究所特命教授・サイバーセキュリティ研究所長 佐々木良一 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
- Web Authentication API
- Web Asesmbly + Web Audio
- C++で書かれたオーディオ編集ソフトウェアをWeb Assemblyで変換してブラウザで動くようにしたり
- Web Packagingを有効にしたAMP
Web is the only platform no one owns. by Dave Winer
- ウェブをより良くするためにできること
- ドキュメントの翻訳
- 仕様やブラウザベンダーへのフィードバック
- ブログを書く
- 勉強会への参加・登壇
先日のnodefestで「貢献できるOSSの見つけ方」のセッションを聞いたのもあり、typo修正や翻訳からなら気軽にOSS貢献できそう、やってみようかな、とにわかにやる気が湧いた基調講演だった! #html5j_h #html5j https://t.co/yZjMLbFnUl
— えんぴつ@育休中フロントエンジニア (@empitsu88) 2018年11月25日
持続可能なプロダクト開発のために - フロントエンドと新陳代謝の話
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というものがでていたようだ。。
フロントエンドにおける課題のサンプルケース
- とある実装者に追加されたテスタビリティを欠いたコードや密結合な追加ロジックの実装が出現
- すぐにマージするわけにもいかず、いは言え入れない場合の開発工数のロスも大きく、痛みを伴うトレードオフを要求される
- => あるあるすぎて泣ける
闇の魔術に対する防衛策として求められる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コミュニティは分割統治に積極的
やっぱりフロントエンドエンジニアもマイロサービスアーキテクチャの本ちゃんと読んだほうがいいな、と聞いてて思うなどhttps://t.co/2Ydee3WFIr
— えんぴつ@育休中フロントエンジニア (@empitsu88) 2018年11月25日
#html5j_c
- 作者: Sam Newman,佐藤直生,木下哲也
- 出版社/メーカー: オライリージャパン
- 発売日: 2016/02/26
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る
カンファレンススポンサーによるライトニングトーク大会
株式会社 ディー・エヌ・エー/株式会社サイバーエージェント /株式会社ドリコム/日本事務器株式会社/グレープシティ 株式会社/株式会社 日本経済新聞社
「先着順でお弁当がもらえる・・・だと・・・」
大行列でしたがなんとか240名の中に入れたのでお弁当がいただけました。太っ腹!
株式会社サイバーエージェント
新卒研修でslackをチームで開発してテストカバレッジ99%を達成した、という話でした。
slackを入社早々作るというのもすごいけど実務顔負けのモダン開発フローを実施し、かつ英語でのIssue作成やコードレビューをしたとのこと・・・すごすぎる!
新卒研修で実際の開発フローに乗っ取りドキュメント整備、CI使用、英語でIssue,code review実施、テストカバレッジ99%...すごすぎる😭 #html5j
— えんぴつ@育休中フロントエンジニア (@empitsu88) 2018年11月25日
アクセシビリティ、はじめよう! 〜「できない」から脱出するための20(仮)のネタ🍣〜
最近流行の兆しを見せつつある「アクセシビリティ」、取り組んでいますか?
まだ何もしていない、何をしていいかわからない、というあなたに向けて、アクセシビリティの基本的な考え方、取り組む理由などについてゆるーくトークしていきます。
これから取り組んでいく、周りの人を巻き込んでいく際のヒントになるかも?
困っている方からの質問も大募集します!
山本和泉
太田良典 弁護士ドットコム株式会社
source: https://events.html5j.org/conference/2018/11/session/#e2
スライド:
docs.google.com
Highlight & memo
- アクセシビリティ:あらゆる状況の人にとっての使いやすさ
- ユーザビリティを内包、重なる部分がかなりある
- ユニバーサルデザインはアクセシビリティの実現手法の一つ
ユーザビリティ:特定のユーザにとっての使いやすさ
アクセシビリティが低い=そもそもアクセスできなくなるので、マイナスのユーザー体験が生まれてしまう
- Q.「うちのターゲットに障害者や高齢者はいないよ?」
- 実はターゲットかもよ?
- ex)カメラはロービジョン(弱視)の人が遠くのものを観るために便利に使ってたりする
- ターゲットの知り合いや友人かもよ?
- 当たり前のことだけど、ハンディキャップのある人は一人で行きているわけじゃない。友人や家族とともに生活している。会話の中で製品の話題を出したり薦めたりするかも
- 実はターゲットかもよ?
- Q.「最近アクセシビリティが流行りだしたのはなんで?」
- 2016年に障害者差別解消法が施行
- 民間企業も努力義務
- 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実績紹介にも日経さんは取り上げられてるのだそう。
Highlight & memo
Performance gains
* 2X better Speed Index
* 14 seconds faster time-to-interactive
* 75% faster loading with prefetchBusiness 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の容量は増えてしまっているが、それでも恩恵はある
inline critical css、どこからどこまでがcritical css か自動で判断するのは結局難しい。うちも、埋め込みstyleの量が多くなりページ容量が重くなって外した思い出がある… #html5j_a
— えんぴつ@育休中フロントエンジニア (@empitsu88) 2018年11月25日
- A2HS(Add to Home Screen)がどのくらいされたかの計測はonBeforeInstallPromptのイベントハンドラを使うなど自前で計測しないとだめ
- 重要な指標になるので計測しておくべし
- Speedcurveでパフォーマンスはモニタリングしている。
- モニタに常に重要指標を表示させておくことで気づくやすくする。
- => 良いアイデア!
Page Speed Insightは最近大幅にアップデートされ、lighthouseの機能が取り込まれている
- => lighthouseに完全移行するのかと思ってた。。。
- Official Google Webmaster Central Blog: Using page speed in mobile search ranking
日本は通信環境は良いから、オフラインで読むためにコンテンツを保存したい、という要望があんまりでない
- iOS PWAでは問題が山積み
- ServiceWorkerを修正したときの手間
- ImportScriptsで呼んでるファイルに対してはブラウザが更新確認してくれない。なのでメインのファイルに記載されてるクエリパラメータつけるなどでむりやり更新させてる。
- 原則ServiceWorkerの更新はブラウザまかせ。
- 一応skipwaiting()使えばできるけど
開発体制に合わせたCSS設計
CSS設計手法は、BEMやFLOCSSなど代表的なものから、ECSSやRSCSSなど種類も増えてきました。サイト規模や開発体制という視点から見たとき、どういったCSS設計が望ましいのかをお話します。 吉川雅彦
source: https://events.html5j.org/conference/2018/11/session/#e4
プレゼン資料はHTMLでした!
Nodefestでも感じたけど、HTMLでプレゼン資料作ってる人、増えてきている印象。
ずっとOOCSS/FLOCSS/BEMだったけど最近は個人的にatomic designのapb cssが気になってる #html5j_e
— えんぴつ@育休中フロントエンジニア (@empitsu88) 2018年11月25日
海外でもBEM/OOCSS/SMACSSがメジャーなんだ #html5j_e
— えんぴつ@育休中フロントエンジニア (@empitsu88) 2018年11月25日
実装者の多さ、詳しい人の人数、職種間のコミュケーションの多さ、サイトの規模、更新頻度etc...を考慮してcss設計のルールをどうするか決める必要があるという話 #html5j_e
— えんぴつ@育休中フロントエンジニア (@empitsu88) 2018年11月25日
たしかにjsフレームワークでcss modulesとかstyled-componentsとか使うとルールそもそも少なくていいよねってなる。影響範囲少ないからね #html5j_e
— えんぴつ@育休中フロントエンジニア (@empitsu88) 2018年11月25日
webpackのいままでとこれから
今やフロントエンドの世界では、JavaScriptのmodule化が一般的となりました。 このセッションでは、多くの開発で使われているwebpackの歴史を辿りながら様々な仕組みを紹介していきます。 廣戸裕大 株式会社ドワンゴ / 株式会社メルカリ
source: https://events.html5j.org/conference/2018/11/session/#a5
スライド:
slides.hiroppy.me
Highlight & memo
- Vote and Prioritize
- webpackはスポンサーから調達した資金を貢献者に時給換算で割り振っているだそう!
- runtimeのしくみ
- import '.a';が呼ばれるとwebpackコアのwebpack_require(function)が呼ばれて連鎖していく
- この図:https://slides.hiroppy.me/webpack-history/#13
- 2012年:CJS をターゲットにmodules-webpack として開発がスタート
- style-loader, css-loader, file-loaderなどのローダー実装
- 2014年:プラグイン・ローダー機構、webpack-dev-server
- Hot Module Replacement
- ソースコードが変更されるとブラウザをリロードせずに自動的に変更されたモジュールを新しいモジュールへ置換する機能
- この図:https://slides.hiroppy.me/webpack-history/#22
- 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
- 不要なモジュールをダウンロードしないため、非同期チャンクでも効率的
- 扱いが簡単で自動的
- この図:https://slides.hiroppy.me/webpack-history/#59
- 未定:v5
- persistent cachingの追加(FileCachePluginの追加)
展示ブース
アンケートに答えると展示ブースでwebカップケーキもらえる!🧁
— えんぴつ@育休中フロントエンジニア (@empitsu88) 2018年11月25日
フレームワーク系は人気なのかちょっとしか残ってなかった #html5j pic.twitter.com/1c96Q3vCKM
ヤフーさんのブースのフロントエンド総選挙。jQuery、手書きだけど途中で追加したのかな?w 賛否両論感…
— えんぴつ@子育て中フロントエンジニア (@empitsu88) November 25, 2018
#html5j pic.twitter.com/J8TzVtXARB
夕方にはこのような結果になったようです。
HTML5 Conference 2018 のヤフーブースのフロントエンド総選挙アンケートは夕方になりこのような回答状況になっております。ステッカーはなくなってしまいましたが、参加者の皆様の回答をお待ちしております。 #html5j pic.twitter.com/ryiqVuMDwA
— Yahoo!デベロッパーネットワーク (@ydnjp) 2018年11月25日
他の方々の参加レポート
この記事を書くにあたってカンファレンスを振り返るのに参考にさせてもらいました。
スライドへのリンクも充実してるのでありがたく見させてもらってます。