HTMLとブラウザの進化を踏まえたwebフロントエンド実装

iret tech labo #16
2022-jan-26
工藤響己 / Kudo Hibiki（デザイン事業部）

近年ブラウザの進化に歩みを合わせるようにHTMLの仕様が進化し、webの表現力が大きく向上しています。今回のセッションではブラウザの進化の歴史を踏まえながら、2022年現在のモダンブラウザに対応したwebフロントエンド実装についてお話をしてまいります。

Transcript

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