Slide 1
Slide 1 text
HTML
とブラウザの進化を踏まえた
web
フロントエンド実装
iret tech labo #16
Slide 2
Slide 2 text
概要
近年ブラウザの進化に歩みを合わせるようにHTML
の仕様が進化し、web
の表現力が大きく向上して
います。今回のセッションではブラウザの進化の
歴史を踏まえながら、モダンブラウザに対応した
web
フロントエンド実装についてお話をしてまい
ります。
Slide 3
Slide 3 text
自己紹介
工藤響己 / Kudo Hibiki
（デザイン事業部）
2
児の父（5
歳/4
歳）
Hibikilla
という名前で音楽活動をしています（会
社に感謝）
Twitter: @hibikilla30
Slide 4
Slide 4 text
想定受講者
（若い世代の）フロントエンド開発者
サーバーサイド開発者
デザイナー
マーケター, web
運用担当者
PM
営業
Slide 5
Slide 5 text
想定受講者
（若い世代の）フロントエンド開発者
サーバーサイド開発者
デザイナー
マーケター, web
運用担当者
PM
営業
専門用語を極力使わずにお話しします。
Slide 6
Slide 6 text
想定受講者
（若い世代の）フロントエンド開発者
サーバーサイド開発者
デザイナー
マーケター, web
運用担当者
PM
営業
質疑応答もありますので最後までお付き合いく
ださい！
Slide 7
Slide 7 text
最近のブラウザが重視している
こと
パフォーマンス
アクセシビリティ🧏🏻
3D
表現 (WebGL/VR/AR)
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
完全に理解した
Slide 10
Slide 10 text
完全に理解した
※
雰囲気で概要を把握したという意味
Slide 11
Slide 11 text
まずは流れを理解しよう！
Slide 12
Slide 12 text
ブラウザ進化の歴史
黎明期（
1991
〜
1994
）
1991
年 WorldWideWeb
公開🌐
HTML1.0
1993
年 Mosaic
1994
年 Netscape Navigator
Slide 13
Slide 13 text
IE
時代
(1995
〜
2007)
HTML2.0
🌎
1995
年 Internet Explolor
発売
1995
年 Amazon.com
サービス開始
IE
は2007
年まで市場の50%
以上を独占
Slide 14
Slide 14 text
モダンブラウザ戦国時代
(2008
〜
2011)
Safari
Chrome
FifeFox
Opera
etc.
Slide 15
Slide 15 text
Chrome
時代（
2012
〜
2019
）
2012
年頃よりGoogle Chrome
がトップシェアに
2013
年 React.js
公開
2014
年 HTML5.0
2016
年 WebVR API version 1.0
がリリース
2018
年 MS
が独自ブラウザ開発を終了
ブラウザの機能が充実！
Slide 16
Slide 16 text
ブラウザの機能が充実
HTML, CSS, JS
で表現できることが増えた
アイソモーフィックJavaScript
＝サーバーサイド
レンダリング（Node.JS
）
表示速度高速化
VR/AR
Slide 17
Slide 17 text
Web3
時代（
2020
〜）
プライバシー強化と決済機能の要請🔐
GAFAM
に個人情報を握られることへの懸念
3rd Party Cookie
廃止へ
暗号通貨wallet
との連携👛
Brave
Metaverse
Slide 18
Slide 18 text
なぜブラウザの進化が加速した
のか
?
Slide 19
Slide 19 text
W3C/HTML5
から
WHATWG/Living Standard
へ
W3C
はWeb
技術の標準化を行う非営利団体
2004
年に立ち上がったWHATWG
は、Apple
、
Mozilla
、Opera
、Google
などweb
企業が中心の
団体🏢
互換性を保証するWeb
標準規格を重視するW3C
と、新機能をどんどん盛り込んでいきたい
WHATWG
の間で対立がおきた
WHATWG
の勝利！ 2021
年1
月28
日にHTML5
廃
止に
Slide 20
Slide 20 text
Core Web Vitals
2020
年よりGoogle
が提唱している新パフォーマ
ンス品質指標
UX
重視（人が見たときに速いと感じるか）
SEO
にも若干影響
実際にページロードの速度や通信速度を計測し
ているのではなく、ベストプラクティス達成度
を監査している
Slide 21
Slide 21 text
Core Web Vitals
Largest Contentful Paint
（LCP
）は、ユーザー
がページでもっとも有意義なコンテンツをどの
くらい素早く見ることができるかを表します。
First Input Delay
（FID
） は、最初の入力までの
遅延を表します。
Cumulative Layout Shift
（CLS
） は、ページが
どのくらい視覚的に安定しているように感じら
れるかを表します。
Slide 22
Slide 22 text
コアウェブバイタルを意識したフロントエンド
改善レポート（全3
回）
https://cloudpack.media/57739
Slide 23
Slide 23 text
Core Web Vitals
Largest Contentful Paint
（LCP
）は、ユーザー
がページでもっとも有意義なコンテンツをどの
くらい素早く見ることができるかを表します。
→
画像🖼️
First Input Delay
（FID
） は、最初の入力までの
遅延を表します。
Cumulative Layout Shift
（CLS
） は、ページが
どのくらい視覚的に安定しているように感じら
れるかを表します。→
画像🖼️
Slide 24
Slide 24 text
No content