2015年8月27日に行われたHTML5ビギナーズ勉強会の「初心者のためのWeb標準技術」のセッションの資料です。

1. 初心者のための
Web標準技術2015秋
at HTML5ビギナーズ by 1000ch

2. 1000ch

3. Profile
Webフロントエンドエンジニア
HTML5というかWeb技術全般
Node.js + iOS/Mac
#perfmatters

4. @cssradar @hiloki @t32k @1000ch @ahomu
Frontend Weekly
• 国内外のフロントエンド情報をキュレーション
• 週に一度水曜日に配信

5. @cssradar @hiloki @t32k @1000ch @ahomu
Frontend Weekly
• 国内外のフロントエンド情報をキュレーション
• 週に一度水曜日に配信
https://frontendweekly.tokyo

6. 昨今のWebフロントエンド…

8. 高度化するWebフロントエンド
高まり続けるフロントエンドの比重
変わり続けるWebアプリケーション
増え続ける新しい技術と周辺ツール

9. 「気づいた時には廃れてる」
なんてこともしばしば

10. そんな中でも
廃れにくい技術…

11. Web Standards
W3C・WHATWG・ECMAなどが中心になって
Webの標準となる技術仕様を策定している

12. 最近流行りの抑えておきたい
Web標準をおさらい
※これだけやればイイという文脈では決してありません

13. 最近ウワサの…
Web標準技術 厳選5選

14. 1. ECMAScript 2015

15. ECMAScript 2015
クラス構文やアロー関数、Promiseなど
機能・シンタックス共に大幅に強化された
いわゆるES6やHarmonyと呼ばれるもの
2015年6月に6th editionが標準化された
ChromeやFirefoxが実装を進めるも
シェア全体を見るとまだまだ乏しい!
?
♥

16. function Human(name) {
if (name === undefined) {
name = 'Taro';
}
this.name = name;
}
Human.prototype.hello = function() {
console.log('My name is ' + this.name);
};
class Human {
constructor(name = 'Taro') {
this.name = name;
}
hello() {
console.log(`My name is ${this.name}`);
}
}
ES5 ES6

17. いまからはじめるECMAScript 6
http://www.slideshare.net/1000ch/begin-ecmascript6

18. いますぐ活かす！最新JavaScript
WEB+DB PRESS Vol.87 特集1

19. 2. CSS.next

20. CSS.next
Selector Level4・Notation・プロパティなど
機能面で様々な強化がなされている
「CSS3で盛り上がった∼」以降の変更
プリプロセッサの影響を受けている
ES6同様ブラウザの対応状況は思わしくない
!
?
♥

21. CSS.next CSS
:root {
--primary-color: #E86100;
--base-fontsize: 1rem;
}
h1 {
font-size: calc(var(--base-fontsize) * 2);
height: calc(100px - 2em);
}
body {
font-size: var(--base-fontsize);
}
h1 {
font-size: 2rem;
height: calc(100px - 2em);
}
body {
font-size: 1rem;
}

22. cssnextでみる次世代CSSとPostCSS
http://blog.yucchiy.com/2015/04/22/cssnext-postcss-for-
nextgeneration-of-css

23. 3. HTTP/2

24. HTTP/2
!
?
♥
プロトコルレベルで通信効率が良くなり
サーバーPushなどWeb基盤としても進化
WWWで採用されているHTTPの
1.1から2へ実に16年ぶりバージョンUP
ブラウザおよびサーバーの対応が必要
既存のパフォーマンスに関するノウハウの見直し

25. http://www.http2demo.io/

26. HTTP/2の現状とこれから
http://www.slideshare.net/shigeki_ohtsu/http2-ohtsu-html5conf2015

27. 4. Web Components

28. Web Components
!
?
♥ HTML/CSS/JSのスコープ問題の根本的な解決
Web部品の再利用に向けた
コンポーネント化の作法の標準化
ブラウザの実装以前に、仕様がFixしていない
（特にShadow DOMとHTML Imports）

29. http://1000ch.github.io/switch-element/

30. なぜWeb Componentsはウェブ開発に革命を起こすのか
https://blog.agektmr.com/2014/05/web-components.html

31. 基礎からわかる Web Components 徹底解説
https://html5experts.jp/series/web-components-2/

32. 5. Service Worker

33. Service Worker
!
?
♥
サーバーPushの受信やオフライン化など
Webにおけるユーザー体験を大きく変える
Push API・Cache APIなどを担う
機能を実現する新たなWebの基盤技術
セキュアなWeb（HTTPS）でしか利用できない

34. https://1000ch.github.io/todo/

35. Service Workerに関する仕様とか機能とか
https://1000ch.net/posts/2014/service-worker-internals.html

36. Service Workerの紹介
http://www.html5rocks.com/ja/tutorials/service-worker/introduction

37. 「便利そうなのはわかった」
「試してみたい気もする」

38. 「ブラウザの対応状況って
どうなんでしょう…」

39. How to fallback?

40. ES 2015
CSS.next
HTTP/2
Web Components
Service Worker

41. ES 2015
CSS.next
HTTP/2
Web Components
Service Worker
Babel・CSSnext・Autoprefixerと
いったような各種ツール使って、
非対応ブラウザでも実行できるよ
うなJavaScriptに変換（トランス
パイル）する

42. ES 2015
CSS.next
HTTP/2
Web Components
Service Worker
クライアントとのエンドポイント
サーバーにHTTP/2を対応させる
（クライアントがHTTP/2に対応し
ていればHTTP/2で通信し、非対応
であればHTTP/1.1に）

43. ES 2015
CSS.next
HTTP/2
Web Components
Service Worker
WebComponents.jsというポリフィ
ルを使うことで古いブラウザ
（Safari 7+・IE11+）でもある程度
実行できるようになる

44. ES 2015
CSS.next
HTTP/2
Web Components
Service Worker
オフライン対応もサーバーPushを
必須の要件としなければ、そもそ
もオプトインとして導入しやすい。
対応しているブラウザに対してだ
けでもユーザーエンゲージメント
を高められる

45. まとめ
中には普及せずに非推奨になっていくものも…
枯れにくいが導入しにくさも確かにある
紹介したモノはキャッチアップして損はない

46. 手元で試してみるもよし
サービスに取り入れるもよし

47. ※ご利用は計画的に

48. おわり
+ +ShogoSensui
%
&
1000ch
1000ch